Края SwiftUI видны после использования наложения

Question

Я пытаюсь создать закругленные края в одном из моих видов, используя overlay.

.background(Color.gray.opacity(0.2))
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.gray.opacity(0.2), lineWidth: 1)
)

Проблема в том, что я все еще могу видеть края на заднем плане, а также обводку. Как обрезать края?

Answer 1

Ваш вид не будет изменяться при наложении, даже с прозрачностью, поэтому решение состоит в том, чтобы использовать форму клипа и фон, как показано ниже

struct DemoRoundRectView: View {
    var body: some View {
        Text("DEMO")
            .frame(width: 100, height: 50)
            .background(Color.gray.opacity(0.2))
            .clipShape(RoundedRectangle(cornerRadius: 10)) // clip corners
            .background(
                RoundedRectangle(cornerRadius: 10) // stroke border
                    .stroke(Color.gray.opacity(0.2), lineWidth: 1)
            )
    }
}

Answer 2

struct ContentView: View {

    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 200, height: 200, alignment: .center)
            .cornerRadius(10)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.red, lineWidth: 1)
        )
    } }

попробуйте это.

Answer 3

Кажется, что сейчас ваши модификаторы выглядят примерно так:

.cornerRadius(10)
.background(Color.gray.opacity(0.2))
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.gray.opacity(0.2), lineWidth: 1)
)

Вместо этого вам нужно изменить порядок модификаторов вида, поскольку порядок имеет значение! Вы округляете углы, затем применяете фон, тогда как вы должны применять фон, чтобы радиус угла мог затем обрезать это.

Попробуйте вместо этого:

.background(Color.gray.opacity(0.2))
.cornerRadius(10)
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.gray.opacity(0.2), lineWidth: 1)
)