likes
comments
collection
share

Flutter封装微件,Widget还是Method,这是一个问题。

作者站长头像
站长
· 阅读数 4

Flutter 开发人员已习惯以新的小部件来包裹部分用户界面藉以实现各种功能比如说

Text('hello')

很多时候是从某一个Widget开始入手。当UI需求还是增加了,渐渐的会嵌套上Column,Row,Container等,同时我们还会添加click,scroll等监听。

当微件添加到一定程度,我们就会选择将其封装。这也是所有的Flutter开发人员长期面临的问题:拆解庞大的build方法。

在拆解的流程中,首先需要开发者判断确认哪些代码块是适合重复利用的。适合重复的代码片段包括重复的代码序列和实际用户界面的离散部分。这两者经常是并行的

在Android Studio对Widget选择后右键在Refactor会出现两个选择。 Flutter封装微件,Widget还是Method,这是一个问题。

  1. 辅助方法。将代码片段转移到一个方法中。这个方法通常被称为“辅助方法(Help Method)”。如果各位和我一样,初次遇到大型庞杂的build方法可能就会采用这个方法。
  2. Widget封装。这个方法有点类似,但并非将代码块移至相同小部件的方法中,而是新增小部件来将其收入。

两个方式类似却不相同。就这两个选项而言,各位通常采取哪一个呢?辅助方法还是Widget封装?

利与弊

如果在衡量了两个方法之后会想“辅助方法能任意传递所有变量,与另创小部件相比辅助方法的效能想必更好。”。

如真这样想,有一个好消息和一个坏消息。好消息是各位仍是优秀的开发人员,坏消息是实际答案并非直觉所想,另外创建Widget是较好,是有重大因素的。

首要的就是请记住,当Widget在其内调用setState()方法时,所属的build方法整体来说都会重新运行。也就是说,如果用户界面这种大型UI界面在一个辅助方法中切换了要渲染该图标的值,Flutter需要重新构建整个包裹的Widget。

大家都知道Flutter是使用多重树结构来构建用户界面的。而小部件树结构只是顶层而已,于此层树结构新增小部件,几乎不会拖慢应用程序。反观非必要的用户界面重建,可能导致元素树和渲染对象树这类更深层的树结构,从而浪费掉宝贵的CPU的时间和性能。特别是在考虑到将不同状态下的Widget做成动画,那么应用程序在动画执行时每秒会高重绘用户界面60次。但实际上只需要绘制动画图标内的像素即可。

所以,为这个图标创建新的Widget远比设置成辅助方法更有效率。以便其切换状态时,Flutter能精确锁定所要重新渲染的内容,达到最佳效果。同时给另外创建的Widget尽可能使用const构造函数。Flutter便能因此免去多数不必要的任务。

恭喜你,这样你的应用程序更快了。

测试环节

现在我们该对UI进行测试了。各位想一想我是对辅助方法进行测试更简单呢?还是对一个Widget测试更简单呢?

Flutter封装微件,Widget还是Method,这是一个问题。

如果用辅助方法,我想测试favoriteIcon,我还需要创建_expensiveWidget1_expensiveWidget2

但如果我把favoriteIcon封装成一个Widget FavoriteIcon,那么就只需要创建它的测试代码了。

第二个另建Widget的好处是能避免使用过时的BuildContext对象。

Flutter封装微件,Widget还是Method,这是一个问题。

结语

当然另建小部件就截断了可用属性的任意连接,但我们更加了解后即使使用辅助方法,其实也没那么方便对吧?而且往往会牺牲性能表现和可测试性,甚至还有精确性。

转载自:https://juejin.cn/post/7225516176171302973
评论
请登录