如何在 SwiftUI 中将阴影应用于内部视图？

Question

我在VStack 周围添加了一个阴影，其中包含我的两个文本字段和一个提交按钮。但是，阴影也应用于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

你好，我现在只使用这个，但它的目的是 - 让我有内在的阴影。

通过一些修改，你可以拥有你想要的。

private struct InnerShadow: ViewModifier {

    func body(content: Content) -> some View {
        HStack(spacing: .zero) {
            verticalLine().offset(x: -1)
            VStack(spacing: .zero) {
                horizontalLine().offset(y: -1)
                content
                horizontalLine().offset(y: 1)
            }
            verticalLine().offset(x: 1)
        }

    }

    private func verticalLine() -> some View {
        Rectangle()
            .foregroundColor(.white)
            .frame(maxWidth: 1, maxHeight: .infinity)
            .shadow(radius: 4)

    }

    private func horizontalLine() -> some View {
        Rectangle()
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 1)
            .shadow(radius: 4)
    }

}

Answer 2

为此有一个专用修饰符 - 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)

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

您可以在此处使用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 5

对我来说，将阴影应用于背景而不是堆栈也很有效，例如：

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

Answer 6

您可以通过使用ZStack 在VStack 后面放置Rectangle、Capsule、Circle 或其他形状来解决此问题。然后将修改器应用于形状而不是 VStack 本身。

ZStack() {
    Capsule()
        .frame(width: 50, height: 50)
        .background(Color.white)
        .shadow(radius: 10)

    VStack() {
        //...
    }
}

对我来说似乎是一个非常烦人的功能，很多时候您希望在容器上添加阴影而不将其应用于所有元素。

如果有人知道更好的方法，请分享，谢谢！