如何通过SwiftUI新初始化方法可视化自定义Slider刻度？

首先明确：iOS 16 中 SwiftUI 的 Slider 新增的带 tick 闭包的初始化方法，仅支持修改刻度的无障碍标签，无法实现可视化层面的定制（比如区分主次刻度、隐藏特定位置刻度）——这是当前API的设计局限，并非用法错误。

以下是两种可行的可视化定制方案：

方案一：自定义叠加刻度视图 #

通过在原生 Slider 上方叠加自定义刻度视图，完全控制刻度的样式与显示逻辑：

struct CustomTickSlider: View {
    @Binding var value: Double
    let range: ClosedRange<Double>
    let majorTickInterval: Double
    let minorTickInterval: Double
    
    var body: some View {
        VStack(spacing: 8) {
            Slider(value: $value, in: range, step: minorTickInterval)
            
            // 自定义刻度栏
            HStack(spacing: 0) {
                ForEach(tickPositions, id: \.self) { position in
                    let isMajor = (position - range.lowerBound).truncatingRemainder(dividingBy: majorTickInterval) == 0
                    Rectangle()
                        .fill(isMajor ? .black : .gray)
                        .frame(width: 1, height: isMajor ? 12 : 6)
                        .alignmentGuide(.leading) { _ in
                            (position - range.lowerBound) / (range.upperBound - range.lowerBound) * UIScreen.main.bounds.width * 0.85
                        }
                }
            }
        }
    }
    
    // 生成所有刻度位置，可按需过滤隐藏特定刻度
    private var tickPositions: [Double] {
        var positions = [Double]()
        var current = range.lowerBound
        while current <= range.upperBound {
            // 仅保留100倍数的刻度，示例需求
            if current.truncatingRemainder(dividingBy: 100) == 0 {
                positions.append(current)
            }
            current += minorTickInterval
        }
        return positions
    }
}

// 使用示例
struct ContentView: View {
    @State private var sliderValue = 0.0
    
    var body: some View {
        CustomTickSlider(
            value: $sliderValue,
            range: 0...500,
            majorTickInterval: 100,
            minorTickInterval: 50
        )
        .padding()
    }
}

该方案完全可控，可自由定义刻度的颜色、高度、间距，甚至直接过滤掉不需要显示的刻度。

方案二：包装UIKit的UISlider #

若需要贴近系统原生交互体验，可通过 UIViewRepresentable 包装 UISlider，利用UIKit的API实现刻度定制：

struct CustomUIKitSlider: UIViewRepresentable {
    @Binding var value: Double
    let range: ClosedRange<Double>
    let majorTickInterval: Double
    
    func makeUIView(context: Context) -> UISlider {
        let slider = UISlider(frame: .zero)
        slider.minimumValue = Float(range.lowerBound)
        slider.maximumValue = Float(range.upperBound)
        slider.value = Float(value)
        slider.addTarget(
            context.coordinator,
            action: #selector(Coordinator.valueChanged),
            for: .valueChanged
        )
        
        addCustomTickMarks(to: slider)
        return slider
    }
    
    func updateUIView(_ uiView: UISlider, context: Context) {
        uiView.value = Float(value)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent: CustomUIKitSlider
        
        init(_ parent: CustomUIKitSlider) {
            self.parent = parent
        }
        
        @objc func valueChanged(_ sender: UISlider) {
            parent.value = Double(sender.value)
        }
    }
    
    // 添加自定义刻度
    private func addCustomTickMarks(to slider: UISlider) {
        let trackRect = slider.trackRect(forBounds: slider.bounds)
        let totalTicks = Int((range.upperBound - range.lowerBound) / majorTickInterval) + 1
        
        for i in 0..<totalTicks {
            let tickX = trackRect.minX + (trackRect.width / CGFloat(totalTicks - 1)) * CGFloat(i)
            let tickView = UIView(
                frame: CGRect(x: tickX, y: trackRect.maxY + 4, width: 2, height: 10)
            )
            tickView.backgroundColor = .black
            slider.addSubview(tickView)
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var sliderValue = 0.0
    
    var body: some View {
        CustomUIKitSlider(
            value: $sliderValue,
            range: 0...500,
            majorTickInterval: 100
        )
        .padding()
        .frame(height: 40)
    }
}

此方案可利用UIKit的成熟布局能力，同时保留系统Slider的原生交互逻辑。

内容的提问来源于stack exchange，提问作者Benzy Neez