如何在SwiftUI中自定义Slider蓝线？

Question

像UISlider

let slider = UISlider()

slider.minimumTrackTintColor = .red

Answer 1

SwiftUI的Slider不允许您自Xcode 11 beta 4起自定义外观。

目前，您唯一的选择是创建一个UISlider并将其包装在UIViewRepresentable中。浏览the “Interfacing with UIKit” tutorial并观看WWDC 2019 Session 231: Integrating SwiftUI，了解如何使用UIViewRepresentable。

The Slider documentation提到了一个名为SliderStyle的类型，但是没有SliderStyle的文档，并且从Xcode 11 beta 4开始，该类型实际上尚未在SwiftUI框架的公共接口中定义。 。它可能会出现在更高版本中。为了实现此功能，我们还可能必须等待SwiftUI的未来版本（11之后）。

如果确实出现SliderStyle，则可能会允许您自定义Slider的外观，就像ButtonStyle允许您自定义Button的外观一样，方法如下：承担绘制图纸的全部责任。因此，如果您想抢先一步，可能要在网上寻找ButtonStyle教程。

但是SliderStyle可能最终更像TextFieldStyle。 Apple提供了少量TextFieldStyle供您选择，但您不能定义自己的。

Answer 2

.accentColor(.red)

这将在iOS和Mac Catalyst上运行。 查看可自定义的滑块示例here

Answer 3

正如其他答案所指出的那样，您在SwiftUI中自定义Slider的能力有限。您可以更改.accentColor(.red)，但是仅更改minimumTrackTintColor。

带有Slider的{​​{1}}的示例

此外，您无法更改thumbTintColor之类的其他内容。 如果您不只是想要.accentColor(.red)进行更多自定义，则别无选择，只能使用rob mayoff所述的minimumTrackTintColor中的UISlider。

下面是一些代码，说明如何在SwiftUI中使用SwiftUI

UISlider

然后您可以像这样在struct SwiftUISlider: UIViewRepresentable { final class Coordinator: NSObject { // The class property value is a binding: It’s a reference to the SwiftUISlider // value, which receives a reference to a @State variable value in ContentView. var value: Binding<Double> // Create the binding when you initialize the Coordinator init(value: Binding<Double>) { self.value = value } // Create a valueChanged(_:) action @objc func valueChanged(_ sender: UISlider) { self.value.wrappedValue = Double(sender.value) } } var thumbColor: UIColor = .white var minTrackColor: UIColor? var maxTrackColor: UIColor? @Binding var value: Double func makeUIView(context: Context) -> UISlider { let slider = UISlider(frame: .zero) slider.thumbTintColor = thumbColor slider.minimumTrackTintColor = minTrackColor slider.maximumTrackTintColor = maxTrackColor slider.value = Float(value) slider.addTarget( context.coordinator, action: #selector(Coordinator.valueChanged(_:)), for: .valueChanged ) return slider } func updateUIView(_ uiView: UISlider, context: Context) { // Coordinating data between UIView and SwiftUI view uiView.value = Float(self.value) } func makeCoordinator() -> SwiftUISlider.Coordinator { Coordinator(value: $value) } } #if DEBUG struct SwiftUISlider_Previews: PreviewProvider { static var previews: some View { SwiftUISlider( thumbColor: .white, minTrackColor: .blue, maxTrackColor: .green, value: .constant(0.5) ) } } #endif 中使用此滑块：

ContentView

示例：

Link to full project

Answer 4

如果在黑暗模式设计中明亮的白色滑块处理过，则可以使用.label颜色和.softLight使其慢下来。除非您能弄清楚混合模式和色相旋转，否则它仅在灰度下看起来不错。

最好的结果是使用.blendMode（.sourceAtop）覆盖的形状...但是令人遗憾的是，这会阻止交互。

@Environment(\.colorScheme) var colorScheme

var body: some View {

        let hackySliderBGColor: Color = colorScheme == .dark ? Color(.secondarySystemBackground) : Color(.systemBackground)
        let hackySliderAccentColor: Color = colorScheme == .dark ? Color(.label) : Color(.systemGray2)
        let hackySliderBlendMode: BlendMode = colorScheme == .dark ? .softLight : .multiply

...

    ZStack {
            Rectangle()
            .foregroundColor(hackySliderBGColor)

// This second Rect prevents a white sliver if slider is at max value.
             .overlay(Rectangle()
                  .foregroundColor(hackySliderBGColor)
                  .offset(x: 5)
             )

            Slider(value: $pointsToScoreLimit, 
                   in: themin...themax, step: 5)
            .accentColor(hackySliderAccentColor)
            .blendMode(hackySliderBlendMode)
    }

示例：