如何在Flutter中实现嵌套Container的边框完全对齐重合？

问题原因 #

• 外层Container的边框本身占了5.r宽度，内部内容默认只能在扣除边框后的区域摆放，内层容器自然碰不到外层边框
• Container内部不能直接放Expanded，Expanded仅支持在Row、Column这类Flex布局容器中使用，此处属于误用可以直接删掉
• 内层容器没有设置撑满宽度，默认不会占满横向空间

解决方法 #

给内层容器加负外边距抵消外层边框的宽度，同时设置内层宽度撑满，就能让两边边框完全重合，修改后代码如下：

Container(
  height: 364.h,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    border: Border.all(
      width: 5.r,
    ),
  ),
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      width: double.infinity,
      height: 50.h,
      // 负边距抵消外层边框的占位
      margin: EdgeInsets.only(left: -5.r, right: -5.r, bottom: -5.r),
      decoration: BoxDecoration(
        // 如果不需要内层顶部圆角，可替换为仅底部圆角的写法
        // borderRadius: BorderRadius.vertical(bottom: Radius.circular(10)),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          width: 5.r,                            
        ),
      ),
    ),
  ),
)

如果需要内层顶部没有圆角，直接用注释里的borderRadius写法即可，视觉效果更连贯。

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