时间戳

首页 > 解决方案 > 如何使用 SwiftUI 创建带有刻度线的滑块？

ios - 如何使用 SwiftUI 创建带有刻度线的滑块？

问题描述

使用 SwiftUI，我想创建一个最小/最大范围为 5-20 的滑块，用户可以在其中滑动并向上滑动 5。开箱即用的滑块看起来非常“平坦”/平滑。有没有办法可以添加所述刻度线，以使滑块看起来像“捕捉”到刻度线？

如果滑块被认为不是实现该效果的正确方法，我愿意接受其他选择。

标签： iosswiftswiftui

解决方案

Slider 有一堆初始化选项，其中一些包括一个“步骤”参数，它创建了捕捉效果。它的边缘没有可见的刻度线，但您可以在旁边手动创建它。

import SwiftUI

struct SliderView: View {
    
    @State var value: CGFloat = 10
    let min: CGFloat = 5
    let max: CGFloat = 20
    let step: CGFloat = 5
    
    var body: some View {
        VStack {
            Text(formated(value: value))
            
            Slider(
                value: $value,
                in: min...max,
                step: step,
                minimumValueLabel: Text(formated(value: min)),
                maximumValueLabel: Text(formated(value: max)),
                label: { })

            VStack(spacing: 0) {
                Slider(
                    value: $value,
                    in: min...max,
                    step: step)
                    .accentColor(.red)
                
                HStack(spacing: 0) {
                    let count: Int = Int((max / step))
                    ForEach(0..<count) { index in
                        VStack {
                            Text("I")
                            Text("\(index * Int(step) + Int(min))")
                        }
                        .offset(x:
                          index == 1 ? 5 :
                          index == 2 ? 4 :
                          0
                        )
                        if index != (count - 1) {
                            Spacer()
                        }
                    }
                }
                .padding(.horizontal, 8)
            }
            .padding()
        }
        .padding()
    }
    
    func formated(value: CGFloat) -> String {
        return String(format: "%.0f", value)
    }
    
}

推荐阅读