swift ui 数据绑定

前言：

最近在学习iOS swift ui 里边的数据绑定 ，就想着记录下 然后分享给大家。

效果图：

看上图咱们需求很明确 咱们需要将输入框里边内容来替换掉咱们的标题

详细完成

   VStack{
            Text(self.title)
                .font(.title)
            TextField("请输入内容",text: self.$textInput)
                .font(.title)
                .frame(width: UIScreen.main.bounds.width-20, height: 50, alignment: .center)
                .padding(10)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }

咱们写了一个 VStack 垂直的的线性布局 咱们里边写了一个text 来显现标题和 textfiled 输入框来显现咱们的根底ui

点击button 将咱们输入框拿到内容赋值给咱们的标题

 Button(action: {
                self.title=self.textInput
            }, label: {
                Text("确认")
                    .font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(15)
            })

完好代码

//
//  ContentView.swift
//  databinding
//
//  Created by xuqing on 2021/11/22.
//
import SwiftUI
struct ContentView: View {
    @State private var textInput:String=""
    @State private var title:String="我是徐老板"
    var body: some View {
        VStack{
            Text(self.title)
                .font(.title)
            TextField("请输入内容",text: self.$textInput)
                .font(.title)
                .frame(width: UIScreen.main.bounds.width-20, height: 50, alignment: .center)
                .padding(10)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            Button(action: {
                self.title=self.textInput
            }, label: {
                Text("确认")
                    .font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(15)
            })
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

最后总结：

swift ui 里边的数据绑定 思维和vue总体来说很像 比较容易做到数据的双向绑定 以前咱们用uikt和oc 开发要写许多代码来完成的 swift ui里边简化了许多。同学们有爱好能够暗里多深入去了解下。