如何在 SwiftUI 中将阴影应用于内部视图? [英] How to apply shadow to interior views in SwiftUI?

问题描述

我在 VStack 周围添加了一个阴影，其中包含我的两个文本字段和一个提交按钮.但是，阴影也被应用于 VStack 内的两个文本字段.

I have added a shadow around the VStack that holds my two text fields and a submit button. However, the shadow is also being applied to the two text fields inside the VStack.

是不是我在这里遗漏了什么导致这种情况发生?我尝试在文本字段上添加 shadow(radius: 0) ，但它没有改变任何东西.如果我从文本字段中删除填充和背景，那么阴影就会消失.

Is there something I am missing here that is causing this to happen? I tried adding shadow(radius: 0) on the text fields, but it doesn't change anything. If I remove the padding and background from the text fields, then the shadow goes away.

var body: some View {
    VStack() {
        Spacer()

        VStack() {
            TextField($email, placeholder: Text("email"))
                .padding()
                .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))

            SecureField($password, placeholder: Text("password"))
                .padding()
                .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))

            Button(action: { self.login() }, label: { Text("Login").foregroundColor(Color.white) })
                .padding()
                .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))
        }
        .padding()
        .background(Color.white)
        .shadow(radius: 10)

        Spacer()
    }
    .padding()
    .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))
    .edgesIgnoringSafeArea(.all)
}

推荐答案

你可以在这里使用 clipped() 来解决这个问题

You can use clipped() here to fix this

VStack() {
    Text("Text")
        .background(Color.red)
        .padding()
        .padding()

    Text("Text")
        .background(Color.purple)
        .padding()
}
.padding()
.background(Color.white)

.clipped()
.shadow(color: Color.red, radius: 10, x: 0, y: 0)

输出:

希望对你有帮助:)

这篇关于如何在 SwiftUI 中将阴影应用于内部视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！