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 时的差别。