Flutter Tips
目录
总结flutter开发中遇到的问题，持续更新中...
UI
- CarDialog 、TaxiSuperRuleDialog示例
- SingleChildScrollView 可以滚动，如果SingleChildScrollView嵌套SingleChildScrollView，第二SingleChildScrollView需要加个Expanded
- 有问题的时候可以试试Expanded
- Expanded 平分加三个Expanded
- Scaffold( resizeToAvoidBottomInset: true,） 可以把布局顶上去，不会被输入法遮盖
- Text.rich(TextSpan 一个textviwe不同颜色大小
RichText(text: TextSpan(
children: [
TextSpan(
text:"*",
style: TextStyle(color: JCColor.colorAuxRedColor, fontSize: 15)
),
TextSpan(
text:"费用归属",
style: TextStyle(color: JCColor.colorText222Color, fontSize: 15)
)
]
)),- alignment: Alignment.centerLeft, 左对齐
- 当我们使用行（row）的时候，子组件常常因为高度的不同，导致各个子组件里面的内容不能对齐。这个时候我们可以使用 IntrinsicHeight 来保持row中各个子组件高度一致，从而便于纵向居中对齐。
- row 水平居中 mainAxisAlignment:MainAxisAlignment.spaceBetween
enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}- Row mainAxisSize: MainAxisSize.min,//wrap_content ,不加的话默认为match_parent（MainAxisSize.max）
- Column mainAxisAlignment: MainAxisAlignment.center
listview嵌套listview
child: ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(), //list嵌套listview
itemCount: logic.architectureList?.length ?? 0,
itemBuilder: (context, index) =>
_buildItem(logic.architectureList?[index]),
separatorBuilder: (context, index) => Divider(height: .0),
));ListView.separated 有分割线
Visibility(
visible: true,
//是否保持占位
maintainState: false,
child: Text("显示"),
),弹窗
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16))),
context: context,
builder: (BuildContext context) {
return AirTicketRuleDialog();
});- Spacer其实就是包装了一个 Expanded 的 SizedBox. 我们可以通过它灵活控制 Row/Column。 Spacer(flex: 2), // 弹性系数为2
- 这种布局
Row(children: [
const SizedBox(width: 32),
Expanded(
child: Text(
'退改行李规定',
textAlign: TextAlign.center,
),
InkWell( ]),- MediaQuery.removePadding 可以移除组件的边距，有些组件自带有边距
动画
在使用Flutter动画的时候,我们通常使用这几个组件. AnimationController,控制动画的抽象类 Animation,给定值,转换为动画 Tween, 执行范围 AnimatedBuilder, 处理动画的Widget Transform控件可以将动画执行中的变量值处理反馈在子控件上. https://github.com/dlgchg/animations_flutter
刷新
- eventbus
- then back
- 在onresume里刷新
- find原来的logic，调用他的方法 Android二次进入同一Flutter页面，Flutter没有刷新 Flutter页面使用StatefulWidget组件，并重写didUpdateWidget（）。
语法
位置可选参数，只需要将可选参数放入中括号即可，例子如下； func_text(a, [b = 4]) { } 匿名函数 var a = (b,c){ return b + c; }; //一般构造方法的书写格式 Person(this.name,this.age);
freezed 1.1.0 深度拷贝，语法扩充
Get.off() 导航到下一个页面并删除前一个页面 Get.offAll() 导航到下一个页面并删除以前所有的页面
多构造函数
class FeeDetails {
FeeDetails(this.title, this.content);
FeeDetails.three(this.title,this.content,this.describe);
String? content;
String? describe;
String? title;
}.then()的用法
Future.wait([
// 2秒后返回结果
Future.delayed(new Duration(seconds: 2), () {
return "hello";
}),
// 4秒后返回结果
Future.delayed(new Duration(seconds: 4), () {
return " world";
})]).then((results){
print(results[0]+results[1]);}).catchError((e){
print(e);});技巧
expenand 必须和colum或row一起用，否则debug能运行，release报错。 flutter run --release 这样运行，正式版也可以看日志
dio抓包
dio = Dio(options);
(dio?.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
(HttpClient client) {
client.findProxy = (uri) {
return 'PROXY 172.16.60.122:8888';
};
};打开页面，把这个页面前面的页面都关掉 类似singleTop，启动页面需要指定路由名字 Get.to(() => MineAddAccountPage( ),routeName: ‘name’); 然后关闭 Navigator.of(context).popUntil(ModalRoute.withName('/route-name')); 普通路由 ：直接跳转页面 命名路由：给路由起名字Navigator.of(context).pushNamed("/search");
通知栏高度 final dynamic padding = MediaQuery.of(context).padding; padding: EdgeInsets.only(top: padding.top),
cancelTap 传接口时不要当成方法，没有括号()，要不然直接调用
防止tab每次都刷新 AutomaticKeepAliveClientMixin
两个好用的图片插件 FlutterQuickLocateAsset FlutterAssetAutoCompletion
使用‘尾随逗号’ Flutter代码通常涉及构建相当深的树状数据结构，例如在一个build方法中。 为了获得良好的自动格式化，我们建议您采用可选的尾部逗号。添加尾随逗号很简单：始终在函数、方法和构造函数的参数列表末尾添加尾随逗号，以便保留您的编码格式。 这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。
使用自定义模板，提高开发效率
