如何使用和自定义 SwiftUI 标签

1 如何在 SwiftUI 中添加标签？

SwiftUI 中的 Label 组件结合了标题和可选的系统图像，使其成为适用于各种 UI 元素的多功能工具。要创建标签，可以使用以下语法：

swift 复制代码

Label("Home", systemImage: "house")

第一个参数是标签的标题，可以是简单字符串，也可以是用于国际化的本地化字符串。第二个参数 systemImage 允许您从 SF Symbols 集合中添加图标到标签。

2 如何更改标签的大小

您还可以使用字体修饰符自定义标签的大小。例如，要使标签更大，可以使用标题字体：

这将增加标签标题和图标的尺寸。如果要独立于文本放大或缩小图像，可以使用图像比例修改器：

swift 复制代码

    Label("Swift", systemImage: "swift")
        .imageScale(.small)
    
    Label("Swift", systemImage: "swift")
        .imageScale(.medium)
    
    Label("Swift", systemImage: "swift")
        .imageScale(.large)

SwiftUI 标签就像文本一样，会响应动态字体大小。图标和文本可以完美地一起缩放：

SwiftUI 标签适应动态类型大小

3 如何更改 SwiftUI Label 的颜色

swift 复制代码

    Label("Add New Folder", 
          systemImage: "folder.badge.plus")
    
    Label("Add New Folder", 
          systemImage: "folder.badge.plus")
        .foregroundStyle(.accent)
    
    Label("Add New Folder", 
          systemImage: "folder.badge.plus")
        .foregroundStyle(.blue, .pink)

Swiftui 标签与前景样式改变颜色

如果要更改列表内标签的图标颜色，则应使用色调修饰符而不是前景样式：

swift 复制代码

    struct LabelListExampleView: View {
        var body: some View {
            NavigationStack {
                List {
                    Label("Folder 1", systemImage: "folder.fill")
                    Label("Folder 2", systemImage: "folder.fill")
                    Label("Folder 3", systemImage: "folder.fill")
                    Label("New Folder", systemImage: "folder.badge.plus")
                }
                .navigationTitle("Labels")
               //  .foregroundStyle(.orange)
               //  .foregroundStyle(.pink, .blue)
                .tint(.cyan)
            }
        }
    }

.tint(.cyan)会将视图的主色调修改为青色。

4 将样式应用于标签

除了基本的自定义选项外，SwiftUI 还提供了各种可应用于标签的标签样式。这些样式定义了标签的外观和行为，例如，它是仅显示标题、仅显示图标，还是两者兼而有之。

要应用标签样式，可以使用 labelStyle修饰符。例如，要创建仅包含图标的标签，可以使用：

swift 复制代码

    Label("Home", systemImage: "house")
        .labelStyle(IconOnlyLabelStyle())
        
    Label("Home", systemImage: "house")
         .labelStyle(.iconOnly)    // for iOS 14+, macOS 11+

这将显示仅带有房屋图标的标签，并删除标题。

您还可以选择始终使用标题和图标或仅使用标题：

swift 复制代码

    Label("Home", systemImage: "house")
         .labelStyle(.titleAndIcon)
         
    Label("Home", systemImage: "house")
         .labelStyle(.titleOnly)

5 通过采用 LabelStyle 协议创建自定义标签样式

您还可以通过采用 LabelStyle 协议来创建自定义标签样式。这允许您创建与您的应用设计和品牌相匹配的独特标签样式。

swift 复制代码

    extension LabelStyle where Self == SocialFeedTagLabelStyle {
        static var socialFeedTag: SocialFeedTagLabelStyle {
            SocialFeedTagLabelStyle()
        }
    }
    
    struct SocialFeedTagLabelStyle: LabelStyle {
        @ScaledMetric(relativeTo: .footnote) private var iconWidth = 14.0
        
        func makeBody(configuration: Configuration) -> some View {
            HStack {
                configuration.icon
                    .foregroundColor(.secondary)
                    .frame(width: iconWidth)
                configuration.title
            }
            .padding(6)
            .background(in: RoundedRectangle(cornerRadius: 5, style: .continuous))
            .compositingGroup()
            .shadow(radius: 1)
            .font(.caption)
        }
    }

makeBody(configuration:) 是 SwiftUI 样式协议（如 LabelStyle、ButtonStyle、ToggleStyle 等）的核心方法，它的作用是：

接收组件的配置（configuration）（比如 Label 的图标和文本）返回一个自定义的 View，决定如何渲染该组件

结构体实现了 LabelStyle 协议，定义了标签的自定义外观：

@ScaledMetric: 这是一个属性包装器，它会根据用户的字体大小设置自动调整 iconWidth 的值。relativeTo: .footnote 表示缩放是基于脚注文本大小的。 makeBody 方法: 定义了标签的布局和样式：

使用 HStack 水平排列图标和标题

configuration.icon: 标签的图标部分，设置为次要颜色，并限制宽度为 iconWidth configuration.title: 标签的文本部分

扩展LabelStyle协议，添加一个计算属性是官方推荐的方法，静态属性直接实例化这个结构体，在使用时就不用实例化，而是使用.socialFeedTag的书写方式。如果不扩展，那么就像这样使用。

swift 复制代码

Label("标签文字", systemImage: "tag")
    .labelStyle(SocialFeedTagLabelStyle())  // 显式创建样式实例

然后，您可以将此标签样式应用于任何标签。例如，我将其用于流式布局中的标签列表：

swift 复制代码

    FlowLayout(alignment: .leading) {
        ForEach(tags) { tag in
            Label(tag.title, systemImage: tag.icon)
                .labelStyle(.socialFeedTag)
        }
    }

结论

SwiftUI 中的 Label 组件是一款功能强大的工具，可用于向用户界面添加描述性信息。它能够组合标题和图标，并提供各种自定义选项，让您可以创建视觉上引人入胜且信息丰富的标签，从而提升用户体验。

本文使用「Markdown 在线编辑器 | 公众号内容排版工具」排版