Flutter开发疑问：如何为Stack容器实现指定底部圆角效果

下面给你两种实用的实现方式，针对Flutter中的Stack组件来做底部圆角处理：

方法一：用ClipRRect包裹Stack #

直接通过ClipRRect组件裁切Stack，只设置底部的圆角即可，代码示例：

ClipRRect(
  // 仅设置底部左右两个圆角
  borderRadius: const BorderRadius.only(
    bottomLeft: Radius.circular(16),
    bottomRight: Radius.circular(16),
  ),
  child: Stack(
    children: [
      // 这里放你的Stack子组件
      Container(
        height: 220,
        color: Colors.lightBlueAccent,
      ),
      const Positioned(
        bottom: 15,
        left: 15,
        child: Text("预期的底部圆角效果"),
        style: TextStyle(color: Colors.white, fontSize: 16),
      )
    ],
  ),
)

方法二：给Stack的父Container加装饰并开启裁剪 #

如果Stack本身嵌套在Container里，可以直接给Container设置圆角装饰，同时开启裁剪避免子组件溢出破坏圆角，代码示例：

Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(16),
      bottomRight: Radius.circular(16),
    ),
    color: Colors.lightBlueAccent,
  ),
  // 必须开启裁剪，否则Stack里超出容器的子组件会盖住圆角
  clipBehavior: Clip.hardEdge,
  child: Stack(
    children: [
      Positioned.fill(
        child: Container(color: Colors.lightBlue[200]),
      ),
      const Positioned(
        bottom: 15,
        right: 15,
        child: Text("底部圆角已生效"),
        style: TextStyle(color: Colors.white, fontSize: 16),
      )
    ],
  ),
)

注意事项 #

• 要是Stack里的子组件有超出父容器范围的情况，一定要开启裁剪（比如ClipRRect自带裁剪，或者Container设置clipBehavior），不然圆角会被溢出的内容挡住
• 圆角的数值可以根据你的UI需求调整，比如改成24、32都可以

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