Flutter开发中的一些小技巧整理

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

解决方式：

Text 外围使用 TextButton 包裹
使用 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}"

Flutter开发中的一些小技巧整理

你可能感兴趣的:(Flutter开发中的一些小技巧整理)