Flutter开发中的少量小技巧整理

一、Text 组件外围包裹了 GestureDetector 手势组件点击的时候响应范围太小

处理方式：

1. Text 外围使用 TextButton 包裹
2. 使用 InkWell 组件包裹

二、List 的使用

在数据量比较小的时候比方固定布局，可以使用 List.generate() ，来循环渲染。
ListView.builder 适用于列表长度比较多，比方存在分页数据，
ListView.builder 外部假如有其余组件需要一起滚动，则需要 禁用内部的滚动事件
physics: NeverScrollableScrollPhysics(),
还有可能出现额外的高度间距，需要用 MediaQuery.removePadding

MediaQuery.removePadding(                      removeTop: true,                      removeBottom: true,                      context: context,                      child: ListView.builder(                          itemCount: 4,                          shrinkWrap: true,                          physics: NeverScrollableScrollPhysics(),                          itemBuilder: (c, i) {                            return ForumItem();                          }),                    ),

去除内部高度。

三、showModalBottomSheet 高度限制，圆角问题

处理方案：将整个文件拷贝进项目。（建议重新命名，这样导包的时候方便识别）
修改maxHeight，注释掉就可

  @override  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {    return BoxConstraints(      minWidth: constraints.maxWidth,      maxWidth: constraints.maxWidth,      minHeight: 0.0,      // maxHeight: isScrollControlled      //   ? constraints.maxHeight      //   : constraints.maxHeight,    );  }

圆角可通过 shape: RoundedRectangleBorder( borderRadius: BorderRadius.only(topRight: Radius.circular(12.r), topLeft: Radius.circular(12.r))), 设置

四、TextFiled

1、光标问题
假如设置了 controller.text ，并且在 onChanged 发生变化的时候 通过 setState(){} 重新升级 text，那就会使输入框状态发生变化，光标会回到初始位置。

  static textEditingController(String text) {    return TextEditingController.fromValue(TextEditingValue(        // 设置内容        text: text ?? "",        // 保持光标在最后        selection: TextSelection.fromPosition(TextPosition(            affinity: TextAffinity.downstream, offset: text == null ? 0 : text.length))));  }

2、切换焦点
假如一个页面有多个输入框，想实现输入结束，点键盘的完成直接去下一个焦点输入，
首先需要给各个输入框设置 focusNode,
而后完成的回调事件是 onEditingComplete，
通过 FocusScope.of(context).requestFocus(_focusNodePwd); 设置新的焦点

3、隐藏默认下划线
在 InputDecoration 里 有个 border 将值设为 InputBorder.none 就可

五、系统状态栏高度和底部操作栏高度适配问题

顶部状态栏高度可通过 MediaQueryData.fromWindow(window).padding.top 获取，
底部操作栏高度可通过 MediaQueryData.fromWindow(window).padding.bottom 获取，
在需要依附底部按钮的地方，肯定需要设置 margin bottom 操作栏高度，否则按钮会被遮挡，在 iPhone 没有 home 键的机型上可以看出来。

六、分割线

flutter 提供了横向和纵向的分割线组件可以直接使用
横线 Divider ，竖线VerticalDivider
在使用的时候外部需要用 Sizebox 包裹并且分别指定宽高

  SizedBox(    width: 1.w,    height: 100,    child: VerticalDivider(    color: Colors.red,    width: 1.w,    ),  )

七、监听 initState 加载完成事件

  void initState() {    super.initState();    //界面build完成后执行回调函数    WidgetsBinding.instance        .addPostFrameCallback((_) => yourFunction(context)); //执行yourFunction  }

八、?? 等符号妙用

假如我们需要从一个对象取数据渲染，如果数据为null，那么就会报错一般的方法是判断

data.str == null ? "" : data.str

但是在用了 dart 语法后，再这么写显得很low，并且也不够美观，dart 提供了 ?? 方法，
其结果和上面的一样

data.str ?? ""

还有一个是 ?. 它的意思是假如 data 为 null 就返回 null，不为 null 返回 data.str 结果

九、字符串拼接

尽量少用 +号来拼接，dart 提供了 $ 和 ${} 前者用于单个对象，后者用于多级数据，
而且假如使用 $ 拼接，无需对 int double 类型数据做 toString() 转换。

String a = "11111";"$a${data.str}"