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

h79rfbju  于 2023-01-08  发布在  Swift
关注(0)|答案(3)|浏览(147)

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

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

n9vozmp4

n9vozmp41#

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

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

n7taea2i2#

其他方式

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

f2uvfpb93#

如果要 * 监视 * 绑定:

其他两种解决方案[“static var”变体和“constant(.false)"变体]都只适用于查看 static 的预览。但是您无法查看按钮操作所需的值的变化,因为使用此解决方案只能获得 static preview
如果您想真正观察(在生活预览中)这种变化,您可以轻松地在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
    struct OtherView : View {
        
        @State var providedValue : Bool = false
        
        var body: some View {
            BoolButtonView(boolValue: $providedValue)
        }
    }
}

相关问题