Flutter中外层Container边框未被遮挡问题求助

要实现文本容器覆盖外层Container边框的效果，可通过以下两种方式调整代码：

方案一：负margin覆盖边框 #

给内层文本容器添加负水平margin，让容器向外延伸抵消外层边框宽度，从而覆盖对应区域的边框：

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: const Color(0xFFEDEDED),
    ),
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        offset: const Offset(0, 4),
        blurRadius: 8,
        color: const Color(0xff000000).withOpacity(0.25),
      )
    ],
  ),
  child: Column(
    children: [
      // 图片区域
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Image.asset(
          image,
          width: 96,
          height: 96,
        ),
      ),
      // 文本容器
      Container(
        height: 40,
        clipBehavior: Clip.antiAlias,
        padding: const EdgeInsets.symmetric(horizontal: 4),
        width: double.infinity,
        // 负margin抵消外层边框宽度，实现覆盖
        margin: const EdgeInsets.symmetric(horizontal: -1),
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(8),
            bottomRight: Radius.circular(8),
          ),
        ),
        child: Center(
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w500,
                color: Colors.white),
          ),
        ),
      )
    ],
  ),
);

原理 #

外层Border.all()默认边框宽度为1，内层容器设置horizontal: -1的margin，让左右各向外延伸1像素，刚好覆盖外层左右边框的底部部分，配合背景色完全遮挡外层底部边框。

方案二：外层仅保留部分边框 #

直接修改外层Container的边框设置，只保留上、左、右三条边框，底部由内层容器完全填充：

Container(
  decoration: BoxDecoration(
    // 只设置上、左、右边框
    border: const Border(
      top: BorderSide(color: Color(0xFFEDEDED)),
      left: BorderSide(color: Color(0xFFEDEDED)),
      right: BorderSide(color: Color(0xFFEDEDED)),
    ),
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        offset: const Offset(0, 4),
        blurRadius: 8,
        color: const Color(0xff000000).withOpacity(0.25),
      )
    ],
  ),
  child: Column(
    children: [
      // 图片区域
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Image.asset(
          image,
          width: 96,
          height: 96,
        ),
      ),
      // 文本容器
      Container(
        height: 40,
        clipBehavior: Clip.antiAlias,
        padding: const EdgeInsets.symmetric(horizontal: 4),
        width: double.infinity,
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(8),
            bottomRight: Radius.circular(8),
          ),
        ),
        child: Center(
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w500,
                color: Colors.white),
          ),
        ),
      )
    ],
  ),
);

原理 #

直接去掉外层底部边框，让内层容器的背景色和圆角直接衔接外层边框，视觉上完全替代底部区域的边框效果，避免了负margin的使用，逻辑更直观。

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