Stepper/步进器, Slider/拖动条 的使用

1. Stepper 步进器的使用

  1.1 实现

/// 步进器 /加减控件
struct StepperBootcamp: View {
    
    @State var stepperValue: Int = 10
    @State var widthIncrement: CGFloat = 0
    
    var body: some View {
        VStack {
            Stepper("Stepper: \(stepperValue)", value: $stepperValue)
                .padding(50)
            
            RoundedRectangle(cornerRadius: 25)
                .frame(width: 100 + widthIncrement, height: 100)
            
            Stepper("Stepper 2") {
                // increment
                incrementWidth(amount: 100)
            } onDecrement: {
                // decrement
                incrementWidth(amount: -100)
            }
        }
    }
    
    /// 添加动画
    func incrementWidth(amount: CGFloat){
        withAnimation(.easeInOut) {
            widthIncrement += amount
        }
    }
}

  1.2 效果图:

2. Slider 拖动条的使用

  2.1 实现

// 拖动条/滑块
struct SliderBootcamp: View {
    @State var sliderValue: Double = 3
    @State var color: Color = .red
    
    var body: some View {
        // slider1
        // slider2
        // slider3
        slider4
    }
    
    /// 方式四
    var slider4: some View{
        VStack{
            Text("Rating: ")
            
            Text(
                String(format: "%.1f", sliderValue)
            )
            .foregroundColor(color)
            
            Slider(
                value: $sliderValue,
                in: 1...5,
                step: 1.0) {
                    Text("Title")
                } minimumValueLabel: {
                    Text("1")
                        .font(.largeTitle)
                        .foregroundColor(.orange)
                } maximumValueLabel: {
                    Text("5")
                } onEditingChanged: { _ in
                    color = .green
                }
        }
    }
    
    /// 方式三
    var slider3: some View{
        VStack {
            Text("Rating: ")
            Text(
                String(format: "%.1f", sliderValue)
            )
            Slider(value: $sliderValue, in: 1...5, step: 0.5)
                .accentColor(.red)
        }
    }
    
    // 方式二
    var slider2: some View{
        VStack {
            Text("Rating: ")
            Text("\(sliderValue)")
            Slider(value: $sliderValue, in: 0...100)
                .accentColor(.red)
        }
    }
    
    // 方式一
    var slider1: some View{
        VStack {
            Text("Rating: ")
            Text("\(sliderValue)")
            Slider(value: $sliderValue)
        }
    }
}

  2.2 效果图: