美文网首页
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 数据绑定

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