Flutter|Flutter开发中的一些小技巧整理 Flutter|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 }