Flutter中的Widget

在Flutter中给Widget中添加padding，可以使用Padding或者Container

Padding(
  padding: EdgeInsets.fromLTRB(7, 4, 7, 4),
  child: LocalNavWidget(localNav:localNav),
),

为控件添加点击事件需要使用GestureDetector或者Inkwell实现其中的onTap事件

return GestureDetector(
  onTap: (){},
  child: Column(
    children: <Widget>[
      Image.network(model.icon,height: 32,width: 32,),
      Text(model.title,style: TextStyle(fontSize: 12),)
    ],
  ),
);
Inkwell(
    onTap:(){},
    child:
)

如果想让Row中的控件平均排列使用mainAxisAlignment

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,//平均排列
  children: items,
);

实现上面圆角背景的效果可以使用Container的decorator实现

Container(
  height: 64,
  width: double.maxFinite,
  decoration: BoxDecoration(//为Container添加装饰，
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(6))//添加圆角
  ),
  child: Padding(
      padding: EdgeInsets.all(7),
      child: _buildItems(context),
  ),
);

实现上面这种圆角可以使用PhysicalModel

return PhysicalModel(
  color: Colors.transparent,//背景颜色
  clipBehavior: Clip.antiAlias,//裁切
  borderRadius:BorderRadius.all(Radius.circular(6)),//设置圆角
  child: _buildNavItems(context),
);
//这种情况下为什么用Container不能实现呢？
//因为Container设置的圆角是背景的圆角，我们在上层又盖上了一层背景，也就是覆盖掉了，
//也就看不到效果

利用Container为背景添加颜色渐变的效果。

Container(
  decoration: BoxDecoration(//通过装饰器添加一个颜色渐变的背景色
    gradient: LinearGradient(colors: [Color(int.parse('0xff'+model.startColor)),Color(int.parse('0xff'+model.endColor))]),
    //这个代码是为中间的蓝色块添加上下两个白色间隔
    border: isCenter ? Border(top: BorderSide(width: 4,color: Colors.white),bottom: BorderSide(width: 4,color: Colors.white)):null,
  ),
  height: isCenter? 96:88,
  child: FractionallySizedBox(
    widthFactor: 1,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: items,
    ),
  ),
);

获取屏幕宽度的代码：MediaQuery

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

TextField的使用:

child: new TextField(
autocorrect: false, // 是否自动校正
autofocus: false, //自动获取焦点
enabled: true, // 是否启用
inputFormatters: [], //对输入的文字进行限制和校验
keyboardType: TextInputType.text, //获取焦点时,启用的键盘类型
maxLines: 2, // 输入框最大的显示行数
maxLength: 3, //允许输入的字符长度/
maxLengthEnforced: false, //是否允许输入的字符长度超过限定的字符长度
obscureText: true, // 是否隐藏输入的内容
onChanged: (newValue) {
    // print(newValue); // 当输入内容变更时,如何处理
},
onSubmitted: (value) {
    // print("whar"); // 当用户确定已经完成编辑时触发
},
style: new TextStyle(
    color: new Color(Colors.amberAccent.green)), // 设置字体样式
textAlign: TextAlign.center, //输入的内容在水平方向如何显示
decoration: new InputDecoration(
    labelText: "城市",
    icon: new Icon(Icons.location_city),
    border: new OutlineInputBorder(), // 边框样式
    helperText: 'required',
    hintText: '请选择你要投保的城市',
    prefixIcon: new Icon(Icons.android),
    prefixText: 'Hello'),
),

Flutter 的Loading页面可以使用Stack和CircularProgressIndicator配合自己封装一个Loading页面

import 'package:flutter/material.dart';

class LoadingContainer extends StatefulWidget{
  final bool isLoading;
  final Widget child;
  const LoadingContainer({Key key, this.isLoading = true,this.child}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _LoadingContainer();
}
class _LoadingContainer extends State<LoadingContainer>{
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: widget.isLoading ? Container(
        height: 40,
        width: 40,
        child:Center(
          child:  CircularProgressIndicator(),
        ),
      ) : widget.child,
    );
  }
}

瀑布流布局插件：flutter_staggered_grid_view: ^0.3.0

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
StaggeredGridView.countBuilder(
      crossAxisCount: 4,
      itemCount: 8,
        itemBuilder: (BuildContext context, int index) => new Container(
            child: new Card(
                elevation: 4,
                child: PhysicalModel(
                  color: Colors.transparent,
                  clipBehavior: Clip.antiAlias,
                  borderRadius: BorderRadius.all(Radius.circular(6)),
                  child: Column(
                    children: <Widget>[
                      _buildImage(index),
                      _buildBottom(index),
                    ],
                  ),
                )
            )
        ),
    staggeredTileBuilder: (int index) => new StaggeredTile.fit(2)),
)

下拉刷新的控件：RefreshIndicator RefreshIndictor

RefreshIndicator(child: null, onRefresh: null)

让页面缓存，不是每次都重新加载继承AutomaticKeepAliveClientMixin实现里面的方法，返回true

AutomaticKeepAliveClientMixin
@override
bool get wantKeepAlive => true;