SwiftUI显示图文并排的 Label

在开发IOS App时，我们经常看到图片在左，文字在右的设计。这样的设计，可以简单的通过HStack来实现。

HStack {
Image(systemName: “books.vertical.fill”)
Text(“books”)
}

不过在SwiftUI2，有更简单的做法了。SwiftUI提供了专门显示图文并排的Label组件。

显示图文并排的 Label，搭配 SF Symbols

Label(“books”, systemImage: “books.vertical.fill”)

修改 Label 的图片颜色

Label(“books”, systemImage: “books.vertical.fill”)
.foregroundColor(.red)

显示图文并排的 Label，搭配自定义的 image

Label(“peter”, image: “peter”)

List里自动对齐的Label

当List的内容以Label呈现时，它还多了自动对齐的好处。

例如以HStack呈现图文时，由于图片大小不一致，所以文字的左边将无法对齐。

List {
HStack {
Image(systemName: “arrow.up”)
Text(“arrow”)
}
HStack {
Image(systemName: “books.vertical.fill”)
Text(“books”)
}

}

而同样的内容，如果以Label实现时，不费吹灰之力，文字就能完美对齐。

List {
Label(“arrow”, systemImage: “arrow.up”)
Label(“books”, systemImage: “books.vertical.fill”)

}

调整List里所有图片的颜色。

List {
Label(“arrow”, systemImage: “arrow.up”)
Label(“books”, systemImage: “books.vertical.fill”)
}
.accentColor(.red)

调整图片的颜色

List {
Label(“arrow”, systemImage: “arrow.up”)
.listItemTint(.green)
Label(“books”, systemImage: “books.vertical.fill”)
.listItemTint(.purple)
}

以上就是SwiftUI中Label组件的基本使用了。

转载需保留链接来源：软件玩家 » SwiftUI显示图文并排的 Label