如何修改SwiftUI中Slider的圆形滑块颜色？

iOS 16+ 最简实现 #

从iOS 16起，SwiftUI新增了直接设置滑块拇指颜色的thumbColor(_:)修饰符，搭配tint(_:)设置轨道高亮色，就能快速实现需求：

Slider(
    value: $lightIntensity,
    in: 1...5,
    step: 2
) {
    Text(R.string.localized.settings_appliancedetail_button_interior_light())
} onEditingChanged: { editing in
    isEditing = editing
}
.tint(R.color.primary.color) // 设置轨道高亮区域颜色
.thumbColor(R.color.primary.color) // 设置圆形滑块颜色

iOS 15及以下 自定义SliderStyle方案 #

如果需要兼容iOS 15或更早版本，可以通过自定义SliderStyle来实现纯SwiftUI的修改：

// 自定义滑块样式
struct PrimaryThumbSliderStyle: SliderStyle {
    let thumbColor: Color
    let trackColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                // 未选中的轨道部分
                Rectangle()
                    .frame(height: 4)
                    .foregroundColor(trackColor.opacity(0.3))
                
                // 已选中的轨道部分
                Rectangle()
                    .frame(width: geometry.size.width * CGFloat(configuration.value), height: 4)
                    .foregroundColor(trackColor)
                
                // 自定义圆形滑块
                Circle()
                    .fill(thumbColor)
                    .frame(width: 20, height: 20)
                    .shadow(radius: 2)
                    // 根据当前滑块值计算偏移位置
                    .offset(x: geometry.size.width * CGFloat(configuration.value) - 10)
                    // 绑定原滑块的拖拽手势
                    .gesture(configuration.dragGesture)
            }
            // 保留原滑块的标签（用于无障碍）
            .overlay(configuration.label.accessibilityHidden(true), alignment: .top)
        }
    }
}

// 使用自定义样式
Slider(
    value: $lightIntensity,
    in: 1...5,
    step: 2
) {
    Text(R.string.localized.settings_appliancedetail_button_interior_light())
} onEditingChanged: { editing in
    isEditing = editing
}
.sliderStyle(PrimaryThumbSliderStyle(
    thumbColor: R.color.primary.color,
    trackColor: R.color.primary.color
))

注意事项 #

• 确保R.color.primary.color能正确加载你的主色调，若颜色来自Asset目录，也可直接用Color("Primary")替代。
• 自定义样式时保留了原滑块的拖拽手势和无障碍标签，保证交互体验不受影响。

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