SwiftUI教程系列文章匯總

在本章中，我們實(shí)現(xiàn)了一個(gè)身體質(zhì)量指數(shù)(BMI)計(jì)算器應(yīng)用程序，在此我們會(huì)強(qiáng)化之前學(xué)過(guò)的概念比如Button和Text，并且還將學(xué)習(xí)新的概念，包括使用TextFields獲得從用戶輸入，和真實(shí)數(shù)據(jù)源@State的使用。

主要內(nèi)容：

1. TextField實(shí)現(xiàn)
2. @State的認(rèn)識(shí)
3. 體重計(jì)算器的實(shí)現(xiàn)

1、介紹

本文我們將制作一個(gè)身體質(zhì)量指數(shù)(BMI)計(jì)算器應(yīng)用程序，初步了解SwiftUI，將學(xué)會(huì)使用Text、Button、TextField視圖，并且了解數(shù)據(jù)源如何進(jìn)行綁定。

BMI計(jì)算方式：

1. 用體重(公斤)(kg)除以身高(米)(m)
2. 然后再用你的身高除以剛才的結(jié)果，得到你的BMI

計(jì)算結(jié)果有以下分類:

• 體重不足:BMI低于18.5。
• 健康體重:你的BMI是18.5到24.9。
• 超重:你的體重指數(shù)在25到29.9之間。
• 肥胖:你的身體質(zhì)量指數(shù)是30或更高。

2、界面實(shí)現(xiàn)

代碼：

@State private var weightText: String = ""
@State private var heightText: String = ""
var body: some View {
    VStack{
        Text("BMI Calculator:").font(.largeTitle)
        TextField("Enter Weight (in kilograms)",text: $weightText) .textFieldStyle(RoundedBorderTextFieldStyle())
            .border(Color.black)
        
        TextField("Enter Height (in meters)",text: $heightText) .textFieldStyle(RoundedBorderTextFieldStyle())
            .border(Color.black)
        
        Button(action:{
            ...
        }){
            Text("Calculate BMI")
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
        }
        Text("BMI:  ") .font(.title) .padding()
    }.padding()
}

說(shuō)明：

1. 創(chuàng)建兩個(gè)變量，分別用來(lái)記錄體重和很高的輸入值
2. 使用@State修飾，可以用來(lái)綁定知道個(gè)變量到某個(gè)視圖上
3. VStack是垂直布局，子視圖是垂直布局顯示的
4. 里面有Text文本視圖，使用.font設(shè)置字體
5. TextField輸入文本視圖，第一個(gè)參數(shù)是默認(rèn)值，這里提示輸入內(nèi)容以及單位
6. 第二個(gè)參數(shù)是獲取輸入的文本，分別傳遞給了變量weightText和heightText，此時(shí)需要使用$來(lái)標(biāo)識(shí)
7. 第三個(gè)參數(shù)是文本輸入框類型，根據(jù)需求傳入即可
8. .border是Modifiers，這里是設(shè)置邊框顏色，下篇會(huì)詳細(xì)講解
9. Button這里設(shè)置了按鈕文本，以及按鈕點(diǎn)擊操作

3、計(jì)算并且分類顯示

針對(duì)不同的計(jì)算結(jié)果應(yīng)該進(jìn)行分類，分類如下:

• 體重不足:BMI低于18.5。
• 健康體重:你的BMI是18.5到24.9。
• 超重:你的體重指數(shù)在25到29.9之間。
• 肥胖:你的身體質(zhì)量指數(shù)是30或更高。

代碼:

@State private var bmi: Double = 0
@State private var classification: String = ""
...
Button(action:{
    let weight = Double(self.weightText)!
    let height = Double(self.heightText)!
    self.bmi = weight/(height * height )
    
    //分類
    if self.bmi < 18.5{
        self.classification = "Underweight"
    }else if self.bmi < 24.9{
        self.classification = "Healthy weight"
    }else if self.bmi < 29.9{ self.classification = "Overweight"
    }else{
        self.classification = "Obese"
    }
}){
    Text("Calculate BMI")
        .padding()
        .foregroundColor(.white)
        .background(Color.blue)
}
Text("BMI: \(bmi, specifier:"%.1f"),\(classification) ") .font(.title) .padding()

說(shuō)明：

1. 將拿到的字符串需要轉(zhuǎn)換為double類型再進(jìn)行計(jì)算
2. 轉(zhuǎn)換方式就是直接通過(guò)Double()傳入字符串就可以拿到double值。
3. self.weightText拿到的就是在界面中傳入的值。這里的值是動(dòng)態(tài)改變的。因?yàn)橥ㄟ^(guò)@State進(jìn)行修飾了。
4. 通過(guò)if語(yǔ)句判斷進(jìn)行分類，當(dāng)然這里也可以用其他方式。只要可以在不同的條件下給self.classification設(shè)置值就可以了。
5. classification變量用來(lái)顯示分類結(jié)果，它也是本地?cái)?shù)據(jù)源顯示到界面上，所以也需要使用@State進(jìn)行修飾。
6. 在Text中也可以使用插值方式進(jìn)行傳值。這樣比較方便

4、總結(jié)

功能演示：

演示

知識(shí)點(diǎn)總結(jié)：

1. @State修飾變量，將這個(gè)變量就是真實(shí)數(shù)據(jù)源，與界面視圖進(jìn)行綁定，動(dòng)態(tài)更改數(shù)據(jù)
2. VStack進(jìn)行垂直布局，在VStack內(nèi)的View都會(huì)進(jìn)行垂直分布。這里僅僅進(jìn)行簡(jiǎn)單的布局實(shí)現(xiàn)。詳細(xì)的使用后面會(huì)專門(mén)分析
3. View有Text、TextField、Button，用來(lái)搭建界面
4. .font、.border、.padding、foregroundColor是Modifiers，用來(lái)修飾View。