如何在 SwiftUI 项目中使用这个 Swift RangeSlider？

Question

我正在开发一个新的 SwiftUI 应用程序，并试图弄清楚如何使这个 Swift pod 与 SwiftUI 兼容 https://github.com/warchimede/RangeSlider

我相信要走的路是制作一个 UIViewRepresentable Struct，但我对它的理解不够好，无法自己做。 下面的代码给了我一个错误： 类型“RSlider”不符合协议“UIViewRepresentable”

struct RSlider: UIViewRepresentable {

    @Binding var lowerValue: Double
    @Binding var upperValue: Double
    public var minimumValue: Double
    public var maximumValue: Double

    public init(minimumValue: Double, maximumValue: Double, lowerValue: Double, upperValue: Double) {
        self.minimumValue = minimumValue
        self.maximumValue = maximumValue
        self.lowerValue = lowerValue
        self.upperValue = upperValue
    }

    func makeUIView(context: UIViewRepresentableContext<RSlider>) -> RangeSlider {
        let rangeSlider = RangeSlider(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
        rangeSlider.addTarget(self, action: #selector(Coordinator.rangeSliderValueChanged(_:)), for: .valueChanged)
        return rangeSlider
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func updateUIView(_ uiView: UIControl, context: UIViewRepresentableContext<RSlider>) {

    }

    class Coordinator: NSObject {
        var control: RSlider

        init(_ control: RSlider) {
            self.control = control
        }

        @objc func rangeSliderValueChanged(_ rangeSlider: RangeSlider) {
            print("Range slider value changed: (\(rangeSlider.lowerValue) , \(rangeSlider.upperValue))")
            self.control.lowerValue = rangeSlider.lowerValue
            self.control.upperValue = rangeSlider.upperValue
        }
    }
}

我在这里错过了什么？

Answer 1

你快到了。有一些小问题。

struct RSlider: UIViewRepresentable {

    @Binding var lowerValue: Double
    @Binding var upperValue: Double
    var minimumValue: Double
    var maximumValue: Double

    func makeUIView(context: Context) -> RangeSlider {
        let rangeSlider = RangeSlider(frame: .zero)
        rangeSlider.addTarget(context.coordinator, action: #selector(Coordinator.rangeSliderValueChanged(_:)), for: .valueChanged)
        return rangeSlider
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func updateUIView(_ slider: RangeSlider, context: Context) {
        slider.lowerValue = lowerValue
        slider.upperValue = upperValue
        slider.minimumValue = minimumValue
        slider.maximumValue = maximumValue
    }

    class Coordinator: NSObject {

        var control: RSlider

        init(_ control: RSlider) {
            self.control = control
        }

        @objc func rangeSliderValueChanged(_ rangeSlider: RangeSlider) {
            self.control.lowerValue = rangeSlider.lowerValue
            self.control.upperValue = rangeSlider.upperValue
        }
    }
}

用法，

struct ContentView: View {

    @State var lowerValue: Double = 0.2
    @State var upperValue: Double = 0.8

    var body: some View {
        VStack {
            RSlider(lowerValue: $lowerValue, upperValue: $upperValue, minimumValue: 0.0, maximumValue: 1.0)
                .frame(width: 200, height: 25)

            HStack {
                Text("Current lowerValue \(lowerValue)")
                Text("Current upperValue \(upperValue)")
            }
            .padding()
        }
    }
}