Flutter 常用控件及使用技巧

常用控件

• SizeBox:调节 Flutter控件之间的间距控件如: SizeBox(height:8)、SizeBox(width:10)
• FadeInImage:可以设置placholder 的图片
• Flexible： 可伸缩组件
• Expanded： 可伸缩组件继承自Flexible
• Divider： 分隔线Divider(color: Colors.red);
• ClipRect： 可以裁剪widget
• WillPopScope： 监听导航返回按钮的事件
• kReleaseModel: flutter提供了一个常量来区分是否是release模式
• FractionallySizeBox：百分比宽高布局、撑满屏幕宽度的组件
• PhysicalModel 组件可以实现圆角
• MediaQuery.removePadding 移除安全区
• NotificationListener 可以监听子控件的滑动
• Opacity设置包裹的子控件的透明度，opacity为0时全透明，1是不透明，
• PhysicalModel 设置的圆角不会被上层控件覆盖掉
• Colors.transparent 透明色
• ConstrainedBox: 子控件的大小受父控件的ConstrainedBox中的minWidth、maxWidth、minHeight、 maxHeight限制
• UnconstrainedBox:可以使子控件的宽高不受父控件的约束
• PreferredSize 包裹AppBar 可以修改App的高度
• LimitedBox：用来限制组件最大宽度和最大高度的
• Visibility: 用来控制child 是否显示
• Flutter 中 appBar 高度 在 ios 是不是 44, 而是kToolbarHeight 的高度 56, statusBarHeight 高度也不是44,而是 47
• 可以通过设置Container中的constraints属性来约束Container最大/小 宽/高 Container( constraints: BoxConstraints.tightForFinite(width: 200),)

• Wrap 流式布局

  
  

image

1、Image
2、Image.asset
3、Image.network
4、Image.file
5、Image.memory

• Image 支持的图片类型： JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP、WBMP。

• 加载本地图片，导入dart:io, 和 path_provider插件

  
  image.png
• 显示图片loading的placeholder，导入 transparent_image插件 当图片没加载出来的时候显示loading的圈圈，图片下载成功后渐变显示出来

使用技巧

• flutter 中的cloumn中的子widget如果要左对齐或右对齐可以在子widget外面包裹一层Row，然后通过设置Row的主轴对齐方式就可以了
• Row 有个属性是mainAxisSize：当我们不设置的时候默认是 MainAxisSize.max 意思就是能占多大就占多大，所以当我们不设置这个属性的时候宽度会占满屏幕的宽度
• FlatButton 有个 MaterialTapTargetSize属性，如果不设置默认会高度会撑到48
• FlatButton有默认宽高，可以将FlatButton设置为ButtonTheme的child属性，然后设置ButtonTheme的width和height属性来修改FlatButton的宽高；这里是因为在FlatButton父类的build方法中会从上下文中取ButtonTheme出来，然后从ButtonTheme中取出button的最小宽高
• flutter 会帮我们最多缓存1000张图片，最大100兆的网络图片，在flutter -> image的文档中有说明
• ListView 默认构造器：针对 children 比较少的时候，因为文档中说这个方法会尽可能多的创造 child，比如当我们的 children 为 100 的时候使用该方法有可能一次性就创建了 100 个。
• ListView.builder: 当我们的 child 将会被展示的时候才会调用 itemBuilder 函数
• ListView.separated: 有分隔线的
• ListView中设置item中控件的高度是无效的，只能通过设置ListView 的itemExtent才可以
• 开发测试阶段应用的库放到 dev_dependencies: 下,dev_dependencies是开发时的依赖，打包时是不会打包进去的
• 当BottomNavigationBar中的BottomBarItem超过4个时需要设置 BottomNavigationBarType为fixed才显示文字
• 点击itemBar的item时上面的波纹圆圈可以在 app的theme中设置highlightcolor为Colors.transparent 来取消
• 当一个Container内部在包含一个Container时，如果两个同事设置了width和height，那么内部Containers设置的宽高无效，内部的Container会撑满外部的Container，可以通过给外部Container设置alignment属性来解决这个问题，因为当设置了alignment时，源码里会为子Container包裹一层Align组件。
• 当外部和内部同时添加了事件时，如果点击内部widget偶尔会响应外部widget的事件，解决这个bug可以不要使两个都添加了GestureDetector的widget有嵌套关系，可以使用Stack来解决它们之间的嵌套关系。
  如果不想内部的widget相应GestureDetector事件的话可以IgnorePointer包裹内部widget
• 系统导航栏上的返回按钮事件是flutter内部处理的，如果需要在点击返回按钮时处理些事情可以使用WillPopScope包裹一下Scaffold
• dart 中不论你导入那个 widget 包，dart 都只会导入在你的应用中使用的 widget。
• Textfield 中文字没有垂直居中可以设置contentPadding解决
• 实时搜索时，判断接口返回的搜索关键词和当前的搜索关键词是否一致，一致时才展示，不一致时不展示，这样可以提高效率。

• 网络返回数据有中文的处理

  
  image.png
• 使用 Container 包裹Text 组件时,如果不设置 Container 组件的高度,其实际显示的高度要比 Text 实际内容的高度要高
• 使用 Text 组件时,其内容,默认不是垂直居中的,是底部对齐的,上面会有一定的间隙,如果需要垂直居中,可以将其 style属性中的height 属性设置为 1.
• Expanded和Flexible的区别就是FlexFit.tight和FlexFit.loose的区别：tight：必须（强制）填满剩余空间。loose：尽可能大的填满剩余空间，但是可以不填满。
• dio 忽略https 证书校验

     (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
        ///忽略证书
       client.badCertificateCallback =  (X509Certificate cert, String host, int port) => true;
     };

• webSocket 绕过 SSL/TLS 验证

class GlobalHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

然后在面函数中调用 HttpOverrides.global = GlobalHttpOverrides();

• 判断字符串是否可以转换成 double

  bool isDoubleString() {
    return RegExp(r"^[-//+]?//d+(//.//d*)?|//.//d+$").hasMatch(this);
  }

• 空合运算的有优化写法 _instance ??= RefreshTokenProxy._();