Flutter中如何在Column和Row组件中使用Divider组件

一、Column中添加水平分隔线 #

Divider组件默认是水平方向的，直接插入Column的子组件列表中即可实现上下元素的分隔，还能通过参数自定义样式：

示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text('顶部内容', style: TextStyle(fontSize: 18)),
                // 带缩进的灰色粗分隔线
                Divider(
                  color: Colors.grey,
                  thickness: 2,
                  indent: 30,
                  endIndent: 30,
                  height: 40, // 控制分隔线与上下元素的间距
                ),
                Text('中间内容', style: TextStyle(fontSize: 18)),
                // 蓝色细分隔线
                Divider(color: Colors.blue, thickness: 1),
                Text('底部内容', style: TextStyle(fontSize: 18)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

参数说明 #

• color：分隔线颜色
• thickness：分隔线本身的厚度
• indent/endIndent：分隔线左右两端的缩进距离
• height：整个Divider组件的高度，用于控制与上下元素的间距（不是线的高度）

二、Row中添加垂直分隔线 #

Divider默认是水平的，要在Row中实现垂直分隔线，有两种常用方式：

方式1：旋转Divider组件 #

通过RotatedBox或Transform.rotate将水平Divider旋转90度，转为垂直方向：

示例代码（RotatedBox）

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Expanded(child: Center(child: Text('左侧区域'))),
    RotatedBox(
      quarterTurns: 1, // 旋转90度（1个四分之一圈）
      child: Divider(
        color: Colors.red,
        thickness: 2,
        indent: 15,
        endIndent: 15,
      ),
    ),
    Expanded(child: Center(child: Text('右侧区域'))),
  ],
)

方式2：使用VerticalDivider组件 #

Flutter提供了专门的VerticalDivider组件，无需旋转，更适合在Row中使用：

示例代码

Row(
  children: [
    Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Text('第一列内容', textAlign: TextAlign.center),
      ),
    ),
    VerticalDivider(
      color: Colors.orange,
      thickness: 2,
      width: 50, // 分隔线在Row中占据的水平空间
      indent: 10, // 顶部缩进
      endIndent: 10, // 底部缩进
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Text('第二列内容', textAlign: TextAlign.center),
      ),
    ),
  ],
)

效果说明 #

• 旋转Divider的方式可以复用Divider的样式参数，通过indent/endIndent控制分隔线长度
• VerticalDivider专门为Row场景设计，width参数控制它占用的水平空间，使用更直观

内容的提问来源于stack exchange，提问作者Mathan Tr