Label

This article is extracted from the chat log with AI. Please identify it with caution.

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

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

1. Label 的语法结构#

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

  1. 文本部分（Text）
  2. 图片部分（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 非常灵活地设置字体大小和图标大小。

SwiftUI 中的 LabelStyle 详解#

LabelStyle 是 SwiftUI 中用于自定义 Label 组件显示方式的协议。SwiftUI 提供了一些内置的样式选项，你也可以创建自定义样式。

内置 LabelStyle 选项#

1. .automatic (默认样式)#

  • 系统根据上下文自动决定显示方式
  • 在不同平台上可能有不同表现
  • 通常显示图标和文本
Label("收件箱", systemImage: "tray.fill")
    .labelStyle(.automatic)

2. .titleAndIcon (iOS 14+, macOS 11+)#

  • 明确要求同时显示标题和图标
  • 图标和文本并排显示
Label("收件箱", systemImage: "tray.fill")
    .labelStyle(.titleAndIcon)

3. .iconOnly (iOS 14+, macOS 11+)#

  • 只显示图标，隐藏文本
  • 适用于空间有限的场景
Label("收件箱", systemImage: "tray.fill")
    .labelStyle(.iconOnly)

4. .titleOnly (iOS 14+, macOS 11+)#

  • 只显示文本，隐藏图标
  • 当图标意义不明显或不需要时使用
Label("收件箱", systemImage: "tray.fill")
    .labelStyle(.titleOnly)

平台特定样式#

  • 专门为 watchOS 导航链接设计的样式
  • 通常显示为箭头图标和文本

自定义 LabelStyle#

你可以创建完全自定义的样式：

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(alignment: .center, spacing: 8) {
            configuration.icon
                .font(.title)
            configuration.title
                .font(.caption)
        }
    }
}

// 使用方式
Label("设置", systemImage: "gear")
    .labelStyle(VerticalLabelStyle())

组合使用示例#

VStack {
    // 默认样式
    Label("默认样式", systemImage: "star")
    
    // 只显示图标
    Label("只显示图标", systemImage: "heart")
        .labelStyle(.iconOnly)
    
    // 只显示文本
    Label("只显示文本", systemImage: "bookmark")
        .labelStyle(.titleOnly)
    
    // 自定义垂直样式
    Label("自定义样式", systemImage: "gear")
        .labelStyle(VerticalLabelStyle())
}

环境变量设置#

你可以在视图层次结构中设置全局样式：

VStack {
    Label("首页", systemImage: "house")  // 会使用.iconOnly
    Label("搜索", systemImage: "magnifyingglass")  // 会使用.iconOnly
}
.labelStyle(.iconOnly)

注意事项#

  1. 不同平台对样式的支持可能不同，特别是 watchOS 和 tvOS
  2. .iconOnly 和 .titleOnly 需要 iOS 14+/macOS 11+
  3. 在列表项中使用时，系统可能会自动调整样式
  4. 自定义样式可以完全控制图标和文本的布局和外观

通过这些样式选项，你可以灵活地控制 Label 在各种界面中的显示方式。

本文共 2387 字，创建于 Jan 12, 2025

相关标签： SwiftUI, Xcode, ByAI

Backward DisclosureGroup contextMenu Forward