Flutter 组件分析之Divider、VerticalDivider

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.
适宜人群: 入门

引子

Divider 是 Flutter 中的分割线组件, 在 ui 上显示为一条横向的分割线, 与此相像的是 VerticalDivider , 它是一条竖向的分割线. 无论在列表或者 markdown 中, 分割线的使用往往都占据着很大的使用空间.

Divider

说起 Divider、VerticalDivider , 这二者无论实现还是参数都差不多. 因此我们通过 Divider 来讲解下二者的用法和实现. Divider 有如下参数:

其中, color 不用说, 代表着分割线的颜色. height 表示这条分割线大绘制范围. thickness 表示这条分割线大绘制粗细. indent、endIndent代表分割线前后的间距. 通过这些参数可以构建一个相对灵活的分割线.

构建

Divider 的构成实际上是通过多个 widget 组合最后生成的一个总 widget. 它通过 SizedBox 决定了 Divider 所占据的空间, 再通过 Center 让分割线居中. 最后通过 Container 来绘制分割线. 这一系列的组合简单而又便捷的生成了一条高自定义的分割线对象.

值得注意的是, Divider 并不需要任何参数的传入便可以构建一条分割线. 这一切都要归功于 DividerTheme , 它最终继承于 InheritedWidget . child 可以通过 dependOnInheritedWidgetOfExactType 来获取当前的 DividerTheme. 在 DividerTheme 中, 定义了全部的属性. 因此即使用户不传入, 依然可以生成 Divider. 至此, Divider 就分析结束了.

思考

我们从 Divider 可以看官方对组件的包装和思考, 其中 DividerTheme 的设计值得我们去学习、思考. 如果你们团队拥有一套通用的设计规范, 不妨可以创建自己的 CustomTheme , 将自己的 CustomTheme 包裹在 root 节点. 那么 child 将会很方便的获取统一规范的 ui 配置. 同时, 我们也能很简单的做到主题统一, 一键切换主题等等.