本文介绍了如何在 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 中将阴影应用于内部视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!