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

时间:2020-02-07 00:12:01

标签: swift binding swiftui

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

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>属性?

3 个答案:

答案 0 :(得分:23)

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

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

答案 1 :(得分:7)

其他方式

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

答案 2 :(得分:1)

如果您想观看绑定:

以上两种解决方案[“静态变量”变体和“常量(.false)”变体都适用于仅查看静态的预览。但是您无法看到/观看按钮操作预期值的变化,因为使用此解决方案您只能获得静态预览

如果您想真正观看(在生活预览中)这种变化,您可以轻松地在 PreviewProvider 中实现一个嵌套视图,以 - 假设 - 模拟 两个< /em> 个地方(在 one 预览中)。

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
    struct OtherView : View {
        
        @State var providedValue : Bool = false
        
        var body: some View {
            BoolButtonView(boolValue: $providedValue)
        }
    }
}