How customise Slider blue line in SwiftUI?

问题

Like in UISlider

let slider = UISlider()

slider.minimumTrackTintColor = .red

回答1:

SwiftUI's Slider doesn't let you customize its appearance as of Xcode 11 beta 4.

For now, your only option is to create a UISlider and wrap it in a UIViewRepresentable. Work through the “Interfacing with UIKit” tutorial and watch WWDC 2019 Session 231: Integrating SwiftUI to learn how to use UIViewRepresentable.

The Slider documentation mentions a type named SliderStyle, but there is no documentation for SliderStyle and the type is not actually defined in the public interface of the SwiftUI framework as of Xcode 11 beta 4. It is possible that it will appear in a later release. It is also possible that we will have to wait for a future (after 11) version of SwiftUI for this ability.

If SliderStyle does appear, it might allow you to customize the appearance of a Slider in the same way that ButtonStyle lets you customize the appearance of Button—by assuming total responsibility for drawing it. So you might want to look for ButtonStyle tutorials on the net if you want to get a head start.

But SliderStyle might end up being more like TextFieldStyle. Apple provides a small number of TextFieldStyles for you to choose from, but you cannot define your own.

回答2:

As pointed out in other answers you have limited ability to customize a Slider in SwiftUI. You can change the .accentColor(.red) but that only changes the minimumTrackTintColor.

Example of a Slider with .accentColor(.red)

Additionally, you can't change other things like thumbTintColor. If you want more customization than just minimumTrackTintColor that you have no choice but to use a UISlider in SwiftUI as rob mayoff stated.

Here is some code on how you can use a UISlider in SwiftUI

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

Then you can use this slider in your ContentView like this:

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)
    }
  }
}

Example:

Link to full project

回答3:

.accentColor(.red)

This will work on iOS and Mac Catalyst. Check out customizable sliders example here

回答4:

If the bright white slider handle grates on your dark mode design, you can use .label color and .softLight to tell it to simmer down. It looks good only in grayscale, unless you can figure out the blend modes and hue rotation.

The best looking result would be from an overlaid shaped with .blendMode(.sourceAtop)... but that blocks interaction, sadly.


@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)
    }

Example:

来源：https://stackoverflow.com/questions/57101754/how-customise-slider-blue-line-in-swiftui

标签

swift

slider

swiftui