如何在SwiftUI中自定义滑块蓝线?

tvmytwxo  于 2023-02-15  发布在  Swift
关注(0)|答案(6)|浏览(505)

就像在UISlider中一样

let slider = UISlider()

slider.minimumTrackTintColor = .red
eni9jsuy

eni9jsuy1#

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

另外,你不能改变thumbTintColor这样的其他东西,如果你想要更多的定制而不仅仅是minimumTrackTintColor,你别无选择,只能像rob mayoff所说的那样在SwiftUI中使用UISlider
下面是一些关于如何在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中使用此滑块,如下所示:

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

示例:

Link to full project

q1qsirdb

q1qsirdb2#

从苹果2021年的平台开始,你可以使用tint修改器来改变滑块旋钮左侧轨道的颜色,除此之外,SwiftUI的Slider不允许你自定义它的外观。
如果你需要更多的定制,那么现在你唯一的选择就是创建一个UISlider并将其 Package 在一个UIViewRepresentable中。学习the “Interfacing with UIKit” tutorial并观看WWDC 2019 Session 231: Integrating SwiftUI以学习如何使用UIViewRepresentable
Slider文档以前提到过一个名为SliderStyle的类型,但是没有SliderStyle的文档,而且从Xcode 11 beta 4开始,SwiftUI框架的公共接口中实际上没有定义该类型。它可能会出现在以后的版本中。也可能我们需要等待将来的版本(13之后)版本的SwiftUI的此能力。
如果SliderStyle真的出现了,它可能允许你定制Slider的外观,就像ButtonStyle允许你定制Button的外观一样--通过承担绘制它的全部责任。所以如果你想抢先一步,你可能需要在网上寻找ButtonStyle的教程。
但是SliderStyle最终可能更像TextFieldStyle,苹果提供了少量的TextFieldStyle供你选择,但是你不能定义自己的。

6ovsh4lw

6ovsh4lw3#

.accentColor(.red)

这将在iOS和Mac Catalyst上工作。查看可定制滑块示例here

qoefvg9y

qoefvg9y4#

如果明亮的白色滑块手柄在暗模式设计上有光栅,你可以使用.label color和.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)
    }

示例:

hpcdzsge

hpcdzsge5#

所以我尝试使用.accentColor(.red),但没有成功,所以我注意到对于较新的版本,必须使用.tint(.red)才能使更改可见。
希望这个有用。

6kkfgxo0

6kkfgxo06#

您可以使用ZStack更改最大轨迹颜色,如下所示

var body: some View {
  VStack {
    Spacer()
    Image("Fun").resizable().frame(width: 200, height: 200, alignment: .center).cornerRadius(20)
    ZStack {
      Rectangle()
        .frame(height: 2)
        .foregroundColor(.yellow).frame(width: UIScreen.main.bounds.width - 150)
      Slider(value: $sliderval, in: 0...timeSlider_maximumValue, label: {Text("PLayer")}, minimumValueLabel: {Text("\(timeSlider_minimumValue)")}, maximumValueLabel: {Text("\(timeSlider_maximumValuetext)")}) { success in
        SilderTap()
      }.padding(.horizontal).tint(.green).foregroundColor(.white)
    }
  }
}

enter image description here

相关问题