Let's get started!

Knowledge points:

• Create a Label control that displays one line of text and an image to the left of the text.

var body: some View {
    VStack {
        Label {
            Text("Pause")
        } icon: {
            Image(systemName: "pause.circle")
        }
    }
}

Next:

• Next, the use of Label and List together.

• Using the Label in List, you can create a list of common options.

• We use a more straightforward way to create a Label and set the Label's text and image.

var body: some View {
    List {
        Label("Welcome to SwiftUI", systemImage: "hands.sparkles")
    }
}

Next:

• Continue to add a Label to the List.

• When there is a lot of text content, it still can perfectly align the image and the text.

var body: some View {
    List {
        Label("Welcome to SwiftUI", systemImage: "hands.sparkles")
        Label("Label is one of the most common and recognizable user interface components is the combination of an icon and a label", systemImage: "hand.thumbsup")
    }
}

Next:

• Label also has a very useful feature. The size of its text and image can intelligently match the dynamic type size of the system.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.sizeCategory, .extraExtraExtraLarge)
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn