带有绑定变量的 SwiftUI 预览提供程序

Question

如何为具有绑定属性的视图生成预览提供程序？

struct AddContainer: View {
    @Binding var isShowingAddContainer: Bool
    var body: some View {
        Button(action: {
                self.isShowingAddContainer = false
            }) {
                Text("Pop")
            }
    }
}

struct AddContainer_Previews: PreviewProvider {
    static var previews: some View {
        // ERROR HERE <<<-----
        AddContainer(isShowingAddContainer: Binding<Bool>()
    }
}

在上面的代码中，如何Binding<Bool>在视图的初始化程序中传递属性？

Answer 1

只需创建一个本地静态变量，将其标记为@State 并将其作为绑定传递 $

struct AddContainer_Previews: PreviewProvider {
  @State static var isShowing = false
  static var previews: some View {
    AddContainer(isShowingAddContainer: $isShowing)
  }
}

Answer 2

如果你想观看绑定：

其他两种解决方案[“static var”变体和“constant(.false)”变体仅用于查看static预览。但是您无法看到/观察按钮操作预期值的变化，因为使用此解决方案您只能获得静态预览。

如果您想真正观察（在生命预览中）这种变化，您可以轻松地在 PreviewProvider 中实现嵌套视图，以 - 比方说 - 模拟两个位置上的绑定（在一个预览中）。

import SwiftUI

struct BoolButtonView: View {
    @Binding var boolValue : Bool
    var body: some View {
        VStack {
            Text("The boolValue in BoolButtonView = \(boolValue.string)")
                .multilineTextAlignment(.center)
                .padding()
            Button("Toggle me") {
                boolValue.toggle()
            }
            .padding()
        }
    }
}

struct BoolButtonView_Previews: PreviewProvider {
    
    // we show the simulated view, not the BoolButtonView itself
    static var previews: some View {
        OtherView()
            .preferredColorScheme(.dark)
    }
    
    // nested OTHER VIEW providing the one value for binding makes the trick
    private struct OtherView : View {
        
        @State var providedValue : Bool = false
        
        var body: some View {
            BoolButtonView(boolValue: $providedValue)
        }
    }
}

Answer 3

另一种方式

    struct AddContainer_Previews: PreviewProvider {
      static var previews: some View {
        AddContainer(isShowingAddContainer: .constant(false))
      }
    }