SwiftUI中ContainerRelativeShape使用问题：蓝色视图圆角不一致

从你提供的代码和截图来看，中间的蓝色视图没有圆角，核心原因是ContainerRelativeShape的工作机制：它会匹配当前视图所在的最近容器上下文的形状。

你的三个蓝色视图都嵌套在VStack中，只有最外层的黄色ZStack使用了ContainerRelativeShape做填充。第一个和第三个蓝色视图刚好贴合外层黄色ZStack的上下边缘，它们的容器上下文能“继承”到外层的圆角；但中间的蓝色视图被上下两个HStack包裹，它的直接容器是VStack的中间区域——而VStack本身没有被裁剪成圆角形状，所以ContainerRelativeShape无法生成圆角效果。

方案一：用clipShape让VStack继承外层容器形状 #

给VStack添加clipShape(ContainerRelativeShape())，让VStack的形状和外层黄色ZStack保持一致，这样内部所有蓝色视图的ContainerRelativeShape都会匹配这个圆角：

struct testwidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        HStack {
            ZStack {
                ContainerRelativeShape()
                    .fill(.yellow)
                VStack {
                    HStack {
                        Spacer(minLength: 100)
                        ContainerRelativeShape()
                            .fill(.blue)
                    }
                    HStack {
                        Spacer(minLength: 100)
                        ContainerRelativeShape()
                            .fill(.blue)
                    }
                    HStack {
                        Spacer(minLength: 100)
                        ContainerRelativeShape()
                            .fill(.blue)
                    }
                }
                // 关键：让VStack裁剪为外层容器的形状
                .clipShape(ContainerRelativeShape())
            }
            ZStack {
                ContainerRelativeShape()
                    .fill(.yellow)
            }
        }
    }
}

方案二：直接读取Widget环境圆角值 #

Widget中系统会通过环境变量widgetCornerRadius提供当前的圆角大小，你可以直接读取这个值给蓝色视图设置圆角，这种方式更直观：

struct testwidgetEntryView : View {
    var entry: Provider.Entry
    // 读取环境中的Widget圆角参数
    @Environment(\.widgetCornerRadius) private var cornerRadius

    var body: some View {
        HStack {
            ZStack {
                ContainerRelativeShape()
                    .fill(.yellow)
                VStack {
                    HStack {
                        Spacer(minLength: 100)
                        RoundedRectangle(cornerRadius: cornerRadius)
                            .fill(.blue)
                    }
                    HStack {
                        Spacer(minLength: 100)
                        RoundedRectangle(cornerRadius: cornerRadius)
                            .fill(.blue)
                    }
                    HStack {
                        Spacer(minLength: 100)
                        RoundedRectangle(cornerRadius: cornerRadius)
                            .fill(.blue)
                    }
                }
            }
            ZStack {
                ContainerRelativeShape()
                    .fill(.yellow)
            }
        }
    }
}

推荐优先使用方案一，它能完美适配系统Widget的各种形状变化（比如非标准圆角的特殊Widget），而方案二更适合只需要固定圆角的场景。

内容的提问来源于stack exchange，提问作者李泽新