SwiftUI official tutorials (eight)

8. dynamically generated preview

Next, we'll  LandmarkList_Previews add code to render the list on a different device sizes. By default, the preview of the current  scheme rendering size of the device. We can call  previewDevice(_:) to change the preview device method. SwiftUI official tutorial

8.1 First, change the current  list preview to show the size of the iPhone SE.

We can enter any Xcode  scheme device name displayed in the menus.

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 preview with the device name of the array as the data, the  LandmarkList embedded  ForEach instance. SwiftUI Tutorial

ForEach In the  list same manner as the collection operation, so that we can use it in any place using the sub-view, for example  stacks ,  lists , groups and the like. When the image data element string as used herein is a simple value type, we can use  \.self as an identifier  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(_:) Method of the device names as  labels added to the preview. SwiftUI Tutorial

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 We may  canvas experience different devices, they render contrast  view differences when.