SwiftUI将保存的值传递给父视图

时间:2020-07-11 06:12:05

标签: swift xcode swiftui

我对SwiftUI还是很陌生,我试图找出将数据从子视图传递给父视图的最佳方法?

感谢我来自Javascript(React)背景的帮助,所以对我来说有点不同

我的子视图的工作方式是用户单击图像以选择该图像。

我有@State绑定,用于保存imgUrl,该imgUrl是一个引用资产中名称的字符串。

我只是不确定将值传递给父组件的最佳方法。

这是子视图(imageSelector)

struct ImageSelector: View {
@State private var windowImgs = ["1", "2", "3","4","5","6","7","8","9","10","11","12","13", "14","15","16","17","18"]

@State private var imgPicked = ""


var body: some View{
    ScrollView(Axis.Set.horizontal, showsIndicators: true){
        HStack{
            ForEach(0..<18){num in
                Button(action:{
                    self.imgPicked = self.windowImgs[num]
                    print(self.imgPicked)
                }){
                    Image("\(self.windowImgs[num])")
                        .renderingMode(.original)
                        .resizable()
                        .cornerRadius(4)
                        .frame(width: 100, height: 100)
                }
            }
        }
    }
}

}

这是父视图(AddCounterForm)

struct AddCounterForm: View {
@Environment(\.presentationMode) var presentationMode
@State private var pickedImg: String = "defaultImg"
@State private var price: String = "0.0"
@State private var qty: String = "0"
var body: some View {
    VStack (spacing: 40){
        HStack {
            Button("Cancel"){
                self.presentationMode.wrappedValue.dismiss()
            }
            .foregroundColor(.red)
            Spacer()
            Button("Save"){
                
            }
        }
        HStack {
            VStack (spacing: 20){
                TextField("Window type", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)
                TextField("Window location", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            Image(pickedImg)
                .resizable()
                .cornerRadius(4)
                .frame(width: 90, height: 90)
                .padding(.leading)
        }
        
        HStack {
            Text("Price")
            TextField("", text:$price)
                .frame(width: 70)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
            Spacer()
            Text("Qty")
            TextField("", text:$qty)
                .frame(width: 70)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
        }
        VStack {
            Text("Select an image")
                .foregroundColor(.blue)
            ImageSelector()
                .padding(.bottom)
            
            Button("Use your own image"){
                //method
            }
            .frame(width: 180, height: 40)
            .background(Color.blue)
            .clipShape(Capsule())
            .foregroundColor(.white)
            .padding(.top)
        }
        
    }
    .padding()
}

}

预览解决方案,感谢@Asperi和@neverwinterMoon的帮助

struct ImageSelector_Previews: PreviewProvider {
static var previews: some View {
    PreviewWrapper()
}

}

struct PreviewWrapper:查看{ @State(initialValue:“”)var imgPicked:字符串

var body: some View {
    ImageSelector(imgPicked: $imgPicked)
}

}

1 个答案:

答案 0 :(得分:1)

在这种情况下,绑定是最合适的

struct ImageSelector: View {
   @Binding var imgPicked: String

并使用

ImageSelector(imgPicked: $pickedImg)
    .padding(.bottom)