flutter 组件之水平分割线和垂直分割线

7 min read

VerticalDivider class

A thin vertical line, with padding on either side.

In the material design language, this represents a divider. Vertical dividers can be used in horizontally scrolling lists, such as a ListView with ListView.scrollDirection set to Axis.horizontal.

The box's total width is controlled by width. The appropriate padding is automatically computed from the width.

IntrinsicHeight(
    child: new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Foo'),
    VerticalDivider(),
    Text('Bar'),
    VerticalDivider(),
    Text('Baz'),
  ],
))

Divider class

A thin horizontal line, with padding on either side.

In the material design language, this represents a divider. Dividers can be used in lists, Drawers, and elsewhere to separate content.

To create a divider between ListTile items, consider using ListTile.divideTiles, which is optimized for this case.

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