通过ZStack禁用按钮单击

Question

弹出窗口位于下面代码中的VStack顶部。但是当显示弹出式窗口时，VStack中的按钮仍然是可点击的(即使弹出窗口正在填充整个屏幕，并且下面的按钮甚至不可见)。当弹出可见时，如何禁用VStack按钮？

//MainView
ZStack {
    if self.showPopup {
        Popup()
       .zIndex(2)
    }

    VStack {
        Spacer()
        Button(action: {
        }) {
            Text("Click")
        }  
        .zIndex(1)
    }
}
 

//Popup
GeometryReader {
    geo in
        
    ZStack {
        Rectangle()
        .fill(Color.red.opacity(1.0))
        .frame(width: geo.size.width, height: geo.size.height)
        .allowsHitTesting(false)
        .zIndex(1)
            
        Text("Content")
    }
}

Answer 1

这是因为您的.allowsHitTesting (true)修饰符:使用它，您的视图不会被触及，下面的视图将得到它。

如果您仍然希望禁用此矩形的触摸，请将contentShape添加到您的ZStack中。

GeometryReader {
    geo in
        
    ZStack {
        Rectangle()
            .fill(Color.red.opacity(1))
        .frame(width: geo.size.width, height: geo.size.height)
        .allowsHitTesting(false)
        .zIndex(1)
            
        Text("Content")
    }.contentShape(Rectangle())
}

Answer 2

当弹出窗口显示时，将其添加到单击按钮中以禁用该按钮：

.allowsHitTesting(!showPopup)

Answer 3

ZStack是透明的，您需要显式禁用按钮，比如

VStack {
    Spacer()
    Button(action: {
    }) {
        Text("Click")
    }  
    .disabled(self.showPopup)
    // .zIndex(1)             // not needed !!