SwiftUI入门 - 2. 状态变量定义，

置顶

菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行

"不积跬步，无以至千里；不积小流，无以成江海"

状态变量的定义

如果我们把一个视图结构体类比为vue中的一个组件

那么类比vue中的data属性，定义一个变量，它被引用时，它的变化会直接反应到视图上

struct ContentView: View {
    
    // 定义一个私有的状态变量 test 它的初始值是字符串123
    // 如果使用 let 那么这个变量不能被更改，会报错
    @State private var test:String = "123";
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            
            // 来一个文字组件，内容就是test变量
            Text(test)
            
            // 来一个按钮组件，点击过后修改test变量的内容
            // 花括号里面是按钮点击之后要做的事情
            // test变量的修改将会直接响应到 Text 组件上面去
            Button("点击这个按钮改变文字"){
                test = "阿斯顿发送到发"
            }
        }
        .padding()
    }
}           

在canvas中预览如下图：

数据绑定

类比vue中 input 组件的 v-model

input 里面变化的值将直接响应到变量绑定的组件上面去

swiftUI 中的双向绑定使用 $ 符号加变量进行表示

struct ContentView: View {

    @State private var test:String = "123";
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
                
            Text(test)
            
            // 搞一个 TextField组件，类比Input
            // placeholder：请输入文字，显示的内容为text，$符号加变量名表示双向绑定
            // 那么当我在这个TextField里面输入文字的时候，上面的Text组件的内容将会跟着变化
            // TextField里面的文字居中对齐
            TextField("请输入文字",text: $test).multilineTextAlignment(.center)
            
            Button("点击这个按钮改变文字"){
                test = "阿斯顿发送到发"
            }
        }
        .padding()
    }
}           

运行如上代码并在输入框中输入文字可以在预览中得到如下的结果：

拓展

那么根据以上得到的信息，我们可以搞一个简易的表单填报界面

struct ContentView: View {
    // 用户名
    @State private var userName:String = "";
    // 密码
    @State private var passWord:String = "";
    // 验证码
    @State private var code:String = "";
    // 提示语
    @State private var res:String = "请输入。。。";
    // 提示语的颜色，color类型
    @State private var color:Color = .red;
    
    var body: some View {
        // 整体纵向布局
        VStack {
            // 页面标题，加粗，标题字体
            Text("登陆界面").fontWeight(.bold).font(.title)
            // 分隔占位，有点类似html中flex的flex:1，具体怎么用之后再看
            Spacer()
            // 一个横向布局，表单项名称-分隔占位-以及表单项
            // 给一个 .all 的 padding，不然不好看
            HStack{
                Text("用户名")
                Spacer()
                TextField("请输入用户名",text:$userName).multilineTextAlignment(.center)
            }.padding(.all)
            
            HStack{
                Text("密码")
                Spacer()
                // secure field 跟 TextField基本类似，只是隐藏输入的内容
                SecureField("请输入密码",text:$passWord).multilineTextAlignment(.center)
            }.padding(.all)
            
            HStack{
                Text("验证码")
                Spacer()
                TextField("请输入验证码",text:$code).multilineTextAlignment(.center)
            }.padding(.all)
            
            Spacer()
            // 提示语和button在一起
            Text(res).foregroundColor(color)
            
            Button("登陆"){
                color = .red
                // button 的点击事件action，做一个简单的判断
                // 修改 res 的名称，以及res的颜色
                if(userName == ""){
                    res = "请输入用户名！"
                    return ;
                }
                if(passWord == ""){
                    res = "请输入密码！"
                    return ;
                }
                if(code == ""){
                    res = "请输入验证码"
                    return ;
                }
                color = .green;
                res = "登陆成功"
                // 清空表单数据
                userName = "";
                passWord = "";
                code = "";
            }.buttonStyle(.bordered) // 按钮的样式随便选一个试试
        }
        .padding()
    }
}           

运行如上代码可以得到如下的界面及操作：

总结

一些基本的使用和变量的定义，简单的入门过程感觉还是挺好玩儿的

不过没有进行深入的研究，使用过程中感觉好多东西需要积累

前期先不慌搞细节以及理论，兴趣和动手实现要紧

再接再厉！