Label

在 SwiftUI 中，Label 是一个常用的组件，用于显示图标（图片）和文本的组合。在设置 Label 的字体（font）和图片大小（image size）时，我们可以通过对具体的 Text 和 Image 部分分别应用修饰符来处理。

以下是针对 Label 的字体和图标大小的详细设置指导：

1. Label 的语法结构 #

一个典型的 Label 由两个部分组成：

文本部分（Text）
图片部分（Image 或 System Image）

示例: #

Label("Start", systemImage: "play.fill")

这里：

"Start" 是文本部分。
"play.fill" 是 SF Symbols 图标。

2. 设置 `Label` 的字体 (Text Font) #

为整个 Label 设置字体 #

SwiftUI 支持直接在 Label 上调用 .font() 修饰符，字体会应用到 文本部分，而不会影响图标的大小。

Label("Start", systemImage: "play.fill")
    .font(.title) // 将字体设置为大标题，并应用到文本部分

3. 自定义 `Label` 的图片和文本的大小、样式 #

如果需要单独控制文本的字体大小和图片的大小，我们需要单独调整 Label 的子视图 (Text 和 Image)。

使用 SwiftUI 的 LabelStyle 或 HStack 等显式布局，我们可以完全定制 Label 的外观。

自定义 Label 的文本和图片 #

Label {
    Text("Start")
        .font(.title)    // 自定义文本字体大小
        .foregroundColor(.blue) // 字体颜色
} icon: {
    Image(systemName: "play.fill")
        .resizable()     // 让图标可调整大小
        .scaledToFit()   // 设置为等比缩放
        .frame(width: 24, height: 24) // 设置图标大小
        .foregroundColor(.green) // 图标颜色
}

解释：

Text("Start").font(.title) 设置了文本的字体大小为标题大小。
Image(systemName: "play.fill").resizable() 将系统图标（SF Symbols）设置为可调整大小，并通过 .frame(width:height:) 控制尺寸。

4. 为 Label 设置统一的图片和文字大小 #

在 SwiftUI 中，如果你希望字体和图片的大小随着 Label 的字体设置动态调整，可以让 Label 响应 font()：

Label("Start", systemImage: "play.fill")
    .font(.largeTitle) // 文本部分会使用 largeTitle，图片部分将自动适配

在默认情况下，系统会自动调整图标的大小，使之与字体匹配。

5. 单独调整字体和图标大小但保持 `Label` 的布局 #

如果希望调整字体大小和图标大小，同时保持自动布局，可以使用 HStack 或 LabelStyle.Custom 来构建自定义 Label。

使用 `HStack` 自定义布局 #

HStack {
    Image(systemName: "star.fill")
        .resizable()
        .scaledToFit()
        .frame(width: 20, height: 20) // 设置图标大小
        .foregroundColor(.yellow)
    Text("Favorite")
        .font(.headline) // 自定义字体大小
        .foregroundColor(.purple)
}

或者使用自定义 `LabelStyle` #

对于复杂的应用，你可以创建自定义的 LabelStyle，如下实现自定义布局：

自定义 LabelStyle 实现 #

struct CustomLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.icon
                .resizable()
                .scaledToFit()
                .frame(width: 24, height: 24) // 设置图片大小
            configuration.title
                .font(.headline) // 自定义字体
                .foregroundColor(.blue)
        }
    }
}

使用自定义样式： #

Label("Home", systemImage: "house.fill")
    .labelStyle(CustomLabelStyle()) // 应用自定义 Label 样式

6. 图标（Image）的大小与缩放选项 #

如果你正在使用 Image，以下是调整大小的一些常用方法：

a. 调整大小 #

resizable(): 将图片设置为可调整大小。
frame(width:height:): 明确指定宽度和高度。

例如：

Image(systemName: "star.fill")
    .resizable()
    .frame(width: 30, height: 30) // 设置图标大小

b. 缩放选项 #

scaledToFit()：保持图片宽高比，内容会适配到给定的尺寸。
scaledToFill()：填充指定尺寸，但可能会裁剪图片。

7. 示例代码：完整Label自定义字体和图标大小 #

以下是一个完整实现，包括自定义字体和图标大小：

import SwiftUI

struct LabelExampleView: View {
    var body: some View {
        VStack(spacing: 20) {
            // 默认系统字体和图标大小
            Label("Default Style", systemImage: "star.fill")
            
            // 统一设置字体 (会自动调整图标大小)
            Label("Large Title", systemImage: "star.fill")
                .font(.largeTitle)

            // 自定义图标和字体大小
            Label {
                Text("Custom Style")
                    .font(.headline) // 文本大小
                    .foregroundColor(.blue)
            } icon: {
                Image(systemName: "heart.fill")
                    .resizable()
                    .scaledToFit() // 确保图像等比缩放
                    .frame(width: 30, height: 30) // 图标大小
                    .foregroundColor(.red)
            }

            // 使用 HStack 自定义布局
            HStack {
                Image(systemName: "pencil")
                    .resizable()
                    .frame(width: 24, height: 24)
                    .foregroundColor(.green)
                Text("HStack Custom Text")
                    .font(.title3)
                    .foregroundColor(.purple)
            }
        }
        .padding()
    }
}

struct LabelExampleView_Previews: PreviewProvider {
    static var previews: some View {
        LabelExampleView()
    }
}

8. 动态字体和图标大小适配 #

为支持动态字体大小和可访问性，可以将字体和图片大小绑定到动态类型环境中：

Label("Dynamic Font", systemImage: "scribble")
    .font(.body) // 使用动态字体（随系统变化）
    .imageScale(.large) // 图标的动态缩放尺寸（small, medium, large）

针对图标的不同动态缩放： #

.imageScale(.small) —— 小图标。
.imageScale(.medium) —— 中等大小。
.imageScale(.large) —— 大图标。

总结 #

功能	修饰符或实现方式
修改字体大小	使用 `.font()`，比如 `.font(.title)` 或 `.font(.custom("FontName", size: 20))`。
修改图标大小	使用 `.resizable()` 和 `.frame(width:height:)`，确保 `Image` 可调整大小并定义明确尺寸。
文本与图片分别定制	使用带有自定义 `Label` 的 `Text` 和 `Image` ，或者通过 `HStack` 显式布局。
响应动态字体和大小调整	使用 `.font()` 设置系统字体并结合 `.imageScale(.large)`，图片将随动态文本调整。
创建复杂布局但保留 Label 样式	创建自定义 `LabelStyle`，通过 `HStack` 或其他布局方式组合 `configuration.icon` 和 `configuration.title`。

通过以上方法，可以针对 Label 非常灵活地设置字体大小和图标大小。