flutter项目中使用

一些小部件

GestureDetector: 手势
手势表示由一个或多个指针移动组成的动作。主要有以下几种
onTap ：点击事件触发

Divider() 设置分割线
SharedPreferences数据存储

SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.getKeys()//取出所有key

MainAxisAlignment 水平排列

报错：A RenderFlex overflowed by 8.0 pixels on the bottom
使用SingleChildScrollView处理使之滑动

Expanded:填满剩余空间
Spacer : Row、Column、Flex的子控件的空隙

RefreshIndicator : 下拉刷新

Scaffold : 实现了Material风格的基本布局结构，它提供了展示drawers、snack bars和bottom sheets的功能。

EdgeInsets:
fromLTRB(double left, double top, double right, double bottom)，分别指定四个方向的填充。
all(doube value)，所有方向均使用相同数值的填充。
only(top:0,right:0,bottom:0,left:0)，可以设置具体某个方向的填充(可以同时指定多个方向)。
symmeric(vertical:0,horizontal:0)，用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

Padding:
Object -> Diagnosticable -> DiagnosticableTree -> Widget -> RenderObjectWidget -> SingleChildRenderObjectWidget -> Padding

MaterialApp(
debugShowCheckedModeBanner: false,//去掉右上角DEBUG标签
)
定义一个button

new RaisedButton(
   onPressed:(){
     Navigator.pushNamed(context, "/screen2")
   },
   child: new Text("Push to Screen 2"),
),

const MaterialButton({
  Key key,
  @required VoidCallback onPressed,              //点击按钮的回调函数
  ValueChanged<bool> onHighlightChanged,         //高亮变化的回调
  ButtonTextTheme textTheme,                     //按钮的字体主题
  Color textColor,                               //字体颜色
  Color disabledTextColor,                      //禁用时的字体颜色
  Color color,                                  //按钮背景色
  Color disabledColor,                          //禁用时的背景色
  Color focusColor,                              //联动节点获得焦点时的颜色
  Color hoverColor,                              //鼠标悬停时的颜色
  Color highlightColor,                          //按下背景颜色（长按，不是点击）
  Color splashColor,                            //水波纹颜色
  Brightness colorBrightness,                   //按钮亮度
  double elevation,                              //阴影尺寸
  double focusElevation,                        //联动节点获得焦点时的阴影尺寸
  double hoverElevation,                        //鼠标悬停时阴影尺寸
  double highlightElevation,                    //长按阴影尺寸
  double disabledElevation,                    //禁用时的阴影尺寸
  EdgeInsetsGeometry padding,                  //内边距
  ShapeBorder shape,                            //按钮的形状
  Clip clipBehavior: Clip.none,                //裁剪
  FocusNode focusNode,                         //联动节点
  MaterialTapTargetSize materialTapTargetSize,  //有效的点击区域大小
  Duration animationDuration,                  //动画时间  
  double minWidth,                              //最小宽
  double hight,                                //高度
  Widget child                                  //子节点
})

输入框,这个用到地方的还是挺多的

TextField(
           autofocus: false,
           controller: controller,
           //绑定焦点1
           focusNode: focusNode2,
           keyboardType: TextInputType.text,
            onChanged: (remark) {getForm('remark',remark);},
           style: TextStyle(fontSize: 12,color:Color.fromRGBO(35, 35, 35, 1)),//输入文字颜色和大小
           decoration: InputDecoration(
           icon: Icon(Icons.assignment_ind),
           hintText: '请输入备注信息',//文字提示
           hintStyle: TextStyle(color:Color.fromRGBO(187, 187, 187, 1)),//提示文字颜色
           border: InputBorder.none,//去掉下划线
           ),
 )
//构造
  const TextField({
    Key key,
    this.controller,            //控制器，控制TextField文字
    this.focusNode,       //焦点
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false, //是否自动"对焦"
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发（键盘按键）
    this.onEditingComplete,  //当用户提交可编辑内容时调用
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
  })

flutter Icon的使用

PreferredSize : 取消默认,使用自定义appbar

AppBar(
        backgroundColor: ConstValue().barSearchBG, //定义背景颜色
        automaticallyImplyLeading: false, //是否显示默认的后退按钮
        elevation: 0, //阴影,值越大越清楚
        titleSpacing: 0,
        title: ....
        ,
      )

Container : 基础控件,可以组成任意想要的效果

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

decoration属性介绍:
border：增加一个边框，
hintText：未输入文字时，输入框中的提示文字，
prefixIcon：输入框内侧左面的控件，
labelText：一个提示文字。输入框获取焦点/输入框有内容 会移动到左上角，否则在输入框内，labelTex的位置.
suffixIcon: 输入框内侧右面的图标.
icon : 输入框左侧添加个图标

Container(
          //边框设置
         decoration: new BoxDecoration(
         //背景
        color: ConstValue().buttonBG,//Colors.lightBlue[50],
        //设置四周圆角 角度
        borderRadius: BorderRadius.all(Radius.circular(2.0)),
         //设置四周边框
         border: new Border.all(width: 1, color: ConstValue().buttonBG,),
        ),

        child: ....
)

当获取不到context上下文时,可以通过这种方式跳转页面

GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
	....
  navigatorKey.currentState.pushAndRemoveUntil(
              new MaterialPageRoute(
                  builder: (BuildContext context) => LoginScreen()), (
                  route) => route == null);

更新状态
定义对象

class TaskModel with ChangeNotifier {
	...
    void update() async {
    ...
    notifyListeners();
    }
 }

初始化

final providers = Providers()
    ..provide(Provider<TaskModel>.value(TaskModel()))

取值或者调用方法赋值

Provide.value<TaskModel>(context).update()

在widget使用(notifyListeners会通知到这里进行更新)

Provide<SearchModel>(
              builder: (context, child, search) {
                if(search.info !=  null){
                  print(search);
                  loadData();
                }
                return Container();
     }
)

dart相关

async await
void update() async{
await print(“异步”);
}

jsonDecode ->import ‘dart:convert’;
http.get() ->import ‘package:http/http.dart’ as http;

dynamic x = ‘hello’;//dynamic编译时不会判断数据类型，但是运行时会推断，dart的语法检查失效

??双问号运算符表示"如果为空"。例如，采用以下表达式。
String a = b ?? ‘hello’;

字符串数组
List strlist

json转换请求结果
jsonDecode(utf8.convert(response.bodyBytes))

class Search {
  Search({ //定义构造方法
  this.startDate, 
  this.endDate,
  this.orderCode,
  });

  String  startDate, endDate,orderCode;

//使用对象比较,重写了相等和hashCode
    @override 
    bool operator ==(Object other) =>
    identical(this, other) || other is Search &&runtimeType == other.runtimeType &&
    startDate == other.startDate &&
    orderCode == other.orderCode &&
    endDate == other.endDate;
        
    @override
    int get hashCode => orderCode.hashCode ^ endDate.hashCode ^ startDate.hashCode;

   factory Search.fromJson(Search other) {
      return Search(
        startDate: other.startDate,
        endDate: other.endDate,
        orderCode: other.orderCode,
      );
    
  }
  //相等于toString
    void call(){
      print("startDate is $startDate , endDate is $endDate , orderCode is $orderCode");
    }
}