View — Stepper

在 SwiftUI 中，Stepper 是一个内置的用户界面组件，通常用于实现加减计数器功能。它带有两个加减按钮，并在用户点击按钮时触发值的变化。该组件在许多场景中非常有用，比如数量选择、参数调整以及简单的用户输入场景。

以下是对 Stepper 的详细介绍，以及如何利用它创建灵活的交互界面。

1. Stepper 的基本使用 #

代码示例 #

import SwiftUI

struct StepperExample: View {
    @State private var count = 0 // 用于存储计数值

    var body: some View {
        VStack {
            Text("当前值: \(count)") // 显示计数值
                .font(.headline)
            
            Stepper("增加或减少", value: $count) // 与 `@State` 绑定
                .padding()
        }
    }
}

关键点 #

  1. 绑定状态变量 @State: 使用 @State 属性包装一个变量（如 count），Stepper 会直接与此变量绑定。用户每次点击加号或减号时，SwiftUI 会自动更新该状态变量的值。
  2. value 参数: 传入的是绑定值（如 $count），Stepper 会动态更新这个绑定的值。

2. 设置增量范围和步长 #

可以通过 Stepper 的构造方法指定允许的数值范围和每次增减的步长。

代码示例：限制范围和步长 #

import SwiftUI

struct StepperRangeExample: View {
    @State private var count = 1

    var body: some View {
        VStack {
            Text("当前值: \(count)")
                .font(.headline)

            Stepper(value: $count, in: 0...10, step: 2) {
                Text("范围: \(0) 到 \(10)（步长为 2）")
            }
            .padding()
        }
    }
}

关键点 #

  • in 参数 : 用来限制 Stepper 的取值范围（如 0...10）。
  • step 参数 : 每次点击加号或减号的增量（如 2）。

3. 自定义 Stepper 的标签样式 #

Stepper 可以附带自定义的标签（Label），例如动态显示当前的值。

代码示例 #

import SwiftUI

struct CustomLabelStepper: View {
    @State private var temperature = 20

    var body: some View {
        Stepper {
            Text("温度: \(temperature)°C") // 动态标签
        } onIncrement: {
            temperature += 1 // 自定义加法逻辑
        } onDecrement: {
            temperature -= 1 // 自定义减法逻辑
        }
        .padding()
    }
}

关键点 #

  • onIncrement 和 onDecrement: 使用这些闭包，你可以完全控制数值的变化逻辑，比如在增加或减少前对变量进行额外验证。
  • 动态标签： 使用 SwiftUI 的 Text 动态构造标签，可以根据值实时更新。

4. 动态控制 Stepper 的范围和步长 #

你可以动态调整 Stepper 的范围和步长值。例如，用户的选择可以影响 Stepper 的行为。

代码示例：动态范围 #

import SwiftUI

struct DynamicStepperExample: View {
    @State private var count = 5
    @State private var maxRange = 10

    var body: some View {
        VStack {
            Text("当前值: \(count)")
                .font(.headline)

            Stepper(value: $count, in: 0...maxRange) {
                Text("范围: \(0) 到 \(maxRange)")
            }
            .padding()

            Button("扩大范围到 20") {
                maxRange = 20
            }
            .padding()
        }
    }
}

关键点 #

  • 在运行时动态更新 Stepper 的范围 (in 参数)。
  • 可以通过按钮或其他触发方式改变 Stepper 的行为。

5. 自定义样式的 Stepper #

你可以通过嵌套或在 HStack/VStack 中放置 Stepper 和其他组件，进一步定制其外观。

示例：嵌套自定义布局 #

import SwiftUI

struct StyledStepperExample: View {
    @State private var count = 0

    var body: some View {
        HStack {
            Text("当前值: \(count)")
                .font(.title3)
                .padding(.trailing)

            Stepper("", value: $count)
                .labelsHidden() // 隐藏标签，只显示加减按钮
        }
        .padding()
    }
}

关键点 #

  • 隐藏标签 (labelsHidden())： 如果标签（Text）需要分离显示，可以使用此修饰符隐藏默认的 Stepper 标签。
  • 自定义排版： 将 Stepper 嵌套在 HStack/VStack 中，配合其他元素保持样式的灵活性。

6. 在实际应用中的场景 #

6.1 数量选择（如购物车） #

Stepper 在电商或订单场景中是非常常见的，例如用户选择购物车商品的数量：

struct ShoppingCartExample: View {
    @State private var quantity: Int = 1

    var body: some View {
        VStack {
            HStack {
                Text("数量: \(quantity)")
                Stepper("", value: $quantity, in: 1...99)
                    .labelsHidden()
            }
            .padding()

            Button("提交订单") {
                print("提交了 \(quantity) 件商品")
            }
            .padding()
        }
    }
}

6.2 配置调整 #

Stepper 非常适合用于调整应用内某些参数。例如设置字体大小或屏幕亮度：

struct FontSizeStepperExample: View {
    @State private var fontSize: CGFloat = 14

    var body: some View {
        VStack(spacing: 20) {
            Text("字体大小: \(Int(fontSize))")
                .font(.system(size: fontSize))

            Stepper(value: $fontSize, in: 10...30, step: 1) {
                Text("调整字体大小")
            }
            .padding()
        }
    }
}

7. 结合 onEditingChanged 事件 #

如果需要在用户交互完成时触发事件，可以利用 Stepper 的 onEditingChanged 闭包。

代码示例 #

struct EditingChangedStepper: View {
    @State private var count = 0

    var body: some View {
        Stepper("当前值: \(count)", value: $count, in: 0...10) { editing in
            if !editing {
                print("用户完成了值的调整：\(count)")
            }
        }
        .padding()
    }
}

关键点 #

  • onEditingChanged 提供一个布尔值：
    • true 表示用户正在交互。
    • false 表示用户完成交互。

总结 #

Stepper 是一个强大的、可自定义的 SwiftUI 组件，适合用于各种计数器和参数调整场景。根据需求，你可以选择不同的实现方式：

需求解决方案
增加或减少绑定的数值使用基础 Stepper(value: $count)。
限制范围和调整步长添加 in: x...y 和 step: z 参数。
完全控制加减逻辑使用 onIncrement 和 onDecrement。
隐藏标签和自定义外观使用修饰符 labelsHidden()，或嵌套在 HStack/VStack 中实现定制。
与动态业务逻辑相结合动态调整范围、步长等（通过绑定变量控制）。

结合实际场景，你可以将 Stepper 用于购物车数量选择、参数调整、动态设置等功能，既直观又易用。

本文共 1774 字，上次修改于 Feb 9, 2025
相关标签： SwiftUI