SwiftUI控件之 Label

发表于 更新于 分类于 阅读次数：

在 SwiftUI 中，Label 用来展示一个文本和图标（icon）。

使用

使用Assets 中的图片作为Label 的图标：

1
Label("avatar", image: "avatar")

使用SF Symbols 中的图标作为Label 的图标：

1
Label("apple", systemImage: "apple.logo")

设置不同的Label样式

可以使用labelStyle 修饰器来定义 Label 的样式：

  • iconOnly : 只显示图标；
  • titleAndIcon: 显示文字和图标，默认样式；
  • titleOnly ： 只显示文字；
  • automatic：自动。
1
2
Label("apple", systemImage: "apple.logo")
   .labelStyle(.automatic)

使用一个 View作为 Label 的图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Label {
    Text("Felix")
        .font(.body)
        .foregroundStyle(.primary)
    Text("Zhao")
        .font(.subheadline)
        .foregroundStyle(.secondary)
    
} icon: {
    Circle()
        .fill(.red)
        .frame(width: 44, height: 44)
        .overlay(Text("F"))
}

在上面的Label 中，我们使用两个不同样式的Text 作为Label 要显示的文字内容；使用一个Circle 作为Label的自定义图标视图。

效果如下：