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))
    }

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

Answer 1

您可以使用带有 strokeBorder 的 RoundedRectangle，然后使用带有填充修饰符的额外 RoundedRectangle 的背景。此处详细介绍了此技术：

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 修饰符并将其替换为填充，这通常是一个更灵活的解决方案，不依赖于测量屏幕尺寸，但是这与这个答案无关紧要

Answer 2

只需替换此代码：

.background(Color.accentColor.opacity(0.1).cornerRadius(20.0))

Answer 3

在 iOS 15 中有一个 .background() 修改器剪裁成形状。

func background<S, T>(_ style: S, in shape: T, fillStyle: FillStyle = FillStyle()) -> some View where S : ShapeStyle, T : InsettableShape

试试这个：

struct ContentView: View {

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

SwiftUI添加圆角半径时如何隐藏背景色溢出？

How to hide the overflow of the background colour when adding corner radius in SwiftUI?

iphone

xcode

ios

swift

swiftui