SwiftUI 官方教程（八）

8. 動態生成預覽

接下來，咱們會在 LandmarkList_Previews 中添加代碼以在不一樣的設備尺寸上渲染列表。默認狀況下，預覽會以當前的 scheme 中設備的大小進行渲染。咱們能夠經過調用 previewDevice(_:) 方法來改變預覽設備。SwiftUI官方教程

8.1 首先，改變當前 list 的預覽來顯示 iPhone SE 的尺寸。

咱們能夠輸入任何 Xcode scheme 菜單中顯示的設備名稱。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE"))
    }
}

8.2 在 list 預覽中用設備名稱數組做爲數據，將 LandmarkList 嵌入到 ForEach 實例中。SwiftUI教程

ForEach 以與 list 相同的方式對集合進行操做，這樣咱們就能夠在任何能夠使用子視圖的地方使用它，好比 stacks ， lists ，groups 等。當數據元素像這裏使用的字符串同樣是簡單的值類型時，咱們能夠使用 \.self 做爲標識符的 key path 。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
        }
    }
}

8.3 使用 previewDisplayName(_:) 方法把設備名稱做爲 labels 添加到預覽中。SwiftUI教程

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"].identified(by: \.self)) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
        }
    }
}

8.4 咱們能夠在 canvas 中體驗不一樣的設備，對比它們在渲染 view 時的差別。