如何优雅的解决flutter中层级嵌套的问题

673 阅读1分钟

​假设我们要绘制如下一个页面 类似于微信的聊天列表页面 你的代码可能会写成这个样子 上面那个列表使用了 ListView Container Padding Expanded Column Divider Row 等组件通过构造函数传入参数的方式构建了整个widget树。上面的代码可能是最糟糕的情况了。 作为一个合格的程序员至少要对上面的代码进行方法抽取,让整体结构看起来更加清晰。所以你的代码可能会写成下面的样子 现在的代码看起来相对清晰,也是我们开发中经常使用的办法。但是这似乎并没有解决层级嵌套的问题 因为该少的嵌套一个都没少,只不过是分布到了其他的位置,看起来更清晰了而已。

为了解决这个问题 我们基于dart 2.5.0 之后的extension功能,对上面用到的 Container Padding Expanded 进行extensionPadding 为例代码如下 那么我们最一开始的代码就可以写成这个样子 再此基础上 我们在优化一下 抽取一下代码让层次结构更清晰 可以说在一定程度上解决了层级嵌套的问题。在真实的项目中面对的布局可能会更复杂 这其中充斥着大量的 Container Padding Expanded 等等,所以使用extension这种方式可以有效减少很多不必要的嵌套。

最后我想说,人心总是越磨越硬,磨到最后没得感情。