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:
コメント