美文网首页
swift ui 数据绑定二传递结构体

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

作者: xq9527 | 来源:发表于2021-11-23 09:43 被阅读0次

    前言 :

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

    效果图:

    • 改变前

    image.png
    • 改变后

    image.png

    具体实现 :

    • 普通绑定

    struct ContentView: View {
        @State private  var  title:String="旋涡名人"
        var body: some View {
            VStack {
                Text(self.title)
                    .padding()
                Button(
                    action: {
                        self.title="宇智波佐助"
                    }, label: {
                        Text("确定")
                            .font(.largeTitle)
                              .padding()
                              .background(Color.blue)
                             .foregroundColor(.white)
                              .cornerRadius(15)
                    }
                )
            }
    
        }
    }
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    上面的代码片段我们简单分析一些 通常我们要在点击一个button的时候改变 标题的内容 我们可以像上面这样去操作 在action 属性里面去操作 可以理解为button点击事件里面去处理 这样虽然能实现需求但是随着我们需求变多 代码量变大我们不推荐这种方式

      self.title="宇智波佐助"
    

    我们只需要self.title 将我们变量重新赋值 那么我们点击button之后 标题内容就会发生改变

    • 传递结构体来绑定数据

    import SwiftUI
    struct HeadView:View{
        @Binding var title:String
        
        var counter:Int=0
        
        init(title:Binding<String>){
            self._title=title
            let sentence=self._title.wrappedValue
            self.counter=sentence.count
        }
        
        var body: some View{
            Text(self.title+"/\(self.counter)")
        }
    }
    
    struct ContentView: View {
        @State private  var  title:String="旋涡名人"
        var body: some View {
            VStack {
                Text(self.title)
                    .padding()
                HeadView(title:self.$title)
                Button(
                    action: {
                        self.title="宇智波佐助"
                    }, label: {
                        Text("确定")
                            .font(.largeTitle)
                              .padding()
                              .background(Color.blue)
                             .foregroundColor(.white)
                              .cornerRadius(15)
                    }
                )
            }
    
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    
    

    我们通过属性包装器 将我们要显示的view 抽离出来 然后绑定到我们button点击事件上面 也能实现我们将代码更好解耦和抽离代码

    最后总结:

    swift ui 使用了 属性包装器 来时实现和其他语言的一样的数据绑定的效果 同学们有兴趣可以私下多研究。最后希望我的文章和笔记能帮助到各位同学学习和工作。

    相关文章

      网友评论

          本文标题:swift ui 数据绑定二传递结构体

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