Flutter：如何在两个带图标的地址Widget左侧添加垂直线？

可以通过重构布局结构，将图标和垂直线放在左侧独立列，地址文本放在右侧列来实现需求，以下是两种常用方案：

方案一：固定高度垂直线 #

适合图标间距固定的场景，手动控制垂直线高度：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 左侧图标+垂直线区域
    Column(
      children: [
        Icon(Icons.location_on, color: Colors.blue),
        // 垂直线容器
        Container(
          width: 2,
          height: 35, // 调整高度匹配图标间距
          color: Colors.grey.shade400,
        ),
        Icon(Icons.home, color: Colors.blue),
      ],
    ),
    const SizedBox(width: 12), // 图标与地址的间距
    // 右侧地址文本区域
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("北京市朝阳区某某街道123号"),
        const SizedBox(height: 40), // 与垂直线高度匹配，保证对齐
        Text("上海市浦东新区某某大厦456室"),
      ],
    ),
  ],
)

方案二：自适应高度垂直线 #

用IntrinsicHeight让垂直线自动适配两个图标间的高度，更灵活：

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    IntrinsicHeight(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.location_on, color: Colors.blue),
          // 自适应高度的垂直线
          Expanded(
            child: VerticalDivider(
              color: Colors.grey.shade400,
              width: 20, // 控制图标与垂直线的间距
              thickness: 2,
            ),
          ),
          Icon(Icons.home, color: Colors.blue),
        ],
      ),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("北京市朝阳区某某街道123号"),
            const SizedBox(height: 20),
            Text("上海市浦东新区某某大厦456室"),
          ],
        ),
      ),
    ),
  ],
)

两种方案都能实现图标间垂直线的效果，可根据你的布局间距需求选择对应方式。

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