top of page
Writer's pictureHui Wang

22. SwiftUI: Use Label to display the combination of Image, SF symbol, and Text


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:

コメント


bottom of page