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._();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容