SwiftUI图标和文本组件Label

在 SwiftUI 中，Label 是一个用于显示 图标和文本 的视图组件。它简化了同时展示图片和文字的操作，适合在菜单、按钮或列表中使用。

Label 的基本用法

语法：

Label("Text", systemImage: "icon_name")

示例：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Home", systemImage: "house")
            Label("Settings", systemImage: "gear")
        }
        .padding()
    }
}

效果：

显示带有图标和文字的布局。

systemImage 使用的是 SF Symbols 提供的系统图标。

使用自定义图标

除了 systemImage，也可以使用图片或视图作为图标。

示例：

Label {
    Text("Fangjunyu Image")
} icon: {
    Image("example")
        .resizable()
        .frame(width: 100, height: 100)
}

解释：

通过 Text 定义标签的文字。

通过 Image 定义自定义图标。

自定义样式

更改布局样式：

Label 的默认布局是图标和文字在水平线上排列（图标在左，文字在右）。可以通过 .labelStyle 修饰符自定义布局。

预定义样式：

.automatic：默认布局

.iconOnly：只显示图标。

.titleOnly：只显示文字。

.titleAndIcon：显示文字和图标.

示例：

VStack {
    Label("Horizontal", systemImage: "house")
        .labelStyle(.automatic)
    
    Label("Vertical", systemImage: "house")
        .labelStyle(.iconOnly)
    
    Label("Icon Only", systemImage: "house")
        .labelStyle(.titleAndIcon)
    
    Label("Title Only", systemImage: "house")
        .labelStyle(.titleOnly)
}

自定义 LabelStyle

还可以创建 LabelStyle，完全控制图标和文本的布局。

示例：

struct CustomLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
                .foregroundColor(.red)
            configuration.title
                .font(.headline)
        }
    }
}

struct ContentView: View {
    var body: some View {
        Label("Custom Style", systemImage: "star")
            .labelStyle(CustomLabelStyle())
    }
}

解释：

LabelStyle 是一个协议，必须实现 makeBody(configuration:) 方法。

configuration.icon 和 configuration.title 提供了图标和文字的默认内容。

Label 在动态视图中的使用

在动态数据中，可以使用 ForEach 配合 Label，例如在列表中展示内容：

示例：

struct ContentView: View {
    let items = ["Home", "Settings", "Profile"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Label(item, systemImage: "circle")
        }
    }
}

总结

Label 是一个功能强大且灵活的视图，适合展示图标和文字的组合。其内置的样式和自定义能力使其非常适用于 SwiftUI 项目的多种场景。