如何为嵌套Stack组件的Container设置BorderRadius？

你的问题核心是外层Container未开启裁剪行为，内部的Image和半透明遮罩容器会超出圆角范围，导致圆角效果无法正常显示。以下是两种直接可行的修复方案：

方案一：给外层Container添加裁剪属性 #

直接在外层Container中设置clipBehavior: Clip.hardEdge，让容器自动裁剪掉超出圆角的内容，这是最简洁的解决方式：

Container(
  height: 250,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
  ),
  // 开启裁剪，让内部内容适配圆角
  clipBehavior: Clip.hardEdge,
  child: Stack(
    children: [
      Positioned.fill(
        child: Image.asset(
          'assets/images/background.png',
          fit: BoxFit.cover,
        ),
      ),
      Positioned.fill(
        child: Container(
          // 无需重复设置borderRadius，外层裁剪已生效
          color: Colors.black.withOpacity(0.35),
        ),
      ),
      Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          child: const Text(
            'Scrollable Component at the Top',
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
        ),
      ),
    ],
  ),
)

方案二：用ClipRRect包裹整个Stack #

如果不想修改外层Container的属性，也可以直接用ClipRRect包裹整个Stack组件，实现全局裁剪：

ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: Container(
    height: 250,
    child: Stack(
      children: [
        Positioned.fill(
          child: Image.asset(
            'assets/images/background.png',
            fit: BoxFit.cover,
          ),
        ),
        Positioned.fill(
          child: Container(
            color: Colors.black.withOpacity(0.35),
          ),
        ),
        Center(
          child: Container(
            padding: const EdgeInsets.all(20),
            child: const Text(
              'Scrollable Component at the Top',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    ),
  ),
)

关键说明 #

你之前添加的ClipRRect仅包裹了文本容器，完全无法覆盖背景图和遮罩的裁剪需求，所以圆角效果不生效。必须确保裁剪范围覆盖所有可能超出圆角的子组件（即整个Stack）。

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