SwiftUI Label

基础用法

最常见和可识别的用户界面组件之一是图标和标签的组合。 这个习语出现在多种应用程序中，并出现在集合、列表、操作项菜单和可公开列表中，仅举几例。

您可以通过提供图像的标题和名称（例如 SF Symbols 集合中的图标）以最简单的形式创建标签：

Label("Lightning", systemImage: "bolt.fill")

标签样式

纯文字标签

您还可以通过多种方式将样式应用于标签。 如果在设备旋转或更改为窗口大小后对视图进行动态更改，您可能希望使用 titleOnly 标签样式仅显示标签的文本部分：

Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(.titleOnly)

纯图标签

相反，还有一个纯图标标签样式：

Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(.iconOnly)

文字+图片

某些容器可能会应用不同的默认标签样式，例如仅在 macOS 和 iOS 的工具栏中显示图标。 要选择同时显示标题和图标，您可以应用 titleAndIcon 标签样式：

Label("Lightning", systemImage: "bolt.fill")
    .labelStyle(.titleAndIcon)

自定义样式

您还可以通过修改现有样式来创建自定义标签样式； 此示例为默认标签样式添加红色边框：

struct RedBorderedLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .border(Color.red)
    }
}

要进行更广泛的自定义或创建全新的标签样式，您需要采用 LabelStyle 协议并为新样式实现 LabelStyleConfiguration。

要将通用标签样式应用于一组标签，请将样式应用于包含标签的视图层次结构：

VStack {
    Label("Rain", systemImage: "cloud.rain")
    Label("Snow", systemImage: "snow")
    Label("Sun", systemImage: "sun.max")
}
.labelStyle(.iconOnly)

也可以使用视图来制作标签，以编程方式组成标签的图标，而不是使用预制图像。 在这个例子中，标签的图标部分使用了一个填充了用户姓名首字母的圆圈：

Label {
    Text(person.fullName)
        .font(.body)
        .foregroundColor(.primary)
    Text(person.title)
        .font(.subheadline)
        .foregroundColor(.secondary)
} icon: {
    Circle()
        .fill(person.profileColor)
        .frame(width: 44, height: 44, alignment: .center)
        .overlay(Text(person.initials))
}