onTapGesture 仅部分适用于 ZStack

Question

我构建了一个 ZStack，其中包含一个图像、一个叠加层和一个 systemImage。我想在用户点击此图像时打开 sheet，但它仅在用户单击 ZStack 最底部的特定点时才有效。有谁知道我怎样才能使这项工作？还有为什么这不起作用？我的代码：

NavigationView {
        VStack {
            VStack {
                ZStack {
                    if let image = pfimage {
                        Image (uiImage: image)
                            .resizable()
                            .frame(width: 100, height: 100)
                    } else {
                        Image ("testimage")
                            .resizable()
                            .frame(width: 100, height: 100)
                    }
                    Image(systemName: "photo")
                        .resizable()
                        .frame(width: 30, height: 25)
                        .foregroundColor(Color.white)
                    
                }
                .clipShape(Circle())
                .contentShape(Circle())
                .onTapGesture {
                    print("tap")
                    changepfsheet = true
                }
                
                Text("Displayname")
                    .padding(.top)
                    .foregroundColor(Color.white)
                    .font(.title3)
            }
            .frame(width: UIScreen.main.bounds.width, height: 225)
            .background(Color.red)
            
            HStack {
                Image(systemName: "person.2.circle")
                
                TextField("Enter newdisplayname", text: $newdisplayname)

            }
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(10)
            .padding(.horizontal)
            .padding(.top, 25)
                  
            Text("Change displayname")
            

            
            Spacer()
            

            HStack {

                Spacer()
                Text("Change password")
                    .foregroundColor(Color.white)
                Spacer()
                Image(systemName: "key")
                    .foregroundColor(Color.white)
            }
            .padding()
            .background(Color.red)
            .cornerRadius(15)
            .padding(.horizontal)
            .padding(.bottom, 5)
            
            HStack {
                Spacer()
                Text("Logout")
                Spacer()
            }
            .padding(.horizontal)
            .padding(.bottom, 20)
        }
        .edgesIgnoringSafeArea(.top)
        Spacer()
    }
    .navigationBarHidden(false)
    .navigationBarBackButtonHidden(false)

Answer 1

你有干扰点击手势。相反，只需在 ZStack 上轻按手势即可。现在您可以点击它的任意位置：

ZStack {
    Image(uiImage: image)
        .resizable()
        .frame(width: 100, height: 100)

    Color.black.opacity(0.5)
        .frame(width: 100, height: 100)

    Image(systemName: "photo")
        .resizable()
        .frame(width: 30, height: 25)
        .foregroundColor(.white)
}
.clipShape(Circle())
.contentShape(Circle())
.onTapGesture {
    print("tap")
    showsheet = true
}

我怀疑真正的问题是您使用了 NavigationView，并将内容 放在标题所在的 后面。这意味着您无法点击标题所在的视图，即使它是一个空标题。你应该删除 NavigationView（因为你没有使用它）或者不要忽略安全区域并使用 NavigationView 作为你应该做的。

删除 edgesIgnoringSafeArea(.top) 会使您的代码正常工作，因为内容将不再位于导航栏后面。

onTapGesture 仅部分适用于 ZStack

onTapGesture does only partially work on a ZStack

clickable

swift

swiftui

zstack