@Bindingの変数を持ったViewのPreviewの実装(SwiftUI)

追記(2024-09-02)

• iOS 17.0+で@Previewableが追加されたので、今後はこちらを利用すると良さそうですね
  • Previewable()
  • What's new Xcode 16のメモ

前提

• 前提として、ボタンをクリックすると画像をPopoverを表示するようなボタンがあるとします。

import SwiftUI

struct PreviewButton: View {
    
    @Binding var popover: Bool
    let image: Image
        
    var body: some View {
        Button {
            popover = true
        } label: {
            Image(systemName: "questionmark.circle")
                .font(.system(size: 14))
        }
        .foregroundStyle(.secondary)
        .buttonStyle(.plain)
        .popover(isPresented: $popover) {
            image
                .resizable()
                .scaledToFit()
                .frame(width: 200)
        }
    }
}

• この画像のPreviewを下記のように書くと、ボタンを押しても動作しません。
• これは状態を保持するViewが無いからのこと。
  • How do I preview a View that's using @Bindable?
  • Testing SwiftUI Bindings in Xcode Previews

#Preview {
    
    @State var popover = false
    
    return HStack {
        Text("Offset when Arranged to Edge")
        PreviewButton(popover: $popover, image: Image(.Preview.edgeOffset))
    }
    .frame(width: 300, height: 300)
    .padding()
}

解決策

• 下記のようにもう一つPreview用のViewを入れ子で作成するとうまくいきます。

#Preview {
    struct PreviewView: View {
        
        @State private var popover = false
        
        var body: some View {
            HStack {
                Text("Offset when Arranged to Edge")
                PreviewButton(popover: $popover, image: Image(.Preview.edgeOffset))
            }
            .frame(width: 300, height: 300)
            .padding()
        }
    }
    
    return PreviewView()
}