微信交流群

# Divider

Divider是一个分割线控件。基本用法如下:

Divider(
  height: 10,
  thickness: 5,
  color: Colors.red,
  indent: 10,
  endIndent: 20,
)
1
2
3
4
5
6
7

height:是控件的高,并不是线的高度,绘制的线居中。

thickness:线的高度。

indent:分割线前面空白区域。

endIndent:分割线后面空白区域。

效果如下:

蓝色区域为父控件,红色为分割线。

# VerticalDivider

VerticalDivider 和Divider用法一样,Divider是水平分割线,而VerticalDivider是垂直分割线,用法如下:

VerticalDivider(
  width: 20,
  thickness: 2,
  color: Colors.red,
  indent: 10,
  endIndent: 30,
)
1
2
3
4
5
6
7

效果如下:

# 全局设置

在MaterialApp中对分割线进行全局属性设置:

MaterialApp(
	...
	theme: ThemeData(
    dividerTheme: DividerThemeData(
    ),
    ...
  ),
)
1
2
3
4
5
6
7
8

DividerThemeData的属性和Divider基本一样,唯一一个不同的就是spacespace对应Divider的height和VerticalDivider中的width

 注意: 1.12.13+hotfix.5 • channel stable 源代码中说明如下:

/// The [Divider]'s width or the [VerticalDivider]'s height.
///
/// This represents the amount of horizontal or vertical space the divider
/// takes up.
final double space;
1
2
3
4
5

这个说明是错误的,看下Divider实现源代码:


Widget build(BuildContext context) {
  final DividerThemeData dividerTheme = DividerTheme.of(context);
  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),
        decoration: BoxDecoration(
          border: Border(
            bottom: createBorderSide(context, color: color, width: thickness),
          ),
        ),
      ),
    ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

height的值定义如下:

final double height = this.height ?? dividerTheme.space ?? 16.0;
1

所以dividerTheme.space的值代表Divider的height