SwiftUI实战教程 第二章 BMI计算器

代码库

教程中的项目代码都保存在这里：

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