swiftui阴影应用于内部元素

Question

我在VStack周围添加了阴影，其中包含两个文本字段和Submit按钮。但是，阴影也将应用于VStack内部的两个文本字段。我是否缺少某些东西导致它发生？我尝试shadow(radius: 0)在文本字段中添加内容，但没有任何改变。如果我从文本字段中删除了填充和背景，则阴影消失了。

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

Answer 1

对我来说，它还可以将阴影应用于背景而不是堆栈，例如：

VStack {
  // ...
}.background(Rectangle().fill(Color.white).shadow(radius: 8))

Answer 2

您可以clipped()在这里使用以解决此问题

       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)

输出：

希望对您有所帮助:)

Answer 3

对于正在努力为 进行这项工作的用户RoundedRectangle，请使用：

HStack {
 // Your nested views
}
.overlay(
  RoundedRectangle(cornerRadius: 10)
   .stroke(Color.black.opacity(0.2), lineWidth: 1)
)
.background(
   RoundedRectangle(
     cornerRadius: 10
   )
   .foregroundColor(Color.white)
   .shadow(
     color: Color.black,
     radius: 5,
     x: 0,
     y: 0
   )
)

阴影应用于.background,RoundedRectagle元素shadow。

虽然相当冗长，但它很容易阅读，同样的原则可以应用于任何其他形状。

Answer 4

有一个专门的修饰符- compositingGroup。

从文档：

/// Wraps this view in a compositing group.
///
/// A compositing group makes compositing effects in this view's ancestor
/// views, such as opacity and the blend mode, take effect before this view
/// is rendered.
/// [...] 
/// This limits the scope of [...] change to the outermost view.

VStack {
    Text("Text")
        .background(Color.red)
        .padding()
        .padding()
    Text("Text")
        .background(Color.purple)
        .padding()
}
.padding()
.background(Color.white)
.compositingGroup()
.shadow(color: Color.red, radius: 10, x: 0, y: 0)