SwiftUI中能否自定义Slider的thumb 实现UIKit中UISlider的自定义滑块效果

可以直接自定义 SwiftUI 中 Slider 的 thumb 样式，根据兼容的系统版本不同，有几种可选实现方式：

• 最低兼容 iOS 16：用原生 SwiftUI 的 thumb 修饰符直接设置自定义视图，无需桥接 UIKit
• 兼容 iOS 15 及更低版本：可通过全局外观设置，或者用 UIViewRepresentable 桥接 UISlider 实现单控件自定义

全局外观设置（全系统版本兼容，所有 Slider 生效） #

和 UIKit 的 API 逻辑完全一致，直接通过 UISlider 的外观代理全局设置即可，所有 SwiftUI 中的 Slider 都会自动生效：

// 可放在 App 初始化方法或页面 onAppear 回调中执行
UISlider.appearance().setThumbImage(UIImage(named: "Play_black"), for: .normal)

单控件自定义（全系统版本兼容，仅当前 Slider 生效） #

如果不想全局修改所有 Slider 的样式，可以通过 UIViewRepresentable 封装 UISlider，单独给指定控件设置自定义 thumb：

struct CustomSlider: UIViewRepresentable {
    @Binding var value: Double
    let minValue: Double
    let maxValue: Double
    let thumbImage: UIImage?
    
    func makeUIView(context: Context) -> UISlider {
        let slider = UISlider()
        slider.minimumValue = Float(minValue)
        slider.maximumValue = Float(maxValue)
        slider.setThumbImage(thumbImage, for: .normal)
        slider.addTarget(
            context.coordinator,
            action: #selector(Coordinator.valueChanged(_:)),
            for: .valueChanged
        )
        return slider
    }
    
    func updateUIView(_ uiView: UISlider, context: Context) {
        uiView.value = Float(value)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(value: $value)
    }
    
    class Coordinator: NSObject {
        @Binding var value: Double
        
        init(value: Binding<Double>) {
            self._value = value
        }
        
        @objc func valueChanged(_ sender: UISlider) {
            value = Double(sender.value)
        }
    }
}

调用示例：

struct DemoView: View {
    @State private var sliderValue = 0.5
    
    var body: some View {
        CustomSlider(
            value: $sliderValue,
            minValue: 0,
            maxValue: 1,
            thumbImage: UIImage(named: "Play_black")
        )
        .frame(height: 40)
    }
}

iOS 16+ 原生纯 SwiftUI 实现 #

iOS 16 之后 SwiftUI 新增了 thumb 自定义修饰符，可以直接传入任意自定义视图作为滑块，不需要桥接 UIKit：

struct DemoView: View {
    @State private var sliderValue = 0.5
    
    var body: some View {
        Slider(value: $sliderValue, in: 0...1)
            .foregroundStyle(.gray) // 未填充轨道颜色
            .tint(.blue) // 已填充轨道颜色
            .thumb {
                Image("Play_black")
                    .resizable()
                    .frame(width: 30, height: 30)
            }
    }
}

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