swift ui 数据绑定

前言:

最近在学习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里面简化了很多。同学们有兴趣可以私下多深入去了解下。

相关推荐
东坡肘子1 天前
举手之劳 -- 肘子的 Swift 周报 #151
人工智能·swiftui·swift
sakiko_2 天前
Swift学习笔记42-SwiftUI的属性包装器(讲解+面试)
笔记·学习·ios·swiftui·swift
Daniel_Coder4 天前
我用 SwiftUI + GRDB 做了一个「按时吃药·服药提醒」App
ios·swiftui·swift·widgetkit
懋学的前端攻城狮7 天前
把 SwiftUI List 换成 NSTableView:一次目录树卡顿的排查记录
macos·swiftui·swift
东坡肘子8 天前
AI 想放弃了,人没有 -- 肘子的 Swift 周报 #150
人工智能·swiftui·swift
东坡肘子15 天前
越来越慢的 App Review,拦住了谁? -- 肘子的 Swift 周报 #149
人工智能·swiftui·swift
大熊猫侯佩20 天前
Xcode 预览新升级:arguments 让界面调试井井有条
swiftui·xcode·swift
大熊猫侯佩21 天前
WWDC26:把 SwiftUI Toolbar 真正握在手心里
swiftui·swift·apple
大熊猫侯佩21 天前
WWDC 26 全新 ResultsObserver:终于能在 View 外面盯着 SwiftData 了
swiftui·swift·apple
东坡肘子22 天前
Apple Intelligence 已通过审核,即将在中国提供服务 -- 肘子的 Swift 周报 #148
人工智能·swiftui·swift