SwiftUIViews

View Configuration

深入探讨 SwiftUI View 的配置体系，包括外观、辅助视图、文本符号、无障碍和图表等全方位的视图修饰器。

概述

在 SwiftUI 中，视图配置是通过 View Modifiers 实现的。修饰器是 View 协议提供的方法，通过包装原视图并返回新视图来改变视图的特性。SwiftUI 使用声明式语法，在代码中声明和配置视图的同时，也定义了视图在层级结构中的位置。

视图配置涵盖多个方面：

  • 添加无障碍功能
  • 调整样式、布局和外观
  • 响应事件（如复制粘贴）
  • 有条件地呈现模态视图
  • 配置辅助视图（如工具栏）

修饰器的工作原理

修饰器通过包装视图来工作，返回的新视图替换原视图在层级结构中的位置。

struct MyView: View {
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(.red)
            .padding()
    }
}

上述代码中，foregroundColor(_:) 修饰器将文本包装在一个显示红色文本的视图中，padding() 再次包装这个结果。

修饰器的顺序很重要

修饰器的应用顺序会影响最终结果。例如：

// 边框围绕文本和内边距
Text("Hello")
    .padding(20)
    .border(Color.blue, width: 2)

// 边框仅围绕文本
Text("Hello")
    .border(Color.blue, width: 2)
    .padding(20)

第一个示例中，边框围绕文本和内边距；第二个示例中，边框仅围绕文本，内边距在边框外部。

修饰器的适用性

并非所有修饰器都适用于所有视图。例如，bold() 修饰器只能应用于支持文本样式的视图：

// 错误：Spacer 不支持 bold
Spacer()
    .bold()

// 正确：直接对 Text 应用
Text("Bold Text")
    .bold()
    .padding()

配置视图元素

SwiftUI 提供了丰富的修饰器来配置视图元素，主要分为以下几类：

外观修饰器

配置视图的前景和背景样式、控件和可见性。

颜色和图案

struct ColorExample: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Primary Foreground")
                .foregroundStyle(.primary)
            
            Text("Secondary Foreground")
                .foregroundStyle(.secondary)
            
            Text("Multiple Levels")
                .foregroundStyle(.red, .blue, .green)
            
            VStack {
                Text("Background Style")
            }
            .padding()
            .backgroundStyle(.regularMaterial)
        }
    }
}

常用修饰器：

  • foregroundStyle(_:) - 设置前景样式
  • backgroundStyle(_:) - 设置背景样式
  • allowedDynamicRange(_:) - 设置允许的动态范围

色调

struct TintExample: View {
    var body: some View {
        VStack {
            Button("Default Tint") { }
            
            Button("Custom Tint") { }
                .tint(.purple)
            
            List {
                ForEach(0..<3) { _ in
                    Text("Item")
                        .listItemTint(.green)
                }
            }
        }
    }
}

常用修饰器：

  • tint(_:) - 设置色调
  • listItemTint(_:) - 设置列表项色调
  • listRowSeparatorTint(_:edges:) - 设置列表行分隔符色调

浅色和深色外观

struct ColorSchemeExample: View {
    var body: some View {
        VStack {
            Text("Always Dark")
                .preferredColorScheme(.dark)
            
            Text("Always Light")
                .preferredColorScheme(.light)
        }
    }
}

前景元素

struct ForegroundExample: View {
    var body: some View {
        VStack {
            // 边框
            Text("Bordered")
                .padding()
                .border(Color.red, width: 2)
            
            // 叠加层
            Image(systemName: "photo")
                .font(.system(size: 60))
                .overlay(alignment: .topTrailing) {
                    Image(systemName: "heart.fill")
                        .foregroundStyle(.red)
                }
            
            // 描边
            Circle()
                .strokeBorder(.blue, lineWidth: 4)
                .frame(width: 100, height: 100)
        }
    }
}

背景元素

struct BackgroundExample: View {
    var body: some View {
        VStack(spacing: 20) {
            // 纯色背景
            Text("Colored Background")
                .padding()
                .background(.blue)
            
            // 材质背景
            Text("Material Background")
                .padding()
                .background(.regularMaterial)
            
            // 自定义背景
            Text("Custom Background")
                .padding()
                .background {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(.purple.gradient)
                }
        }
    }
}

不透明度

struct OpacityExample: View {
    var body: some View {
        VStack {
            Text("Fully Opaque")
                .opacity(1.0)
            
            Text("Half Transparent")
                .opacity(0.5)
            
            Text("Nearly Transparent")
                .opacity(0.2)
        }
    }
}

可见性

struct VisibilityExample: View {
    @State private var isHidden = false
    
    var body: some View {
        VStack {
            Text("Toggle to hide/show")
                .hidden(isHidden)
            
            Toggle("Hidden", isOn: $isHidden)
                .padding()
        }
    }
}

控件大小

struct ControlSizeExample: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Mini") { }
                .controlSize(.mini)
            
            Button("Small") { }
                .controlSize(.small)
            
            Button("Regular") { }
                .controlSize(.regular)
            
            Button("Large") { }
                .controlSize(.large)
        }
        .buttonStyle(.bordered)
    }
}

形状和投影

struct ShapeExample: View {
    var body: some View {
        VStack(spacing: 20) {
            // 圆角
            Text("Rounded")
                .padding()
                .background(.blue)
                .cornerRadius(10)
            
            // 阴影
            Text("Shadow")
                .padding()
                .background(.white)
                .shadow(color: .gray, radius: 5, x: 3, y: 3)
            
            // 剪裁
            Image(systemName: "star.fill")
                .font(.system(size: 60))
                .clipShape(Circle())
        }
    }
}

文本和符号修饰器

管理文本的渲染、选择和输入。

字体

struct FontExample: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("Large Title")
                .font(.largeTitle)
            
            Text("Title")
                .font(.title)
            
            Text("Headline")
                .font(.headline)
            
            Text("Body")
                .font(.body)
            
            Text("Custom Font")
                .font(.system(size: 24, weight: .bold, design: .rounded))
        }
    }
}

动态类型

struct DynamicTypeExample: View {
    var body: some View {
        VStack {
            Text("Limited Dynamic Type")
                .dynamicTypeSize(.medium...(.large))
            
            Text("Full Range")
                .dynamicTypeSize(.xSmall ... .xxxLarge)
        }
    }
}

文本样式

struct TextStyleExample: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Bold")
                .bold()
            
            Text("Italic")
                .italic()
            
            Text("Underline")
                .underline()
            
            Text("Strikethrough")
                .strikethrough()
            
            Text("Monospaced")
                .monospaced()
            
            Text("Weight")
                .fontWeight(.heavy)
            
            Text("Design")
                .fontDesign(.serif)
        }
    }
}

文本布局

struct TextLayoutExample: View {
    var body: some View {
        VStack(spacing: 20) {
            // 行限制
            Text("This is a very long text that will be truncated after two lines")
                .lineLimit(2)
            
            // 行距
            Text("Line 1\nLine 2\nLine 3")
                .lineSpacing(10)
            
            // 多行对齐
            Text("Left\nAligned\nText")
                .multilineTextAlignment(.leading)
            
            // 截断模式
            Text("This text will be truncated in the middle")
                .truncationMode(.middle)
                .frame(width: 150)
        }
    }
}

文本选择

struct TextSelectionExample: View {
    var body: some View {
        VStack {
            Text("Selectable Text")
                .textSelection(.enabled)
            
            Text("Non-selectable Text")
                .textSelection(.disabled)
        }
    }
}

符号外观

struct SymbolExample: View {
    var body: some View {
        VStack(spacing: 20) {
            // 渲染模式
            HStack {
                Image(systemName: "cloud.sun.fill")
                    .symbolRenderingMode(.monochrome)
                
                Image(systemName: "cloud.sun.fill")
                    .symbolRenderingMode(.multicolor)
                
                Image(systemName: "cloud.sun.fill")
                    .symbolRenderingMode(.hierarchical)
            }
            .font(.largeTitle)
            
            // 符号变体
            HStack {
                Image(systemName: "heart")
                
                Image(systemName: "heart")
                    .symbolVariant(.fill)
                
                Image(systemName: "heart")
                    .symbolVariant(.circle)
            }
            .font(.title)
        }
    }
}

无障碍修饰器

SwiftUI 自动为常见元素提供基本无障碍支持，但你可以使用修饰器增强无障碍功能。

标签和值

struct AccessibilityLabelExample: View {
    @State private var volume = 0.5
    
    var body: some View {
        VStack {
            // 自定义标签
            Image(systemName: "heart.fill")
                .accessibilityLabel("Favorite")
            
            // 自定义值
            Slider(value: $volume)
                .accessibilityLabel("Volume")
                .accessibilityValue("\(Int(volume * 100))%")
        }
    }
}

提示

struct AccessibilityHintExample: View {
    var body: some View {
        Button("Delete") { }
            .accessibilityLabel("Delete Item")
            .accessibilityHint("Removes this item from your list")
    }
}

特性

struct AccessibilityTraitsExample: View {
    var body: some View {
        VStack {
            Text("Header Text")
                .accessibilityAddTraits(.isHeader)
            
            Button("Important Action") { }
                .accessibilityAddTraits(.isButton)
            
            Text("Image Description")
                .accessibilityRemoveTrait(.isImage)
        }
    }
}

操作

struct AccessibilityActionsExample: View {
    var body: some View {
        Text("Item with custom actions")
            .accessibilityAction(named: "Mark as Favorite") {
                // 收藏操作
            }
            .accessibilityAction(named: "Share") {
                // 分享操作
            }
    }
}

排序和分组

struct AccessibilitySortExample: View {
    var body: some View {
        VStack {
            Text("Third")
                .accessibilitySortPriority(3)
            
            Text("First")
                .accessibilitySortPriority(1)
            
            Text("Second")
                .accessibilitySortPriority(2)
        }
    }
}

隐藏和忽略

struct AccessibilityHiddenExample: View {
    var body: some View {
        VStack {
            // 隐藏装饰性元素
            Image("decorative-pattern")
                .accessibilityHidden(true)
            
            // 组合多个元素
            HStack {
                Text("Name:")
                Text("John")
            }
            .accessibilityElement(children: .combine)
        }
    }
}

辅助视图修饰器

管理补充视图，如工具栏和上下文菜单。

导航标题

struct NavigationTitleExample: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Item 1")
                Text("Item 2")
            }
            .navigationTitle("My List")
            .navigationSubtitle("Subtitle")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

工具栏

struct ToolbarExample: View {
    var body: some View {
        NavigationStack {
            Text("Content")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Leading") { }
                    }
                    
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Trailing") { }
                    }
                    
                    ToolbarItem(placement: .bottomBar) {
                        Button("Bottom") { }
                    }
                }
        }
    }
}

上下文菜单

struct ContextMenuExample: View {
    var body: some View {
        Text("Long press for menu")
            .contextMenu {
                Button("Copy") { }
                Button("Delete", role: .destructive) { }
                Button("Cancel", role: .cancel) { }
            }
    }
}

徽章

struct BadgeExample: View {
    var body: some View {
        TabView {
            Text("Messages")
                .tabItem {
                    Label("Messages", systemImage: "message")
                }
                .badge(5)
            
            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }
}

帮助文本

struct HelpExample: View {
    var body: some View {
        Button("Submit") { }
            .help("Click to submit the form")
    }
}

图表视图修饰器

配置使用 Swift Charts 声明的图表。

图表样式

import Charts

struct ChartStyleExample: View {
    let data = [
        (name: "A", value: 5),
        (name: "B", value: 9),
        (name: "C", value: 7)
    ]
    
    var body: some View {
        Chart {
            ForEach(data, id: \.name) { item in
                BarMark(
                    x: .value("Name", item.name),
                    y: .value("Value", item.value)
                )
            }
        }
        .chartForegroundStyleScale([
            "A": .red,
            "B": .blue,
            "C": .green
        ])
        .chartPlotStyle { plotArea in
            plotArea.background(.gray.opacity(0.1))
        }
    }
}

图表图例

struct ChartLegendExample: View {
    let data = [
        (category: "Sales", value: 100),
        (category: "Marketing", value: 80),
    ]
    
    var body: some View {
        Chart {
            ForEach(data, id: \.category) { item in
                BarMark(
                    x: .value("Category", item.category),
                    y: .value("Value", item.value)
                )
                .foregroundStyle(by: .value("Category", item.category))
            }
        }
        .chartLegend(position: .bottom, alignment: .center)
    }
}

图表坐标轴

struct ChartAxisExample: View {
    let data = Array(0..<7).map { ($0, Double.random(in: 0...100)) }
    
    var body: some View {
        Chart {
            ForEach(data, id: \.0) { item in
                LineMark(
                    x: .value("Day", item.0),
                    y: .value("Value", item.1)
                )
            }
        }
        .chartXAxis {
            AxisMarks(values: .automatic) { value in
                AxisValueLabel()
                AxisGridLine()
            }
        }
        .chartYAxis {
            AxisMarks(position: .leading)
        }
    }
}

图表滚动

struct ChartScrollExample: View {
    @State private var scrollPosition = 0.0
    let data = Array(0..<50).map { ($0, Double.random(in: 0...100)) }
    
    var body: some View {
        Chart {
            ForEach(data, id: \.0) { item in
                BarMark(
                    x: .value("Index", item.0),
                    y: .value("Value", item.1)
                )
            }
        }
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: 10)
        .chartScrollPosition(x: $scrollPosition)
    }
}

图表选择

struct ChartSelectionExample: View {
    @State private var selectedValue: Int?
    let data = Array(0..<10).map { ($0, Double.random(in: 0...100)) }
    
    var body: some View {
        VStack {
            Chart {
                ForEach(data, id: \.0) { item in
                    BarMark(
                        x: .value("Index", item.0),
                        y: .value("Value", item.1)
                    )
                    .foregroundStyle(
                        selectedValue == item.0 ? .blue : .gray
                    )
                }
            }
            .chartXSelection(value: $selectedValue)
            
            if let selected = selectedValue {
                Text("Selected: \(selected)")
            }
        }
    }
}

创建自定义修饰器

使用 ViewModifier 协议可以创建可复用的自定义修饰器。

struct TitleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title)
            .foregroundStyle(.blue)
            .padding()
            .background(.blue.opacity(0.1))
            .cornerRadius(10)
    }
}

extension View {
    func titleStyle() -> some View {
        modifier(TitleStyle())
    }
}

// 使用
struct CustomModifierExample: View {
    var body: some View {
        Text("Custom Style")
            .titleStyle()
    }
}

条件应用修饰器

可以根据条件动态应用修饰器：

struct ConditionalModifierExample: View {
    @State private var isHighlighted = false
    
    var body: some View {
        VStack {
            // 方式 1：使用三元运算符
            Text("Conditional")
                .foregroundStyle(isHighlighted ? .red : .primary)
            
            // 方式 2：使用 if-else
            Text("Conditional")
                .if(isHighlighted) { view in
                    view.foregroundStyle(.red)
                }
            
            Toggle("Highlight", isOn: $isHighlighted)
        }
    }
}

extension View {
    @ViewBuilder
    func `if`<Transform: View>(
        _ condition: Bool,
        transform: (Self) -> Transform
    ) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

最佳实践

1. 保持修饰器顺序一致

在整个应用中保持一致的修饰器顺序，便于阅读和维护：

// 推荐顺序：内容修饰 -> 布局 -> 装饰
Text("Example")
    .font(.title)           // 内容
    .padding()              // 布局
    .background(.blue)      // 装饰
    .cornerRadius(10)       // 装饰

2. 提取复杂修饰器链

对于复杂的修饰器组合，考虑提取为自定义修饰器或扩展：

extension View {
    func cardStyle() -> some View {
        self
            .padding()
            .background(.white)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

3. 注意性能影响

某些修饰器会影响性能，特别是在列表中使用时：

// 避免在列表项中使用复杂阴影
List(items) { item in
    Text(item.name)
        .shadow(color: .black, radius: 10, x: 5, y: 5)
}

// 使用更轻量的样式
List(items) { item in
    Text(item.name)
        .background(.gray.opacity(0.1))
}

4. 合理使用环境修饰器

一些修饰器会影响所有子视图，利用这一特性避免重复：

// 在父视图设置字体
VStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
.font(.headline)  // 应用于所有子视图

// 避免重复
VStack {
    Text("Item 1").font(.headline)
    Text("Item 2").font(.headline)
    Text("Item 3").font(.headline)
}

总结

SwiftUI 的视图配置系统提供了强大而灵活的方式来定制用户界面。通过合理使用修饰器，你可以：

  • 创建美观且功能丰富的界面
  • 确保应用的无障碍性
  • 提供一致的用户体验
  • 编写可维护和可复用的代码

关键要点：

  1. 修饰器顺序很重要 - 不同的顺序会产生不同的结果
  2. 类型安全 - Swift 的类型系统确保只能应用适当的修饰器
  3. 声明式语法 - 代码结构反映视图层级
  4. 可组合性 - 修饰器可以链式调用和组合
  5. 环境传播 - 某些修饰器会自动影响子视图

掌握这些修饰器和最佳实践，将帮助你构建出色的 SwiftUI 应用。

在 GitHub 上编辑

上次更新于

Text Input and Output

SwiftUI 提供了丰富且强大的文本显示和输入组件，从基础的文本展示到复杂的富文本编辑，再到全新的 Writing Tools 支持，这篇笔记涵盖了官方文档中关于 Text input and output 的核心知识点。

View 基础

深入理解 SwiftUI View 协议及其核心概念，包括视图声明、修饰符、ViewBuilder 等关键主题。

目录

概述
修饰器的工作原理
修饰器的顺序很重要
修饰器的适用性
配置视图元素
外观修饰器
颜色和图案
色调
浅色和深色外观
前景元素
背景元素
不透明度
可见性
控件大小
形状和投影
文本和符号修饰器
字体
动态类型
文本样式
文本布局
文本选择
符号外观
无障碍修饰器
标签和值
提示
特性
操作
排序和分组
隐藏和忽略
辅助视图修饰器
导航标题
工具栏
上下文菜单
徽章
帮助文本
图表视图修饰器
图表样式
图表图例
图表坐标轴
图表滚动
图表选择
创建自定义修饰器
条件应用修饰器
最佳实践
1. 保持修饰器顺序一致
2. 提取复杂修饰器链
3. 注意性能影响
4. 合理使用环境修饰器
总结