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 结果

假如有多级对象嵌套，如果不做判空处理那么 组件会报错，一般是在进行网络请求后渲染数据，但是在更新数据前我们不想去做 loading 处理

Text(data?.info?.name ?? "");
//相当于
Text(data != null && data.info != null && data.info.name != null
                                ? data.info.name
                                : ""),

这样写是不是代码简洁了很多？

九、字符串拼接

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

String a = "11111";

"$a${data.str}"