前言:
最近在学习iOS swift ui 里面的数据绑定 ,就想着记录下 然后分享给大家。
效果图:
看上图我们需求很明确 我们需要将输入框里面内容来替换掉我们的标题
具体实现
scss
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 将我们输入框拿到内容赋值给我们的标题
scss
Button(action: {
self.title=self.textInput
}, label: {
Text("确定")
.font(.largeTitle)
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(15)
})
完整代码
less
//
// 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里面简化了很多。同学们有兴趣可以私下多深入去了解下。