ZStack 中的颜色表现不正常

Question

所以我想在另一个视图上方的 ZStack 顶部放置一个颜色。我不想使用叠加层的原因是 Color 将附加一个点击手势。下面是一个最小的可重现示例。本质上，我希望 Color.secondary 被限制在与 HStack 相同的区域（没有明确设置帧大小。这是代码：

struct ContentView: View {
    var body: some View {
        ZStack {
            HStack {
                Spacer()
                Button(action: {
                    print("tapped button")
                }, label: {
                    Text("button")
                })
            }.background(Color.red)
            Color.secondary
                .onTapGesture {
                    print("clicked color")
                }
        }
    }
}

所以我希望视图只是一个白色屏幕，HStack 看起来稍微暗一点。

下面是我 UI 的照片。该视图在入职期间呈灰色，用户基本上只需点击灰色区域即可进入入职的下一步。如果我将点击手势附加到颜色视图，然后根据状态变化隐藏颜色视图，这不是问题。入职完成后，灰色区域将不存在，下面的按钮需要可交互。使用叠加层时，在加入后，我不想点击视图上的任何地方来更改应用程序状态。

https://i.stack.imgur.com/lphHg.png

Answer 1

根据你的进一步描述，我相信你把 onTapGesture(perform:) 放错了地方，在 overlay 的外面而不是里面。

在下面的代码中，onTapGesture(perform:) 只能在灰色叠加层显示时点击。然而，当它附加在 overlay 之后时，它可以在 而不是 点击按钮之类的东西时点击。

工作代码：

struct ContentView: View {
    @AppStorage("is_onboarding") var isOnboarding = true

    var body: some View {
        HStack {
            Spacer()

            Button {
                print("tapped button")
            } label: {
                Text("button")
            }
        }
        .background(Color.red)
        .overlay {
            if isOnboarding {
                Color.secondary
                    .onTapGesture {
                        print("clicked color")
                        isOnboarding = false
                    }
            }
        }
    }
}

如果 iOS 14+ 而不是 iOS 15+，请改用以下 overlay：

.overlay(
    isOnboarding ?
        Color.secondary
            .onTapGesture {
                print("clicked color")
                isOnboarding = false
            }
    : nil
)

ZStack 中的颜色表现不正常

Color in ZStack not behaving properly

xcode

colors

swift

swiftui

zstack