定义结构体（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() } }

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

总结

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

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

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

再接再厉！