Question

如何切换按钮的隐藏状态？
我们具有无条件的.hidden（）属性；但我需要有条件的版本。

注意：我们确实提供了 .disabled（bool）属性，但没有 .hidden（bool）。

struct ContentView: View {
    var body: some View {
        ZStack {
            Color("SkyBlue")
            VStack {
                Button("Detect") {
                    self.imageDetectionVM.detect(self.selectedImage)
                }
                .padding()
                .background(Color.orange)
                .foreggroundColor(Color.white)
                .cornerRadius(10)
                .hidden() // ...I want this to be toggled.
            }
        }
    }
}

Answer 1

我希望hidden修饰符能在以后获取参数，但是从那以后，改用alpha设置：

@State var shouldHide = false

var body: some View {
    Button("Button") { self.shouldHide = true }
    .opacity(shouldHide ? 0 : 1)
}

Answer 2

对我来说，当您不希望看到frame的高度时，将其设置为零非常好。如果要获得计算出的大小，只需将其设置为nil：

SomeView
    .frame(height: isVisible ? nil : 0)

如果除了隐藏之外还想禁用它，则可以将.disabled设置为布尔值。

SomeView
    .frame(height: isVisible ? nil : 0)
    .disabled(!isVisible)

Answer 3

此处的所有答案专门用于有条件地隐藏按钮。

我认为可能有帮助的是有条件地自己制作修饰符，例如： .hidden表示按钮/视图，或者.italic表示文本等。

使用扩展程序。

要使文本变为有条件的斜体，很容易，因为.italic修饰符返回Text：

extension Text {
    func italicConditionally(isItalic: Bool) -> Text {
        isItalic ? self.italic() : self
    }
}

然后像这样使用条件斜体：

@State private var toggle = false
Text("My Text")
    .italicConditionally(isItalic: toggle)

但是对于Button来说，这很棘手，因为.hidden修饰符返回“某些视图”：

extension View {
    func hiddenConditionally(isHidden: Bool) -> some View {
        isHidden ? AnyView(self.hidden()) : AnyView(self)
    }
}

然后应用条件隐藏，如下所示：

@State private var toggle = false
Button("myButton", action: myAction)
    .hiddenConditionally(isHidden: toggle)

Answer 4

这并不总是一个很好的解决方案，但是在某些情况下，有条件地添加它也可能会起作用：

if shouldShowMyButton {
    Button(action: {
        self.imageDetectionVM.detect(self.selectedImage)
    }) {
        Text("Button")
    }          
}

在不显示空白的情况下会出现空白，这可能是一个问题，具体取决于特定的布局。可以通过添加else语句来解决此问题，该语句还可以添加大小相等的空白。

Answer 5

您可以利用SwiftUI的新双向绑定并将if语句添加为：

struct ContentView: View {

    @State var shouldHide = false

    var body: some View {
        ZStack {
            Color("SkyBlue")
            VStack {
                if !self.$shouldHide.wrappedValue { 
                    Button("Detect") {
                        self.imageDetectionVM.detect(self.selectedImage)
                    }
                    .padding()
                    .background(Color.orange)
                    .foregroundColor(Color.white)
                    .cornerRadius(10)
                }
            }
        }
    }
}

与将不透明度设置为0相比，这样做的好处是，它将消除UI中由于按钮仍在视图中而导致的怪异间距/填充，只是不可见（如果按钮位于其他视图组件之间，就是这样。

Answer 6

您可以使用条件语句在 SwiftUI 中轻松隐藏视图。

struct TestView: View{
    
    @State private var isVisible = false
    
    var body: some View{
        
        if !isVisible {
            HStack{
                Button(action: {
                    isVisible.toggle()
                    // after click you'r view will be hidden
                }){
                    Text("any view")
                }
            }
        }
        
    }
}

如何使按钮有条件地隐藏或禁用？

6 个答案: