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

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

感恩您的支助!

微信扫一扫打赏