源码解读
// 继承 StatelessWidget
class Divider extends StatelessWidget {
/// 创建分割线
const Divider({
Key? key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
}) : assert(height == null || height >= 0.0),
assert(thickness == null || thickness >= 0.0),
assert(indent == null || indent >= 0.0),
assert(endIndent == null || endIndent >= 0.0),
super(key: key);
/// 分割线高度范围,如果没有设置,则获取 DividerThemeData.space的值,如果 DividerThemeData.space 也不存在,则默认为 16.
final double? height;
/// 分割线内绘制线的粗细
final double? thickness;
/// 到分割线前边的空间偏移量
final double? indent;
/// 到分割线后边的空间偏移量
final double? endIndent;
/// 分割线内绘制线的颜色
final Color? color;
/// 通过 connet 生成一个边,可设置颜色和宽度
static BorderSide createBorderSide(BuildContext? context, { Color? color, double? width }) {
// 获取有效的颜色
final Color? effectiveColor = color
?? (context != null ? (DividerTheme.of(context).color ?? Theme.of(context).dividerColor) : null);
// 获取有效的宽度
final double effectiveWidth = width
?? (context != null ? DividerTheme.of(context).thickness : null)
?? 0.0;
// 如果有效颜色为 null, 则返回只有效宽度的边框边对象,否则返回颜色和宽度都有的对象
if (effectiveColor == null) {
return BorderSide(
width: effectiveWidth,
);
}
return BorderSide(
color: effectiveColor,
width: effectiveWidth,
);
}
// 重写 StatelessWidget 的 build 方法
@override
Widget build(BuildContext context) {
// 获取分割线主题对象
final DividerThemeData dividerTheme = DividerTheme.of(context);
// 分割线的高度空间,默认 16
final double height = this.height ?? dividerTheme.space ?? 16.0;
// 分割线内绘制线的粗细
final double thickness = this.thickness ?? dividerTheme.thickness ?? 0.0;
// 分割线左右空白间距
final double indent = this.indent ?? dividerTheme.indent ?? 0.0;
final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0;
return SizedBox(
height: height, // 设置高度
child: Center(
child: Container(
height: thickness,
margin: EdgeInsetsDirectional.only(start: indent, end: endIndent),
// Container 的装饰
decoration: BoxDecoration(
border: Border( // 边框对象的底边对象
bottom: createBorderSide(context, color: color, width: thickness),
),
),
),
),
);
}
}
二、总结
- Divider 继承于 StatelessWidget
- Divider 的 height 不是绘制线的粗细,它比绘制线的粗细是大于或者等于
- Divider 是 Container 的盒子装饰底边对象(bottom)完成的
- Divider 的层级: SizeBox -> Center -> Container -> BoxDecoration -> Border
三、实例
// 基本设置
Divider(
thickness: 1,
color: Colors.green,
indent: 10,
endIndent: 20,
)
// 通过 context 创建 BorderSide 对象
Border(
bottom: Divider.createBorderSide(context),
top: Divider.createBorderSide(context),
)