ios - 在 SwiftUI 中添加圆角半径时如何隐藏背景颜色的溢出？

Question

我想要一个带有圆角和自定义背景颜色的视图，但后者在角落溢出，如下所示：

这是我的代码：

    var id:Int
    var body: some View {
        VStack(alignment: .leading) {
            Text(name)
                .font(.title2)
                .bold()
                .foregroundColor(.accentColor)
            Text("Index numéro " + String(id))
                .foregroundColor(.accentColor.opacity(0.75))
        }
        .padding()
        .frame(width: UIScreen.width*0.9,
               height: UIScreen.height*0.1,
               alignment: .leading)
        .overlay(RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.accentColor, lineWidth: 3))
        .background(Color.accentColor.opacity(0.1))
    }

先谢谢了，希望大家帮我解决这个问题！

标签： iosswiftiphonexcodeswiftui

Answer 1

您可以使用一个RoundedRectanglewith strokeBorder，然后使用一个附加的背景RoundedRectangle和一个填充修饰符。此处详细介绍了此技术：SwiftUI：如何绘制填充和描边形状？

var body: some View {
    VStack(alignment: .leading) {
        Text(name)
            .font(.title2)
            .bold()
            .foregroundColor(.accentColor)
        Text("Index numéro " + String(id))
            .foregroundColor(.accentColor.opacity(0.75))
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 20)
            .strokeBorder(Color.accentColor, lineWidth: 3)
            .background(
                RoundedRectangle(cornerRadius: 20).fill(Color.accentColor.opacity(0.3))
            )
    )
    .padding()
}

注意：我还更改了您的.frame修饰符并将其替换为填充，这通常是一种更灵活的解决方案，不依赖于测量屏幕尺寸，但这与此答案无关紧要