如何在SwiftUI中自定义Slider的Thumb图片？无需UIKit

当然可以不用UIKit就能自定义SwiftUI Slider的Thumb，下面提供两种纯SwiftUI方案，适配不同iOS版本需求：

方案1：iOS 15+ 原生API（推荐） #

iOS 15及以上版本，SwiftUI为Slider提供了thumbImage(_:for:)原生修饰符，直接就能设置自定义Thumb图片，完全不需要依赖UIKit。

结合你的现有代码，修改后如下：

ZStack {
    HStack {
        ForEach(0...10, id: \.self) { _ in
            Text("I")
                .frame(maxWidth: .infinity)
                .foregroundColor(ColorStyle(colorAsset: .lightGrey).color)
        }
    }
    Slider(value: $viewModel.sliderValue, in: minSlider...maxSlider, step: sliderStep)
        .tint(ColorStyle(colorAsset: .lightGrey).color)
        // 设置常态下的Thumb图片，替换成你的图片名称
        .thumbImage(Image("custom-thumb-icon"), for: .normal)
        // 可选：设置高亮（点击拖动时）状态的图片
        .thumbImage(Image("custom-thumb-highlighted"), for: .highlighted)
}

你可以针对不同的交互状态（.normal、.highlighted、.disabled等）设置不同的图片，实现更细腻的交互反馈。

方案2：兼容iOS 14及以下（纯SwiftUI叠加视图） #

如果需要兼容更低版本的iOS，可以通过隐藏原生Thumb+叠加自定义视图的方式实现，同样不需要UIKit：

ZStack {
    HStack {
        ForEach(0...10, id: \.self) { _ in
            Text("I")
                .frame(maxWidth: .infinity)
                .foregroundColor(ColorStyle(colorAsset: .lightGrey).color)
        }
    }
    // 隐藏原生Thumb的Slider
    Slider(value: $viewModel.sliderValue, in: minSlider...maxSlider, step: sliderStep)
        .tint(ColorStyle(colorAsset: .lightGrey).color)
        .accentColor(.clear) // 隐藏原生Thumb
    
    // 自定义Thumb：根据滑块值计算位置
    GeometryReader { geo in
        // 计算Thumb的X轴位置：基于滑块值的比例
        let thumbPositionRatio = (viewModel.sliderValue - minSlider) / (maxSlider - minSlider)
        let thumbX = CGFloat(thumbPositionRatio) * geo.size.width
        
        // 这里可以替换成任意自定义视图，比如图片、形状、文字等
        Image("custom-thumb")
            .frame(width: 24, height: 24) // 自定义大小
            .position(x: thumbX, y: geo.size.height / 2)
    }
}

这个方案的核心是利用GeometryReader获取Slider的布局信息，根据滑块的当前值计算自定义Thumb的位置，完全用SwiftUI视图实现，没有UIKit依赖。

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