Flutter中如何实现父容器与子容器边框重合显示？

我尝试制作两个带边框的Container，但实现后父容器与子容器的边框无法重合，出现错位情况。

我的代码 #

return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70,
          border: Border.fromBorderSide(
            BorderSide(
              color: Colors.red,
            ),
          ),
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
        child: Row(children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white70,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Colors.red,
                ),
              ),
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: Expanded(
                child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('data1'),
            )),
          )
        ]),
      ),
    ));
}

问题分析 #

1. Expanded位置错误：你把Expanded作为子Container的child，这会干扰布局计算，导致子容器尺寸异常。
2. 边框叠加与布局间距：父容器无内边距，子容器直接贴在父容器内侧，加上自身边框后，双重边框自然会出现错位；同时圆角没有适配，也会导致视觉上的不重合。

解决方案 #

方案1：保留单边框（推荐）

如果不需要双重边框，只保留父容器边框，子容器填充内部即可：

return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70,
          border: Border.fromBorderSide(BorderSide(color: Colors.red)),
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
        padding: const EdgeInsets.all(16.0),
        child: Row(children: [
          Expanded(child: Text('data1')),
        ]),
      ),
    ));
}

方案2：实现双重边框重合

如果必须保留两个容器的边框，通过负margin和统一边框宽度让它们重合：

return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70,
          border: Border.fromBorderSide(BorderSide(color: Colors.red, width: 2)),
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
        child: Row(children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white70,
                border: Border.fromBorderSide(BorderSide(color: Colors.red, width: 2)),
                borderRadius: const BorderRadius.all(Radius.circular(8)),
              ),
              margin: const EdgeInsets.all(-2), // 负margin抵消边框宽度，让边框重合
              padding: const EdgeInsets.all(16.0),
              child: Text('data1'),
            ),
          )
        ]),
      ),
    ));
}

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