Flutter实现带垂直边框的相邻容器问题求助

你需要实现两个带垂直分隔边框的相邻容器效果，但现有代码无法显示中间的垂直分隔线，实际效果与预期不符。

原代码：

Container(
    padding: const EdgeInsets.only(top: 14, bottom: 14),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Center(
            child: Container(
              child: Text('Remove'),
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: Container(
              child: Text('Edit'),
            ),
          ),
        ),
      ],
    ),
)

解决方案 #

方法一：给左侧容器添加右侧边框

直接为第一个Expanded内部的容器设置右侧边框，实现两个区域的垂直分隔：

Container(
  padding: const EdgeInsets.only(top: 14, bottom: 14),
  child: Row(
    children: [
      Expanded(
        child: Center(
          child: Container(
            decoration: const BoxDecoration(
              border: Border(
                right: BorderSide(color: Colors.grey, width: 1), // 定义右侧边框样式
              ),
            ),
            child: const Text('Remove'),
          ),
        ),
      ),
      Expanded(
        child: Center(
          child: Container(
            child: const Text('Edit'),
          ),
        ),
      ),
    ],
  ),
)

方法二：使用VerticalDivider组件

在两个Expanded之间插入Flutter原生的VerticalDivider组件，用法简洁直观：

Container(
  padding: const EdgeInsets.only(top: 14, bottom: 14),
  child: Row(
    children: [
      Expanded(
        child: Center(child: const Text('Remove')),
      ),
      const VerticalDivider(
        color: Colors.grey,
        width: 1,
        thickness: 1,
      ),
      Expanded(
        child: Center(child: const Text('Edit')),
      ),
    ],
  ),
)

原代码问题说明 #

原代码仅通过Expanded将Row的空间平均分配给两个子组件，但未添加任何边框或分隔线的逻辑，因此中间不会显示垂直分隔。上述两种方法都能快速实现预期的带分隔线的容器效果。

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