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

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

您可以利用 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 中因按钮仍在视图中而导致的奇怪间距/填充，只是不可见（如果按钮位于其他视图组件之间，即） 。