如何重用 UIViewRepresentable UIKit 组件？

Question

由于 SwiftUI 的限制，我通常需要跳回 UIKit 并利用 UIKit 组件。这一切都很好，但我发现我通常需要继续创建单独的结构来保存我需要的功能。

例如。假设我有一个包含 4 个字段的表单，例如名字、姓氏、电子邮件和密码。我通常需要为每个创建单独的 UIViewRepresentable UIKit 组件。

我目前正在开展一个项目，其中有 2 个简单的滑块，它们在移动时会更新 2 个不同的标签。在 SwiftUI 中重用相同的 UIViewRepresentable UISlider 组件会将两个滑块都视为 1，因为它们都引用相同的视图模型属性，因此我需要创建单独的组件而不是重用它们。

我想我不妨看看是否有更有效的方法来做到这一点，因为我已经复制代码很长一段时间了，除了类似什么之外，代码通常没有太大区别要显示的键盘类型、颜色等。

下面是我如何从 SwiftUI 接入 UIKit 的示例。我正在创建一个屏幕，允许使用滑块选择投注赔率和赌注。

我跟踪滑块的值何时更改并将值存储在我的视图模型中的 @Published var 中。

self.bViewModel.odds

我通过使用滑块的视图中的环境变量访问此视图模型，并使用它来更新文本标签。

VStack {
    HStack(spacing: 0) {
        Text("\(self.bViewModel.odds)")
             .font(Font.system(size: 15, weight: .semibold, design: .default))
             .foregroundColor(Color("CustomPurple"))
            .frame(minHeight: 0)
            .padding(.top, 3)
            .padding(.bottom, 3)

         Spacer()
    }

    SliderView()
        .frame(minHeight: 25, maxHeight: 25)

}
.padding(.bottom, 30)

SliderView 结构如下所示：

struct SliderView: UIViewRepresentable {

    final class Coordinator: NSObject {

        @EnvironmentObject var bViewModel: BViewModel

        init(bViewModel: EnvironmentObject<BViewModel>)
        {
            self._bViewModel = bViewModel
        }

        // Create a valueChanged(_:) action
        @objc func valueChanged(_ sender: UISlider) {

            self.bViewModel.odds = Double(sender.value)
        }

    }

    func makeCoordinator() -> SliderView.Coordinator {
        Coordinator(bViewModel: self._bViewModel)
    }

    @EnvironmentObject var bViewModel: BViewModel

    func makeUIView(context: Context) -> UISlider {
        let slider = UISlider(frame: .zero)
        slider.minimumValue = 0.00
        slider.maximumValue = 100.00

        slider.addTarget(
             context.coordinator,
             action: #selector(Coordinator.valueChanged(_:)),
             for: .valueChanged
           )

        return slider
    }

    func updateUIView(_ uiView: UISlider, context: Context) {

    }
}

现在，我需要一个用于赌注选择的滑块，但如果不编写一堆代码将其视为不同的滑块，我就无法重复使用上面的同一个滑块。复制代码并更改我访问视图模型的赔率变量的行更容易，以便它访问赌注变量，例如

    @objc func valueChanged(_ sender: UISlider) {

        self.bViewModel.stake = Double(sender.value)
    }

这就是我几个月来一直在工作的方式，但总感觉不对劲。但是，我似乎想不出另一种方法来解决这个问题。

有什么建议吗？遇到这种情况，你一般是怎么处理的？

提前致谢。

Answer 1

新答案，现在使用 EnvironmentObject

import SwiftUI
import Combine

class ViewModel : ObservableObject {

    @Published var sliderValue1 : Double = 3.14
    @Published var sliderValue2 : Double = 42.0
    @Published var sliderValue3 : Double = 3.14
    @Published var sliderValue4 : Double = 42.0
}

struct SliderView: UIViewRepresentable {

    @Binding var value : Double

    class Coordinator: NSObject {
        var sliderView: SliderView

        init(_ sliderView: SliderView) {
            self.sliderView = sliderView
        }

        @objc func valueChanged(_ slider: UISlider) {
            sliderView.value = Double(slider.value)
        }
    }

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

    func makeUIView(context: Context) -> UISlider {
        let slider = UISlider(frame: .zero)
        slider.minimumValue = 0.00
        slider.maximumValue = 100.00

        slider.addTarget(
             context.coordinator,
             action: #selector(Coordinator.valueChanged(_:)),
             for: .valueChanged
           )

        return slider
    }

    func updateUIView(_ uiView: UISlider, context: Context) {

    }
}

struct ContentView : View {

    @EnvironmentObject var viewModel : ViewModel

    var body: some View {
        VStack {
            Text("\(self.viewModel.sliderValue1)")
            Slider(value: Binding<Double>(get:
                { return self.viewModel.sliderValue1 },
                                          set: {
                                            print($0)
                                            self.viewModel.sliderValue1 = $0
            }))

            Text("\(self.viewModel.sliderValue2)")
            Slider(value: Binding<Double>(get:
                { return self.viewModel.sliderValue2 },
                                          set: {
                                            print($0)
                                            self.viewModel.sliderValue2 = $0
            }))


            Text("\(viewModel.sliderValue3)")
            SliderView(value: Binding<Double>(get:
                { return self.viewModel.sliderValue3 },
                                          set: {
                                            print($0)
                                            self.viewModel.sliderValue3 = $0
            }))
            Text("\(viewModel.sliderValue4)")
            SliderView(value: Binding<Double>(get:
                { return self.viewModel.sliderValue4 },
                                          set: {
                                            print($0)
                                            self.viewModel.sliderValue4 = $0
            }))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {

        var value1 : Double = 0.4
        var value2 : Double = 0.4
        var value3 : Double = 0.4
        var value4 : Double = 0.4

        return ContentView().environmentObject(ViewModel())
    }
}

---

好的，因为你很有礼貌而且回答得很快我试过了，希望现在我得到了你需要的东西；）

我确实让“旧滑块”在其中，但现在下面的两个滑块来自我的 UIViewRepresentable。

新答案：

struct SliderView: UIViewRepresentable {

    @Binding var value : Double

    class Coordinator: NSObject {
        var sliderView: SliderView

        init(_ sliderView: SliderView) {
            self.sliderView = sliderView
        }

        @objc func valueChanged(_ slider: UISlider) {
            sliderView.value = Double(slider.value)
        }
    }

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

    func makeUIView(context: Context) -> UISlider {
        let slider = UISlider(frame: .zero)
        slider.minimumValue = 0.00
        slider.maximumValue = 100.00

        slider.addTarget(
             context.coordinator,
             action: #selector(Coordinator.valueChanged(_:)),
             for: .valueChanged
           )

        return slider
    }

    func updateUIView(_ uiView: UISlider, context: Context) {

    }
}

struct ContentView : View {

    @State var sliderValue1 : Double
    @State var sliderValue2 : Double

    @State var sliderValue3 : Double
    @State var sliderValue4 : Double

    var body: some View {
        VStack {
            Text("\(sliderValue1)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue1 },
                                          set: {
                                            print($0)
                                            self.sliderValue1 = $0
            }))

            Text("\(sliderValue2)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue2 },
                                          set: {
                                            print($0)
                                            self.sliderValue2 = $0
            }))


            Text("\(sliderValue3)")
            SliderView(value: Binding<Double>(get:
                { return self.sliderValue3 },
                                          set: {
                                            print($0)
                                            self.sliderValue3 = $0
            }))
            Text("\(sliderValue4)")
            SliderView(value: Binding<Double>(get:
                { return self.sliderValue4 },
                                          set: {
                                            print($0)
                                            self.sliderValue4 = $0
            }))
        }
    }
}

旧答案：

好的，我想出了如何在没有 UIViewRepresentable 的情况下做到这一点。

看这个例子。

您所要做的就是使用您的 sliderVariables（sliderValue1 或您喜欢的任何名称）扩展您的 viewModel 和

struct ContentView : View {

    @State var sliderValue1 : Double
    @State var sliderValue2 : Double

    var body: some View {
        VStack {
            Text("\(sliderValue1)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue1 },
                                          set: {
                                            print($0)
                                            self.sliderValue1 = $0
            }))

            Text("\(sliderValue2)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue2 },
                                          set: {
                                            print($0)
                                            self.sliderValue2 = $0
            }))
        }
    }
}

Answer 2

好的，我想出了如何在没有 UIViewRepresentable 的情况下做到这一点。

看这个例子。

您所要做的就是使用您的滑块变量（sliderValue1 或您喜欢的任何名称）扩展您的视图模型，并使用这些值而不是我的状态变量。

struct ContentView : View {

    @State var sliderValue1 : Double
    @State var sliderValue2 : Double

    var body: some View {
        VStack {
            Text("\(sliderValue1)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue1 },
                                          set: {
                                            print($0)
                                            self.sliderValue1 = $0
            }))

            Text("\(sliderValue2)")
            Slider(value: Binding<Double>(get:
                { return self.sliderValue2 },
                                          set: {
                                            print($0)
                                            self.sliderValue2 = $0
            }))
        }
    }
}