美文网首页
swift ui 数据绑定

swift ui 数据绑定

作者: xq9527 | 来源:发表于2021-11-22 15:26 被阅读0次

前言:

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

效果图:

image.png
image.png

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

具体实现

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

相关文章

  • swift ui 数据绑定

    前言: 最近在学习iOS swift ui 里面的数据绑定 ,就想着记录下 然后分享给大家。 效果图: 看上图我们...

  • RxSwift-MVVM

    MVVM核心在于数据与UI的双向绑定,数据的变化会更新UI,UI变化会更新我们的数据。那这种绑定操作谁来做呢?当然...

  • swift ui 数据绑定二传递结构体

    前言 : 最近在学习iOS swift ui 里面的数据绑定 ,这是第二小节 传递结构体 想着分享给大家。 效果图...

  • AppWorker教程-数据绑定

    数据绑定 数据绑定是在应用程序 UI 与数据源建立连接的过程。如果绑定正确数据,则当数据更改其值时,绑定到数据的U...

  • Vue 简单语法

    动态绑定数据message是动态的 判断语句 循环语句 事件监听 UI与数据双向绑定 数据只绑定一次,后续数据改变...

  • [转] DataBinding 数据绑定

    数据绑定分为单项绑定和双向绑定两种。单向绑定上,数据的流向是单方面的,只能从代码流向 UI;双向绑定的数据是双向的...

  • 八、【扩展知识】数据绑定控件的应用

    数据绑定控件和数据源控件 1、数据绑定控件:具有DataSource属性或DataSourceID属性,用于在UI...

  • Vue 双向绑定

    双向绑定我的理解是视图层(View)和数据层(Model)相互影响,即就是将数据的变化绑定到UI, 同时UI的变化...

  • SAPUI5 (11) - 数据绑定之属性绑定 (Propert

    数据绑定指将 Model 的数据绑定到 UI,如果是双向绑定 (two-way binding),则任何一方的变化...

  • 数据驱动之 UITableViewController

    数据驱动:即使用数据驱动ui的展示,而不需要手动去调整ui,从而将数据与ui进行绑定,界面的布局全部由数据来控制;...

网友评论

      本文标题:swift ui 数据绑定

      本文链接:https://www.haomeiwen.com/subject/oddbtrtx.html