swift - 如何重用 UIViewRepresentable UIKit 组件?
问题描述
由于 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)
}
这就是我几个月来一直工作的方式,但总是感觉不对。但是,我似乎想不出另一种方法来解决这个问题。
有什么建议么?你通常如何处理这种情况?
提前致谢。
解决方案
新答案,现在使用 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
}))
}
}
}
推荐阅读
- python - 在大量列中更改数据框中特定列的位置(索引)?
- laravel - 如何在android中使用laravel api测试离子项目?
- php - php removechild 删除两个孩子
- sql-server - TFS 2018 日志越来越大
- c# - Unity 简单游戏的服务器逻辑
- java - java.lang.VerifyError:堆栈形状不一致
- python - Django中的分组查询中的KeyError
- javascript - 使用匹配的对象值查找和替换图像 src
- sql - SQL 通配符 - 尝试在字符串中查找一系列字符/数字
- node.js - nodemon ignore 无法使用 package.json