Preview in SwiftUI

· 1 min read
Preview in SwiftUI

Once you have finished the SwiftUI code, it is always a good idea to preview it before implement any function code.  Luckily, such feature is natively supported by SwiftUI - PreviewProvider:

Example of showing previews:

import SwiftUI

struct PurchaseButtonView: View {
    var title: String
    var callback: () -> Void
    
    var body: some View {
        Button(
            action: { self.callback() },
            label: {
                HStack {
                    Spacer()
                    Text(title).bold().padding()
                    Spacer()
                }
            }
        )
        .foregroundColor(.white)
        
        .background(
            //RoundedRectangle(cornerRadius: 8)
            LinearGradient(
                gradient: Gradient(colors: [Color.red, Color.blue]),
                startPoint: .leading,
                endPoint: .trailing
            )
        )
        .cornerRadius(16)
    }
}

struct PurchaseButtonView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            PurchaseButtonView(title: "Buy") {
                print("Buy button clicked")
            }.padding()
            PurchaseButtonView(title: "Sell") {
                print("Buy button clicked")
            }.padding()
        }
    }
}

The preview:

Or if you prefer, we can use the fixed size:

struct PurchaseButtonView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            PurchaseButtonView(title: "Buy") {
                print("Buy button clicked")
            }.padding()
            PurchaseButtonView(title: "Sell") {
                print("Buy button clicked")
            }.padding()
        }
        .previewLayout(.fixed(width: 350, height: 200))
    }
}

Preview: