Flutter技术问询：能否在组件间绘制如图所示的垂直线？

嘿，这个问题我太熟了！在Flutter里要实现组件间的垂直线，其实有好几种靠谱的方案，而且和VerticalDivider、HorizontalDivider也息息相关，我给你一一拆解：

1. 直接用官方的VerticalDivider组件 #

这是Flutter官方专门为垂直分隔场景提供的组件，用法简单直接，最适合常规的Row布局场景：

Row(
  children: [
    const Text("左侧内容模块"),
    const VerticalDivider(
      color: Colors.grey.shade400, // 分隔线颜色
      thickness: 1, // 线条本身的粗细
      width: 24, // 整个分隔组件占据的宽度（左右会自动留白）
      indent: 8, // 线条顶部的留白距离
      endIndent: 8, // 线条底部的留白距离
    ),
    const Text("右侧内容模块"),
  ],
)

小提醒：VerticalDivider本质是一个带内边距的SizedBox，内部用Container实现垂直线条，所以width是组件整体宽度，不是线条宽度，线条粗细靠thickness控制哦。

2. 自定义垂直线（更灵活的场景） #

如果官方组件的样式满足不了你（比如不需要留白、要固定高度的线条），直接用Container或者SizedBox手动实现更自由：

Row(
  children: [
    const Expanded(child: Text("左侧超长内容，自动换行")),
    // 自定义固定高度的垂直线
    Container(
      width: 1.5, // 线条宽度
      height: 50, // 线条高度，也可以设为double.infinity撑满Row高度
      color: Colors.black87,
    ),
    const Expanded(child: Text("右侧超长内容，自动换行")),
  ],
)

这种方式完全由你控制线条的尺寸、颜色，适合需要精确布局的场景。

3. 和HorizontalDivider的关联用法 #

其实HorizontalDivider和VerticalDivider是一对兄弟组件，前者专门用于水平方向的分隔，用法逻辑完全一致：

Column(
  children: [
    const Text("上方内容模块"),
    const HorizontalDivider(
      color: Colors.blueAccent,
      thickness: 2,
      height: 32, // 整个分隔组件占据的高度（上下留白）
      indent: 16, // 线条左侧的留白距离
      endIndent: 16, // 线条右侧的留白距离
    ),
    const Text("下方内容模块"),
  ],
)

两者核心区别就是布局方向：HorizontalDivider适配Column布局的水平分隔，VerticalDivider适配Row布局的垂直分隔。

4. 复杂布局的适配技巧 #

如果是在Wrap、CustomScrollView这类动态高度的布局里加垂直线，可能需要结合IntrinsicHeight让线条自适应高度：

IntrinsicHeight(
  child: Row(
    children: [
      const Text("第一个模块"),
      const VerticalDivider(),
      const Text("第二个模块"),
      const VerticalDivider(),
      const Text("第三个模块"),
    ],
  ),
)

IntrinsicHeight会让Row的高度自动匹配子组件中最高的那个，这样垂直线就能自动撑满整个布局高度了。

总结一下，官方的VerticalDivider是最省心的常规选择，自定义Container适合需要灵活样式的场景，而HorizontalDivider就是水平方向的同款工具，根据你的布局场景选就行啦！

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