代码库
教程中的项目代码都保存在这里:
https://github.com/NDFour/swiftui01
前言
在这一章里,我们会做一个BMI计算器,进一步加深我们在之前的章节里学习到的知识。这一章里我们会使用TextField
用来获取用户的输入内容。
MBI指数用来帮你判断自己的体重是否超标,计算方法如下:
使用体重(单位:千克)除以身高(单位:米)的平方。
如:你的身高 175cm,体重70kg,那么BMI指数就是
70/1.75/1.75=22.9
BMI指数分级:
过轻:BMI < 18.5
正常:18.5 <= BMI <= 24.9
超重:25 <= BMI <= 29.9
肥胖:BMI >= 30
开始
新建项目
在第一章中我们介绍了如何使用 Xcode新建一个项目,如果忘记了可以回到第一章再复习一下。
新建好的项目长这个样子:
开始界面
在ContentView.swift
中我们添加了两个TextField
用来输入体重和身高。当你需要获取用户的输入时都可以使用TextField
。
同时,我们还添加了一个Text
用来显示BMI计算器。
上面这些元素我们都放到一个VStack
中。
struct ContentView: View {
@State private var weightText: String = ""
@State private var heightText: String = ""
var body: some View {
VStack {
Text("BMI计算器").font(.largeTitle)
TextField("体重(kg)", text: $weightText)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("身高(m)", text: $heightText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.border(Color.black)
}.padding()
}
}
TextField
的第一个参数是一个提示用户输入内容的占位符,第二个参数绑定了我们一开始声明的两个参数:weightText
, heightText
。
注意:我们在绑定自定义变量到TextField
时在变量名前加了个$
符号。
至此,当用户在TextField
输入框中输入内容时,我们绑定的@State
变量的值也会同步更新,换句话说,当@State
变量的值发生变化时,TextField
的内容同样也会改变。
我们为TextField
添加了几个modifier
,你可以删掉他们然后重新运行看看会产生什么结果。
假如你删除.border
那么TextField
将不会存在明显的边框,这回让用户难以区分输入框边界究竟在哪里。
textFieldStyle