美文网首页Flutter
Flutter 常用控件及使用技巧

Flutter 常用控件及使用技巧

作者: 张_何 | 来源:发表于2021-05-06 15:31 被阅读0次

    常用控件

    • 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._();

    相关文章

      网友评论

        本文标题:Flutter 常用控件及使用技巧

        本文链接:https://www.haomeiwen.com/subject/pcrddltx.html