Flutter快学快用24讲--07 有无状态组件：如何巧妙地应用 Flutter 有无状态组件

无/有状态组件

由于无状态组件在执行过程中只有一个 build 阶段，在执行期间只会执行一个 build 函数，没有其他生命周期函数，因此在执行速度和效率方面比有状态组件更好。所以在设计组件时，不要任何组件都使用有状态组件进行开发，要根据实际分析情况使用。

Flutter 中基础组件介绍

Flutter 内部包含一些基础的无状态组件，在组件设计的时候，需要对基础组件有一定认识。本课时所使用的 Flutter 基础组件（这里我只简单介绍本课时所使用的组件，更多组件请参考 官网文档）包括：

• Text，文本显示组件，里面包含了文本类相关的样式以及排版相关的配置信息；

• Image，图片显示组件，里面包含了图片的来源设置，以及图片的配置；

• Icon，Icon 库，里面是 Flutter 原生支持的一些小的 icon ；

• FlatButton，包含点击动作的组件；

• Row，布局组件，在水平方向上依次排列组件；

• Column，布局组件，在垂直方向上依次排列组件；

• Container，布局组件，容器组件，这点有点类似于前端中的 body ；

• Expanded，可以按比例“扩伸” Row、Column 和 Flex 子组件所占用的空间 ，这点就是前端所介绍的 flex 布局设计；

• Padding，可填充空白区域组件，这点和前端的 padding 功能基本一致；

• ClipRRect，圆角组件，可以让子组件有圆形边角。

以上组件的具体使用以及参数配置，在 官网 中有具体说明。

组件组合要点

Flutter 功能的开发，可以总结为将基础组件组合并赋予一些交互行为的过程，因此需要掌握组件组合的一些要点。

由于动态组件和静态组件的特点，因此在组合的时候要非常注意，动态组件下的子组件如果过多，则在组件更新的时候，会导致其子组件的全部更新，从而引发性能问题。因此在组件组合的时候需要有一些避免的规则来参考，下面这几点是我自己整理的一套原则。

1. 尽可能减少动态组件下的静态组件；

2. 数据来源相同的部分组合为同一组件；

3. 使用行或者列作为合并的条件；

4. 功能相同的部分，转化为基础组件；

5. 合并后根节点的为 Container。

组件设计

当 UI 提供一个交互过来以后，我们要用一套标准的流程来设计组件，减少主观上不合理的设计，接下来主要介绍下我整理的那一套原则。

例如我们现在需要设计一个图 1 的主界面，其次可以进行点赞操作，点赞完成后数字增加 1 。

图 1 Two You 的首页推荐界面

界面分析

将设计方案分为以下几个过程：

1. 标记所有界面元素（ Flutter 基础组件），按照数字进行标记，请注意明显相似部分不需要标记；

2. 记录相应数字对应的组件名称，并命名展示数据的参数名；

3. 标记需要交互和数据变化的数据；

4. 将数字和数据合成一个最小组件，并标记组件是有或无状态组件；

5. 将第 4 步中的最小组件进行合并，组件组合规则，请参照上面介绍到的“组件组合要点”；

6. 完成组件合并后，绘制一张组件图，再次分析动态组件下的静态组件是否合理，如果能拆分尽量拆分。

<