> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/appendix/xcode/preview.md).

# Preview

{% tabs %}
{% tab title="code" %}

```swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .preferredColorScheme(.dark)           // dark mode
                .previewDevice("iPhone 13 Pro Max")    // preview device
                .previewDisplayName(deviceName)        // display name
            ContentView()
        }
    }
}

// available methods
.previewLayout(.sizeThatFits)          // preview layouts
.previewLayout(.fixed(width: 600, height: 600))

.previewInterfaceOrientation(.landscapeRight)    // preview orientation
.environment(\.sizeCategory, .extraExtraExtraLarge)    // accessibility

```

{% endtab %}

{% tab title="📗 參考" %}

* Design+Code ⟩ [Layout Code & Preview](https://designcode.io/swiftui-ios15-layout-code-preview)
  {% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI Tutorials ⟩ [Sec. 8: Generate Previews Dynamically](https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation#Generate-Previews-Dynamically) - Step 2
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Previews in Xcode](https://developer.apple.com/documentation/swiftui/previews-in-xcode)
  * [previewDevice(\_:)](https://developer.apple.com/documentation/swiftui/view/previewdevice\(_:\))
  * [PreviewDevice](https://developer.apple.com/documentation/swiftui/previewdevice) (<mark style="color:red;">**struct**</mark>)
    {% endtab %}
    {% endtabs %}