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

Question

像 UISlider

let slider = UISlider()

slider.minimumTrackTintColor = .red

Answer 1

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

的实施例Slider与.accentColor(.red)

此外，您无法更改诸如thumbTintColor 之类的其他内容。如果你想要更多的定制minimumTrackTintColor，你别无选择，只能像rob mayoff所说的那样使用UISliderin 。SwiftUI

这是一些关于如何UISlider在 SwiftUI 中使用 a的代码

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像这样使用这个滑块：

struct ContentView: View {
  @State var sliderValue: Double = 0.5

  var body: some View {
    VStack {
      Text("SliderValue: \(sliderValue)")
      // Slider(value: $sliderValue).accentColor(.red).padding(.horizontal)

      SwiftUISlider(
        thumbColor: .green,
        minTrackColor: .red,
        maxTrackColor: .blue,
        value: $sliderValue
      ).padding(.horizontal)
    }
  }
}

例子：

链接到完整的项目

Answer 2

Slider从 Xcode 11 beta 4 开始，SwiftUI不允许您自定义其外观。

目前，您唯一的选择是创建一个UISlider并将其包装在UIViewRepresentable. 完成“与 UIKit交互”教程并观看WWDC 2019 Session 231：Integrating SwiftUI以了解如何使用UIViewRepresentable.

该Slider文件提到了一个名为类型SliderStyle，但不存在用于文档SliderStyle和类型是不实际的SwiftUI框架的公共接口定义为Xcode的11 beta 4版本，它会出现在以后的版本中这是可能的。也有可能我们将不得不等待 SwiftUI 的未来（11 之后）版本才能获得此功能。

如果SliderStyle确实出现，它可能允许您以与自定义外观Slider相同的方式ButtonStyle自定义 a 的外观Button——通过承担绘制它的全部责任。因此，ButtonStyle如果您想抢先一步，您可能需要在网上寻找教程。

但SliderStyle最终可能会更像TextFieldStyle. Apple 提供了少量的TextFieldStyles 供您选择，但您无法定义自己的。

Answer 3

.accentColor(.red)

这将适用于 iOS 和 Mac Catalyst。在此处查看可自定义的滑块示例