前言
众所周知,flutter的widget嵌套问题一直是一个老大难的问题.目前社区也有各种各样的方案, 有hackware 的ConstraintLayout 这样一个超级强大的 Stack.将所有的布局和样式定义融在一起.也有styled_widget这样的解决方案.还有通过添加自定义拓展函数的方式,给widget添加布局功能.但是对于部分喜欢原生,或者对于以上几种解决方案不想使用的,嵌套代码的书写依旧是一个麻烦事情.以下,我针对我在开发flutter页面布局过程中遇到的问题和烦恼,我的解决方法.
问题和烦恼
在flutter页面布局中,经常会遇到以下几种情况
- 页面布局过程中,可能需要给widget加上
marginTop:10属性,这个时候就必须得给widget添加一个父容器. 于是流程就变成了
- 拖动鼠标选中所有的widget代码,如果widget代码很长或者嵌套比较深,还得仔细辨认是否选择正确,没有多选或者少选.然后剪切.
- 在剪切处编写父容器及其属性
- 在父容器节点下添加child，粘贴刚才剪切的内容作为child的值
- 页面布局过程中,父容器可能需要更改或者移除掉,如果是更改,直接修改widget名字就行,但是如果想移除这个widget,那么你就需要
- 拖动鼠标选中widget的child,如果widget代码很长或者嵌套比较深,还得仔细辨认是否选择正确,没有多选或者少选.然后剪切
- 删除掉遗留的widget
- 粘贴刚刚剪切的内容
- 拆分自己嵌套代码来减少嵌套层级的时候,又是需要精确的拖动/剪切需要拆分的代码.稍不留神,就会多剪切一个括号或者少剪切一个括号.
解决
针对以上的问题和烦恼,在VScode中,开发了一个Flutter Insert and Remove的插件,插件在右键菜单中添加了命令,识别和匹配光标的widget,实现添加/移除/拆分widget的操作.
添加
- 添加单个父容器
- 添加
Flex这类的父容器
移除
移除当前光标所在的widget
拆分
提取当前光标所在的widget
总结
无论是前言中提到的解决方案也好,我的工具也罢,都只是对widget嵌套的一个解决思路,如果不做合理的规划,照样解决不了嵌套的各种问题,所以也希望大家能够根据自己的业务和规范,做好组件的封装,减少嵌套,也让代码更可读.
