Flutter Tips

2024-04-03 22:36:04

UI
- 动画
刷新
语法
技巧

总结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'));

通知栏高度
final dynamic padding = MediaQuery.of(context).padding;
padding: EdgeInsets.only(top: padding.top),

cancelTap
传接口时不要当成方法，没有括号()，要不然直接调用

日志过滤

防止tab每次都刷新
AutomaticKeepAliveClientMixin

两个好用的图片插件
FlutterQuickLocateAsset
FlutterAssetAutoCompletion

使用‘尾随逗号’
Flutter代码通常涉及构建相当深的树状数据结构，例如在一个build方法中。为了获得良好的自动格式化，我们建议您采用可选的尾部逗号。添加尾随逗号很简单：始终在函数、方法和构造函数的参数列表末尾添加尾随逗号，以便保留您的编码格式。这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。

使用自定义模板，提高开发效率

码农公寓

UI

动画

刷新

语法

技巧

相关文章