常用控件
-
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插件
- 显示图片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解决
- 实时搜索时,判断接口返回的搜索关键词和当前的搜索关键词是否一致,一致时才展示,不一致时不展示,这样可以提高效率。
-
网络返回数据有中文的处理
- 使用 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._();