Flutter自定义Tab组件中Divider无法显示的原因排查

核心问题：Divider/VerticalDivider缺少必要的布局约束 #

Flutter的Divider（水平分割线）和VerticalDivider（垂直分割线）需要明确的尺寸约束才能显示，你的代码中多处未满足这个条件：

1. Row中直接使用Divider

Divider是水平分割线，默认需要宽度约束，但Row的子Widget默认是包裹内容，没有给这个Divider指定宽度，导致它的宽度被压缩为0，完全不可见。

2. Column中使用Divider

Divider作为水平分割线，需要占满Column的宽度才能显示，但Column的子Widget默认宽度为包裹内容，没有给Divider提供宽度约束，同样会被压缩为0。

3. Column中使用VerticalDivider

VerticalDivider是垂直分割线，需要高度约束才能显示，但Column的子Widget默认高度为包裹内容，没有给这个VerticalDivider指定高度，导致高度被压缩为0。

4. 部分容器未提供尺寸约束

比如最后一个Container包裹的Divider，容器本身没有指定宽度，内部Divider依然缺少宽度约束，无法显示。

解决思路 #

针对不同场景的分割线，添加对应的约束即可：

1. 水平分割线（Divider）：添加宽度约束

• 给Divider的父容器指定固定宽度，或用Expanded让Divider占满Column的宽度
• 示例：

  // 方式1：父容器指定宽度，Divider用Expanded占满
  Container(
    width: 80,
    child: Column(
      children: [
        Expanded(
          child: Divider(color: Colors.blue, thickness: 2),
        ),
        Text('Tab 1')
      ],
    ),
  )
  
  // 方式2：直接给Divider套SizedBox指定宽度
  SizedBox(
    width: 80,
    child: Divider(color: Colors.blue, thickness: 2),
  )
  

2. 垂直分割线（VerticalDivider）：添加高度约束

• 给VerticalDivider的父容器指定固定高度，或用Expanded让它占满Column的高度
• 示例：

  Column(
    children: [
      Expanded(
        child: VerticalDivider(color: Colors.blue, thickness: 2),
      ),
      Text('Tab 2')
    ],
  )
  

3. Row中的分隔线：替换为VerticalDivider

如果要在Row中做纵向分隔，应该用VerticalDivider而非Divider，它专门适配Row的横向布局：

VerticalDivider(color: Colors.blue, thickness: 2)

修正后的完整代码示例 #

class _TabAppState extends State<TabApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 250,
      height: 200,
      color: const Color(0xFF000000),
      child: IntrinsicHeight(
        child: Row(
          children: <Widget>[
            // Row内的垂直分隔线
            VerticalDivider(color: Colors.blue, thickness: 2),
            // Tab 1：带水平分割线
            Container(
              width: 60,
              height: 100,
              child: Column(
                children: [
                  Expanded(
                    child: Divider(
                      color: Colors.blue,
                      thickness: 2,
                      indent: 5,
                      endIndent: 5,
                    ),
                  ),
                  Text('Tab 1', style: Theme.of(context).textTheme.labelLarge),
                ],
              ),
            ),
            // 单独的水平分割线项
            SizedBox(
              width: 60,
              height: 100,
              child: Divider(
                color: Colors.blue,
                thickness: 2,
                indent: 5,
                endIndent: 5,
              ),
            ),
            // Tab 2：带垂直分割线
            Container(
              width: 60,
              height: 100,
              child: Column(
                children: [
                  Expanded(
                    child: VerticalDivider(
                      color: Colors.blue,
                      thickness: 2,
                    ),
                  ),
                  Text('Tab 2', style: Theme.of(context).textTheme.labelLarge),
                ],
              ),
            ),
            // Tab 3
            Container(
              width: 60,
              height: 100,
              child: Column(
                children: [
                  SizedBox(height: 10),
                  Text('Tab 3', style: Theme.of(context).textTheme.labelLarge),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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