flutter中如何使用divider组件

在Flutter中如何使用Divider组件？我想在列表项之间添加分隔线，但不太清楚具体的实现方法。Divider的厚度、颜色和间距该如何自定义？是否支持水平或垂直方向的分隔线？希望能提供一个简单的代码示例说明基本用法和常见属性的设置。

2 回复

在Flutter中使用Divider组件，只需在widget树中插入Divider()即可。可设置颜色、高度、缩进等属性，例如：Divider(color: Colors.grey, height: 1)。

更多关于flutter中如何使用divider组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，Divider 组件用于创建水平分隔线，常用于列表项之间或界面布局中。以下是基本使用方法：

基本用法

Divider(
  height: 20,       // 分隔区域总高度
  thickness: 1,     // 线粗细
  color: Colors.grey, // 颜色
  indent: 16,       // 左侧缩进
  endIndent: 16,    // 右侧缩进
)

常用属性说明

  • height：分隔线占据的垂直空间（包含上下边距）
  • thickness：线条的实际粗细
  • color：线条颜色
  • indent/endIndent：左右侧缩进距离

在 Column 中使用示例

Column(
  children: <Widget>[
    Text('第一部分'),
    Divider(), // 使用默认样式
    Text('第二部分'),
    Divider(
      height: 40,
      thickness: 2,
      color: Colors.blue,
      indent: 50,
    ),
  ],
)

在 ListView 中分隔列表项

ListView(
  children: [
    ListTile(title: Text('项目1')),
    Divider(),
    ListTile(title: Text('项目2')),
    Divider(height: 30), // 增加间距
    ListTile(title: Text('项目3')),
  ],
)

垂直分隔线

如果需要垂直分隔线，可使用 VerticalDivider 组件，用法类似。

提示：默认情况下 Divider 会自适应父容器宽度，通过 indent 和 endIndent 可控制左右边距。

回到顶部