Flutter Widget 之Divider

当两个小组件彼此之间需要一些空间时，在它们之间绘制一条线会很有帮助

无论在哪里使用“分割线(Divider)”小组件，它都会显示为一条水平线，仅此而已～ 现在，小组件已被分割

Column(
    children: [
        BlueBox(),
        Divider(),
        RedBox(),
    ]
)

如果看起来不尽如人意,则可以使用高度属性更改分割线占用的空间

Column(
    children: [
        BlueBox(),
        Divider(
            height: 50,
        ),
        RedBox(),
    ]
)

或粗细，随粗细属性而变化thickness

Column(
    children: [
        BlueBox(),
        Divider(
            height: 100,
            thickness: 10,
        ),
        RedBox(),
    ]
)

其颜色也可以更改

Column(
    children: [
        BlueBox(),
        Divider(
            height: 100,
            thickness: 20,
            color: Colors.purple,
        ),
        RedBox(),
    ]
)

或使用缩紧（indent）添加前导空间

Column(
    children: [
        BlueBox(),
        Divider(
            height: 100,
            thickness: 20,
            color: Colors.purple,
            indent: 20,
        ),
        RedBox(),
    ]
)

使用endIndent添加尾随空间

Column(
    children: [
        BlueBox(),
        Divider(
            height: 100,
            thickness: 20,
            color: Colors.purple,
            indent: 20,
            endIndent: 20,
        ),
        RedBox(),
    ]
)

无需在所有地方为每个分割线制定这些属性

因此，如需所有这些都具有一致的外观,请考虑吧在MaterialApp中设置DividerThemeData，这里唯一的区别是我们使用空间(space)而不是高度（height）

MaterialApp(
    theme: ThemeData(
        dividerTheme: DividerThemeData(
            space: 50,
            thickness: 10,
            color: Color.purple,
            indent: 20,
            endIndent: 20,
        ),
    ),
    //...
)

无论是分割小组件还是小组件组分割线都非常有用，例如在菜单抽屉中将登录（Login）按钮与其他所有按钮分开

但在某些情况下，可以更高效地添加分割线

例如使用ListView的spacerBuilder或ListTile的dividTiles

ListView.separated(
    separatorBuilder: (_, __) => const Divider(),
);

// ...

ListTitle.dividerTiles(
    content, tiles, Colors.purple
);

如果想了解有关Divider的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址