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

对于正在努力为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 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

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

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

    VStack() {
        //...
    }
}

在我看来，这是一个非常烦人的功能，很多时候，您希望在容器上放置阴影而不将其应用于所有元素。

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

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)

Answer 5

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

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

swiftui阴影应用于内部元素

5 个答案: