SwiftUI — indicator

在 SwiftUI 中，“Indicator” 是一个常见的概念，用于表示加载状态、进度、导航位置或调节操作的视觉反馈等。不同类型的 Indicator 用于提升用户体验，以下是 SwiftUI 中常见的 Indicator 概念及核心用法。

1. ActivityIndicator （加载指示器，常用于等待状态） #

概念：

  • ActivityIndicator 是用来表示操作正在进行（如网络请求或任务执行）的视图。
  • 在 SwiftUI 中，对应的控件为 ProgressView，能够以环形转圈的样式提供加载反馈。

示例代码 #

import SwiftUI

struct ActivityIndicatorView: View {
    var body: some View {
        ProgressView() // 默认为 Indeterminate 模式
            .progressViewStyle(CircularProgressViewStyle())
            .scaleEffect(1.5) // 调整大小
            .tint(.blue) // 设置主颜色
    }
}

常用修饰符 #

  • ProgressViewStyle：
    • CircularProgressViewStyle：环形样式（默认）。
    • LinearProgressViewStyle：直线样式。
  • tint(_:)：设置指示器颜色（iOS 15+) 支持。

2. Progress Indicator （进度条） #

概念：

  • 显示任务的执行进度，表示从 0.0 到 1.0 的进度。
  • SwiftUI 中的 ProgressView(value:total:) 可以显示具体的进度百分比。

示例代码 #

import SwiftUI

struct ProgressIndicatorView: View {
    @State private var downloadProgress = 0.5 // 示例进度值

    var body: some View {
        VStack {
            ProgressView(value: downloadProgress, total: 1.0) { // 显示进度
                Text("Downloading…") // 可选：自定义标签
            } currentValueLabel: {
                Text("\(Int(downloadProgress * 100))%") // 自定义当前位置文本
            }
            .progressViewStyle(LinearProgressViewStyle()) // 设置直线进度条样式
            .padding()
            
            Button("Simulate Download Progress") {
                downloadProgress += 0.1 // 模拟进度变化
            }
        }
    }
}

常用修饰符 #

  • .progressViewStyle(LinearProgressViewStyle())：直线式进度条（默认）。
  • .progressViewStyle(CircularProgressViewStyle())：环形进度，适合作为简洁型视觉反馈。
  • 可动态绑定 value 和 total 来表示任务的完成度。

3. Page Indicator （页面指示器/分页位置） #

概念：

  • 用于表示用户当前所在分页的位置，比如类似于图片轮播或分页视图。
  • 支持通过第三方库（如 TabView）的 PageTabViewStyle 实现。

示例代码 #

import SwiftUI

struct PageIndicatorView: View {
    var body: some View {
        TabView {
            Text("Page 1")
                .font(.largeTitle)
                .foregroundColor(.red)
                .tag(0)
            
            Text("Page 2")
                .font(.largeTitle)
                .foregroundColor(.blue)
                .tag(1)
            
            Text("Page 3")
                .font(.largeTitle)
                .foregroundColor(.green)
                .tag(2)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always)) // 添加分页指示器
    }
}

配置选项 #

  • .indexDisplayMode：
    • .always：始终显示页面指示器。
    • .automatic：根据上下文触发自动显示。
    • .never：永久隐藏页面指示器。

4. Slider Indicator（滑块/刻度指示器） #

概念：

  • Slider 是一个滑动条指示器，显示一个值或为用户提供调节操作（如进度、音量控制等）。
  • SwiftUI 中直接使用 Slider 控件。

示例代码 #

import SwiftUI

struct SliderIndicatorView: View {
    @State private var sliderValue: Double = 50

    var body: some View {
        VStack {
            Slider(value: $sliderValue, in: 0...100, step: 1) // 滑块范围 0 ~ 100
                .accentColor(.blue) // 设置滑块颜色
                .padding()
            
            Text("Current Value: \(Int(sliderValue))") // 显示当前值
                .font(.headline)
        }
        .padding()
    }
}

配置选项 #

  • 设置滑块范围（in: 0...100）。
  • 调整步进值（step: 1）。
  • 使用 accentColor 修改滑块颜色。

5. Scroll Indicator （滚动条指示器） #

概念：

  • 隐式滚动条，用于反映 ScrollView 的可滚动内容和用户当前位置。
  • 滚动指示器默认会在适当时自动显示，也支持手动控制可见性。

示例代码 #

import SwiftUI

struct ScrollIndicatorView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<50) { index in
                    Text("Item \(index)")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(10)
                }
            }
        }
        .scrollIndicators(.automatic) // 自动显示滚动条指示器
    }
}

配置选项 #

  • 使用 .scrollIndicators 修饰符可控制滚动条显示：
    • .automatic（默认）：在用户滚动时自动显示。
    • .visible：总是显示滚动条。
    • .hidden：隐藏滚动条。

6. Drag Indicator （拖动指示器） #

概念：

  • 拖动指示器是一种 SFSymbol 样式的顶部 Capsule，通常用于可拖动的 sheet，帮助用户识别交互区域。
  • 在 iOS 16 中，presentationDragIndicator 控制系统弹窗顶部指示器的可见性。

示例代码： #

.sheet(isPresented: $showSheet) {
    Text("Draggable Content")
        .presentationDetents([.medium, .large])
        .presentationDragIndicator(.visible) // 显示顶部拖动指示器
}

配置选项 #

  • .visible：显示拖动指示器（默认）。
  • .hidden：隐藏指示器。

7. Stepper Indicator （步进指示器） #

概念：

  • Stepper 是一个小型 UI 控件，允许用户单步调整数值，通常用于递增或递减选择值。
  • 它是数字或可调整值的人性化探索方式。

示例代码 #

import SwiftUI

struct StepperIndicatorView: View {
    @State private var value = 0

    var body: some View {
        Stepper("Value: \(value)", value: $value, in: 0...10)
            .padding()
    }
}

功能配置 #

  • value: $variableName 绑定当前数值。
  • in: 0...10 定义调整范围。

总结：主要 Indicator 类型 #

Indicator 类型控件名称或实现方式用途
Activity IndicatorProgressView()（环形）表示加载状态。
Progress IndicatorProgressView(value:total:)显示任务进度条。
Page IndicatorTabView().tabViewStyle(PageTabViewStyle())表示分页位置或轮播的当前页面。
Slider IndicatorSlider(value:in:step:)提供滑动调整数值的交互控件。
Scroll IndicatorScrollView().scrollIndicators(.visible)用于滚动可视区域的当前进度反映。
Drag IndicatorpresentationDragIndicator(.visible) (在 sheet 中)指示 sheet 的拖动区域。
Stepper IndicatorStepper("Title", value:in:)用于递增或递减一个值的交互控件。

这些 Indicator 可以很好地结合使用，提升用户交互和视觉反馈体验！

本文共 1704 字，上次修改于 Jan 20, 2025