控制視圖

控件是交互工具，用戶通過交互修改界面狀態(tài)、選取選項(xiàng)或插入、修改或刪除信息。我們實(shí)現(xiàn)過其中的一部分，如前例中的??Button???視圖以及??TextField??視圖。要定義一個(gè)有用的接口，需要學(xué)習(xí)有關(guān)視圖的更多知識(shí)以及其它由SwiftUI所提供的控制視圖。

按鈕視圖

我們已經(jīng)學(xué)到，??Button??視圖創(chuàng)建一個(gè)簡(jiǎn)單的控件，在點(diǎn)擊時(shí)執(zhí)行操作。以下是該結(jié)構(gòu)體部分初始化方法。

• Button(String, action: Closure)：此初始化方法創(chuàng)建一個(gè)??Button???視圖。第一個(gè)參數(shù)是定義按鈕標(biāo)簽的字符串，??action??參數(shù)是在點(diǎn)擊按鈕時(shí)執(zhí)行的代碼的閉包。
• Button(action: Closure, label: Closure)：此初始化方法創(chuàng)建一個(gè)??Button???視圖。??action???參數(shù)是在點(diǎn)擊按鈕時(shí)執(zhí)行的代碼的閉包，??label??參數(shù)是返回用于創(chuàng)建標(biāo)簽的視圖的閉包。
• Button(String, role: ButtonRole?, action: Closure)：此初始化方法創(chuàng)建一個(gè)??Button???視圖。第一個(gè)參數(shù)是定義按鈕標(biāo)簽的字符串。??role???參數(shù)一個(gè)結(jié)構(gòu)體，包含描述按鈕目的的類型屬性。有兩個(gè)屬性：??cancel???和??destructive???。??action??參數(shù)是在點(diǎn)擊按鈕時(shí)執(zhí)行的代碼的閉包。

我們已經(jīng)實(shí)現(xiàn)過第二個(gè)初始化方法創(chuàng)建按鈕，但如果僅需對(duì)標(biāo)簽使用字符中，可以簡(jiǎn)化代碼使用第一個(gè)初始方法加后置的用于操作的閉包。

示例6-10：實(shí)現(xiàn)??Button??視圖

struct ContentView: View {
    @State private var colorActive: Bool = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(colorActive ? Color.green : Color.clear)
            Button("Change Color") {
                colorActive.toggle()
            }
            Spacer()
        }.padding()
    }
}

上例在??VStack???中包仿一個(gè)??Text???視圖和一個(gè)??Button???視圖。??Text???視圖展示固定的文本，背景色用??colorActive???屬性定義。如果屬性值是??true???，我們將??green???色賦值給背景，否則顏色為??clear???（透明）。在按下按鈕時(shí)，會(huì)切換這一屬性的值，再次運(yùn)算??body??屬性的值，文本的背景修改為下一個(gè)顏色。

圖6-4：按鈕視圖

??跟我一起做：創(chuàng)建一個(gè)多平臺(tái)項(xiàng)目。使用示例6-10的代碼更新??ContentView??視圖。點(diǎn)擊Change Color按鈕。會(huì)看到文本背景色的變化（參見圖6-4右圖）。

如果希望將視圖與控件執(zhí)行的操作進(jìn)行分離，可以將相關(guān)語(yǔ)句移到函數(shù)中。例如，可以上在??ContentView???結(jié)構(gòu)體中添加一個(gè)函數(shù)，用于切換??colorActive??屬性的值，然后在按鈕的操作中調(diào)用這個(gè)函數(shù)。應(yīng)用的功能的相同，但代碼更有條理。

示例6-11：使用函數(shù)來(lái)組織代碼

struct ContentView: View {
    @State private var colorActive: Bool = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(colorActive ? Color.green : Color.clear)
            Button("Change Color") {
                changeColor()
            }
            Spacer()
        }.padding()
    }
    
    func changeColor() {
        colorActive.toggle()
    }
}

如果按鈕唯一的操作就是調(diào)用方法，可以簡(jiǎn)化視圖的定義為聲明??action??參數(shù)并指定所要執(zhí)行操作的方法名。如下所示。

示例6-12：引用方法

Button("Change Color", action: changeColor)

聲明方法名稱帶括號(hào)會(huì)馬上執(zhí)行方法，但僅聲明名稱會(huì)提供一個(gè)方法的引用供系統(tǒng)稍后執(zhí)行。

??跟我一起做：使用示例6-11中的代碼更新??ContentView??視圖。應(yīng)用功能和之前相同。使用示例6-12中的??Button???視圖更新??Button??視圖。點(diǎn)擊按鈕確定所執(zhí)行的操作。

上例中，我們使用了三元運(yùn)算符來(lái)根據(jù)??colorActive???屬性的值選取??background()???修飾符的值。這是推薦的做法，這樣SwiftUI可以識(shí)別視圖并有效管理狀態(tài)的轉(zhuǎn)換，但我們也可以使用??if else??語(yǔ)句來(lái)響應(yīng)修改。例如，有時(shí)會(huì)用按鈕這類控件在界面中顯示或隱藏視圖。

示例6-13：在界面中添加及刪除視圖

struct ContentView: View {
    @State private var showInfo = false
    
    var body: some View {
        VStack(spacing: 10) {
            Button("Show Information") {
                showInfo.toggle()
            }.padding()
            if showInfo {
                Text("This is the information")
            }
            Spacer()
        }
    }
}

本例中的按鈕切換??@State???屬性??showInfo???的值。在按鈕下方，可查看到該屬性的當(dāng)前值。若其值為??true???，顯示 ??Text???視圖，否則什么也不顯示。因此，在按下按鈕時(shí)，??showInfo???的值發(fā)生改變，??body???屬性的內(nèi)容會(huì)重新繪制，??Text???視圖根據(jù)??showInfo??的當(dāng)前值出現(xiàn)或消失。

圖6-5：動(dòng)態(tài)界面

??if else??語(yǔ)句可用于選擇是否執(zhí)行按鈕的操作，但SwiftUI提供了如下修飾符來(lái)在要做禁用操作時(shí)禁用按鈕。

• disabled(Bool)：這一修飾符決定該控件是否響應(yīng)用戶的交互。

下例使用了該修飾符在點(diǎn)擊后禁用按鈕，因此用戶只能執(zhí)行一次操作。

示例6-14：禁用按鈕

struct ContentView: View {
    @State private var color = Color.clear
    @State private var buttonDisabled = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(color)
            Button("Change Color") {
                color = Color.green
                buttonDisabled = true
            }
            .disabled(buttonDisabled)
            Spacer()
        }.padding()
    }
}

這個(gè)視圖包含兩個(gè)??@State???屬性，一個(gè)用于追蹤顏色，另一個(gè)表示按鈕是否處于禁用狀態(tài)。在點(diǎn)擊按鈕時(shí)，操作中將??true???賦值給??buttonDisabled??屬性，按鈕就停止運(yùn)作了，這樣用戶只能點(diǎn)一次。

圖6-6：按鈕禁用

和之前一樣，??Button???視圖的初始化方法可以包含一個(gè)??label???參數(shù)來(lái)定義所需視圖的標(biāo)簽。這個(gè)參數(shù)非常靈活，可以包含像??Text???視圖和??Image???視圖的視圖。按鈕中的圖片以原始渲染模式顯示 ，也就是說(shuō)以原始顏色顯示，但還有一種模式可以創(chuàng)建帶圖片的蒙版，以應(yīng)用的著重色或賦值給控件的前景色顯示。為選取渲染模式，??Image??視圖包含如下修飾符。

• renderingMode(TemplateRenderingMode)：這個(gè)修飾符對(duì)??Image???視圖定義了渲染械。參數(shù)是包含??original???和??template??值的枚舉。

下例定義了一個(gè)帶圖片和文本的按鈕。將??renderingMode()???修飾符應(yīng)用于??Image??視圖來(lái)以模板顯示圖片。

示例6-15：定義帶圖按鈕的標(biāo)簽

struct ContentView: View {
    @State private var expanded: Bool = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .frame(minWidth: 0, maxWidth: expanded ? .infinity : 150, maxHeight: 50)
                .background(Color.yellow)
            Button(action: {
                expanded.toggle()
            }, label: {
                VStack {
                    Image(expanded ? .contract : .expand)
                        .renderingMode(.template)
                    Text(expanded ? "Contract" : "Expand")
                }
            })
            Spacer()
        }.padding()
    }
}

示例6-15中的視圖包含一個(gè)??@State???屬性??expanded???，用于控制??Text???視圖的寬度。如該屬性的值為??true???，我們使用??infinity???值讓寬度為最寬，否則，寬度為150點(diǎn)。每當(dāng)用戶點(diǎn)擊按鈕時(shí)，??expanded???屬性的值通過??toggle()???方法進(jìn)行切換，??Text??視圖的寬度隨之發(fā)生變化。

圖6-7：帶模板圖片的按鈕

??跟我一起做：下載expand.png和contract.png并添加至資源目錄。使用示例6-15中的代碼更新??ContentView??視圖，點(diǎn)擊Expand按鈕。此時(shí)會(huì)看到圖6-7中的界面。刪除??renderingMode()??修飾符。我們應(yīng)當(dāng)會(huì)看到原色圖。

可以通過如下修飾符對(duì)按鈕賦標(biāo)準(zhǔn)樣式。

• buttonStyle(ButtonStyle)：此修飾符定義了按鈕的樣式。參數(shù)是遵循??ButtonStyle??協(xié)議的一個(gè)結(jié)構(gòu)體。
• controlSize(ControlSize)：此修飾符定義了按鈕的樣式。參數(shù)是一個(gè)枚舉，值有??large???、??mini???、??regular???和??small??。

SwiftUI框架自帶有??PrimitiveButtonStyle???協(xié)議提供標(biāo)準(zhǔn)樣式。為此，該協(xié)議定義了類型屬性??automatic???、??bordered???、??borderedProminent???、??borderless???和??plain???。這些樣式滿足不同目的。例如，??bordered???樣式創(chuàng)建一個(gè)灰色背景的按鈕，表示二級(jí)操作，??borderedProminent??樣式創(chuàng)建一個(gè)應(yīng)用著重色的按鈕，表示主操作，比如用于保存或提交數(shù)據(jù)。例如以下視圖包含兩個(gè)按鈕，一個(gè)取消處理，另一個(gè)將信息發(fā)送給服務(wù)端。

示例6-16：按鈕樣式

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            HStack {
                Button("Cancel") {
                    print("Cancel Action")
                }.buttonStyle(.bordered)
                Spacer()
                Button("Send") {
                    print("Send Information")
                }.buttonStyle(.borderedProminent)
            }
            Spacer()
        }.padding()
    }
}

突出按鈕應(yīng)僅用于表示主操作。本例中，Cancel按鈕加了邊框，告訴用戶這是一個(gè)二級(jí)操作，重要級(jí)為次級(jí)，但Send按鈕為突出的，表示在點(diǎn)擊該按鈕時(shí)執(zhí)行重要操作。

圖6-8：標(biāo)準(zhǔn)樣式按鈕

按鈕用于取消處理（如上例）或刪除某一項(xiàng)時(shí)，我們可以通過??Button???的初始化方法為其賦一個(gè)特定的角色。這樣系統(tǒng)可以根據(jù)角色在應(yīng)用運(yùn)行的設(shè)備上對(duì)按鈕添加樣式。例如，在移動(dòng)設(shè)備上，??destructive??角色的按鈕以紅色顯示。

示例6-17：賦予角色

Button("Delete", role: .destructive) {
                    print("Delete Action")
                }.buttonStyle(.bordered)

圖6-9：銷毀按鈕

??跟我一起做：使用示例6-16的代碼更新??ContentView??視圖。會(huì)看到如圖6-8中所示的按鈕。將Cancel按鈕替換為示例6-17中的??Button??視圖。會(huì)看到如圖6-9中所示的刪除按鈕。

這些樣式對(duì)SF圖標(biāo)進(jìn)行了美化。SF圖標(biāo)替換普通圖片的優(yōu)勢(shì)是它們會(huì)按對(duì)按鈕添加的字體大小進(jìn)行縮放。這配合對(duì)按鈕自身進(jìn)行縮放的??controlSize()??修飾符，使得我們可以創(chuàng)建不同大小的按鈕。

示例6-18：縮放按鈕

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            Button(action: {
                print("Send information")
            }, label: {
                HStack {
                    Image(systemName: "mail")
                        .imageScale(.large)
                    Text("Send")
                }
            })
            .buttonStyle(.borderedProminent)
            .font(.largeTitle)
            .controlSize(.large)
            Spacer()
        }.padding()
    }
}

本例中，我們應(yīng)用了??imageScale()???修飾符來(lái)縮放SF圖標(biāo)，??font()???修飾符對(duì)按鈕添加了大字體，??controlSize()??修飾符對(duì)按鈕進(jìn)行縮放。結(jié)果如下。

圖6-10：自定義大小的按鈕

如果希望定義一個(gè)樣式與系統(tǒng)自帶的進(jìn)行區(qū)分，則需要?jiǎng)?chuàng)建自己的??ButtonStyle??結(jié)構(gòu)體。該協(xié)議只要求實(shí)現(xiàn)如下方法。

• makeBody(configuration: Configuration)：該方法定義并返回一個(gè)替換按鈕體的視圖。??configuration???參數(shù)為包含按鈕信息的??Configuration??類型的值。

該方法接收一個(gè)??Configuration???類型的值，是??ButtonStyleConfiguration??的類型別名，包含返回按鈕相關(guān)信息的屬性。以下是其中的屬性。

• isPressed：該屬性返回表示按鈕是否按下的布爾值。
• label：該屬性返回定義按鈕當(dāng)前標(biāo)簽的一個(gè)或多個(gè)視圖。

以下示例定義在點(diǎn)擊時(shí)會(huì)放大的示例。樣式包含一個(gè)內(nèi)邊距和綠色邊框。要應(yīng)用這些樣式，必須創(chuàng)建一個(gè)符合??ButtonStyle???協(xié)議的結(jié)構(gòu)體，即實(shí)現(xiàn)??makeBody()??方法并通過該方法返回希望賦值給按鈕體的視圖。

組成按鈕體的視圖由??Configuration???結(jié)構(gòu)體的??label??屬性提供，因此我們可以讀取并修改這一屬性值來(lái)應(yīng)用新的樣式，如下所示。

示例6-19：為按鈕添加自定義樣式

struct MyStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        let pressed = configuration.isPressed
        return configuration.label
            .padding()
            .border(Color.green, width: 5)
            .scaleEffect(pressed ? 1.2 : 1.0)
    }
}

struct ContentView: View {
    @State private var color = Color.gray
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default title")
                .padding().foregroundColor(color)
            Button("Change Color") {
                color = Color.green
            }.buttonStyle(MyStyle())
            Spacer()
        }.padding()
    }
}

在示例6-19中，我們定義了一個(gè)結(jié)構(gòu)體??MyStyle???并實(shí)現(xiàn)了所要求的??makeBody()???方法。該方法通過類型屬性獲取到了按鈕的當(dāng)前配置，進(jìn)而修改并返回標(biāo)簽。首先，我們讀取??isPressed???屬性的值來(lái)了解按鈕是否被按下，然后對(duì)??label???屬性應(yīng)用新的樣式。這個(gè)屬性返回創(chuàng)建按鈕當(dāng)前標(biāo)簽的一個(gè)視圖拷貝，然后通過修改其值我們也就修改了標(biāo)簽。本例中，我們應(yīng)用了一個(gè)內(nèi)邊距、一個(gè)邊框，然后根據(jù)??isPressed???屬性的值賦了一個(gè)縮放比例。如果該值為??true???，也就是按鈕被按下了，我們將比例設(shè)為1.2進(jìn)行放大，但在值為??false??時(shí)，比例又回到了1。

在這一視圖中，我們創(chuàng)建了該結(jié)構(gòu)體的實(shí)例并通過??buttonStyle()???修飾符將其值賦值給??Button??視圖。如果如下所示。

圖6-11：帶自定義樣式的按鈕

??跟我一起做：使用示例6-19中的代碼更新??ContentView.swift??文件。點(diǎn)擊按鈕。會(huì)看到按鈕如圖6-11右圖那樣放大了。SwiftUI自動(dòng)對(duì)按鈕添加了動(dòng)畫。我們會(huì)在第11章中學(xué)習(xí)自定義動(dòng)畫以及如何創(chuàng)建。

文本框視圖

??TextField??又是一個(gè)我們之前介紹過的控件。該視圖創(chuàng)建一個(gè)輸入框，用戶可進(jìn)行交互并插入值（單行文本）。以下是結(jié)構(gòu)體中所包含的一個(gè)初始化方法。

• TextField(String, text: Binding, axis: Axis)：此初始化方法創(chuàng)建一個(gè)輸入框。第一個(gè)參數(shù)定義該字段的占位符，??text???參數(shù)是用于存儲(chǔ)由用戶所插入值的綁定屬性，??axis???參數(shù)定義在文本超出視圖邊界時(shí)沿哪條軸進(jìn)行滾動(dòng)。這是一個(gè)枚舉，值有??horizontal???和??vertical??。

框架為??TextField??視圖定義了幾個(gè)修飾符。以下是最常用的一些。

• textFieldStyle(TextFieldStyle)：此修飾符定義文本框的樣式。參數(shù)是一個(gè)符合??TextFieldStyle???協(xié)議的結(jié)構(gòu)體。框架自帶了幾個(gè)提供標(biāo)準(zhǔn)樣式的結(jié)構(gòu)體。這些結(jié)構(gòu)體定義了類型屬性??automatic???、??plain???、??roundedBorder???和??squareBorder??。
• autocorrectionDisabled(Bool)：此修飾符啟用或禁用系統(tǒng)的自動(dòng)修正特性。默認(rèn)，該值為??true??（禁用狀態(tài)）。
• textInputAutocapitalization(TextInputAutocapitalization?)：此修飾符定義用于格式化文本的大寫樣式。該參數(shù)是一個(gè)結(jié)構(gòu)體，包含類型屬性??characters???、??never???、??, sentences (默認(rèn)值)???和??words??。
• keyboardType(UIKeyboardType)：此修飾符定義待定輸入框后系統(tǒng)打開的鍵盤類型。其參數(shù)是一個(gè)枚舉，值有??default???、??asciiCapable???、??numbersAndPunctuation???、??URL???、??numberPad???、??phonePad???、??namePhonePad???、??emailAddress???、??decimalPad???、??twitter???、??webSearch???、??asciiCapableNumberPad???和??alphabet??。

我們已經(jīng)學(xué)習(xí)如何包含一個(gè)簡(jiǎn)單的??TextField??視圖來(lái)獲取用戶的輸入，但只使用了少數(shù)幾個(gè)修飾符。下例展示了如何對(duì)視圖添加樣式讓單詞變成大寫。

示例6-20：配置文本框

struct ContentView: View {
    @State private var title: String = "Default Title"
    @State private var titleInput: String = ""
    
    var body: some View {
        VStack(spacing: 15) {
            Text(title)
                .lineLimit(1)
                .padding()
                .background(Color.yellow)
            TextField("Insert Title", text: $titleInput)
                .textFieldStyle(.roundedBorder)
                .textInputAutocapitalization(.words)
            Button("Save") {
                title = titleInput
                titleInput = ""
            }
            Spacer()
        }.padding()
    }
}

示例6-20中對(duì)??TextField???視圖應(yīng)用的樣式為??roundedBorder??。它為輸入框添加一個(gè)邊框，讓視圖占據(jù)的區(qū)域變得可見，如下所示。

圖6-12：帶圓角邊框的文本框

??跟我一起做：使用示例6-20中的代碼更新??ContentView??視圖。在輸入框中插入文本并按下Save按鈕。會(huì)看到如圖6-12所示的效果。

除了按鈕，用戶通過期望能夠通過點(diǎn)擊鍵盤上的Done按鈕保存數(shù)據(jù)。為此框架提供了如下的修飾符。

• onSubmit(of: SubmitTriggers, Closure)：在發(fā)生觸發(fā)條件（比如在鍵盤上按下Done/Return按鈕時(shí)）時(shí)該修飾符執(zhí)行一個(gè)操作。??of???參數(shù)是指定修飾符所響應(yīng)的觸發(fā)條件類型的結(jié)構(gòu)體。結(jié)構(gòu)體中包含??search???和??text??（默認(rèn)）屬性。第二個(gè)參數(shù)是希望執(zhí)行的閉包。
• submitLabel(SubmitLabel)：該修飾符指定虛擬鍵盤中Done按鈕所使用的標(biāo)簽。參數(shù)結(jié)構(gòu)體包含的類型屬性有??continue???、??done???、??go???、??join???、??next???、??return???、??route???、??search???和??send??。
• submitScope(Bool)：該修飾符指定在發(fā)生觸發(fā)條件時(shí)是否提交視圖。

賦值給??onSubmit()???修飾符的閉包在聚焦于視圖（例如用戶編輯輸入框）時(shí)執(zhí)行。如果應(yīng)用于??TextField???視圖，可省略??of??參數(shù)，如下例如下。

示例6-21：響應(yīng)Done按鈕

struct ContentView: View {
    @State private var title: String = "Default Title"
    @State private var titleInput: String = ""
    
    var body: some View {
        VStack(spacing: 15) {
            Text(title)
                .lineLimit(1)
                .padding()
                .background(Color.yellow)
            TextField("Insert Title", text: $titleInput)
                .textFieldStyle(.roundedBorder)
                .submitLabel(.continue)
                .onSubmit {
                    assignTitle()
                }
            HStack {
                Spacer()
                Button("Save") {
                    assignTitle()
                }
            }
            Spacer()
        }.padding()
    }
    func assignTitle() {
        title = titleInput
        titleInput = ""
    }
}

示例6-21中的代碼實(shí)現(xiàn)了??submitLabel()??修飾符來(lái)修改Done按鈕的標(biāo)題為Continue，然后向結(jié)構(gòu)體添加一個(gè)名為??assignTitle()???的方法，執(zhí)行和之前同樣的操作。該方法在兩處有調(diào)用，賦值給??onSubmit()???修飾符的閉包和??Button??視圖操作，因此在按下界面的按鈕或點(diǎn)擊鍵盤上的Done/Return按鈕時(shí)執(zhí)行該操作。不管用戶決定執(zhí)行什么操作，插入文本框的值總是存儲(chǔ)于??title??屬性中。

??跟我一起做：使用示例6-21中的代碼更新??ContentView??結(jié)構(gòu)體，并在iPhone模擬器上運(yùn)行應(yīng)用。點(diǎn)擊輸入框，插入文本并在鍵盤上點(diǎn)擊Continue按鈕。（若要在模擬器上啟用虛擬鍵盤，打開I/O菜單，點(diǎn)擊Keyword，選擇Toggle Software Keyboard選項(xiàng)。）文本會(huì)像此前一樣賦值給標(biāo)題。

在視圖可接收輸入或處理用戶選定的反饋時(shí)，我們就說(shuō)視圖聚焦了。SwiftUI包含了一些處理這種狀態(tài)的工具。可以在視圖獲得焦點(diǎn)時(shí)處理某一任務(wù)、知道視圖是否獲得焦點(diǎn)或是從視圖移除焦點(diǎn)。為此有兩個(gè)屬性包裝器：??@FocusState???和??@FocusedBinding???。??@FocusState???存儲(chǔ)表明焦點(diǎn)當(dāng)前存儲(chǔ)在哪里的值，??@FocusedBinding??用于將狀態(tài)傳遞給其它視圖。為管理狀態(tài)，框架內(nèi)置了如下 修飾符。

• focused(Binding, equals: Hashable)：此修飾符將視圖當(dāng)前狀態(tài)存儲(chǔ)于綁定屬性中。第一個(gè)參數(shù)是對(duì)??@FocusState???屬性的引用，??equals??參數(shù)是用于標(biāo)識(shí)視圖的可哈希值。
• focusable(Bool)：此標(biāo)識(shí)符表示是否可將焦點(diǎn)放在視圖上。

為追蹤視圖的狀態(tài)，我們需要一個(gè)可哈希數(shù)據(jù)類型的??@FocusState???屬性，提供用于標(biāo)識(shí)視圖的值。下例中，屬性通過枚舉值進(jìn)行創(chuàng)建。定義了兩個(gè)值??name???和??surname??，用于追蹤兩個(gè)輸入框的聚焦?fàn)顟B(tài)，并在用戶輸入時(shí)修改背景色。

示例6-22：響應(yīng)焦點(diǎn)中的變化

enum FocusName: Hashable {
    case name
    case surname
}

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    @FocusState var focusName: FocusName?
    @State private var title: String = "Default Name"
    @State private var nameInput: String = ""
    @State private var surnameInput: String = ""
    
    var body: some View {
        let color: Color = colorScheme == .dark ? .black : .white
        VStack(spacing: 10) {
            Text(title)
                .lineLimit(1)
                .padding()
                .background(Color.yellow)
            TextField("Insert Name", text: $nameInput)
                .textFieldStyle(.roundedBorder)
                .padding(4)
                .background(focusName == .name ? Color(white: 0.9) : color)
                .focused($focusName, equals: .name)
            TextField("Insert Surname", text: $surnameInput)
                .textFieldStyle(.roundedBorder)
                .padding(4)
                .background(focusName == .surname ? Color(white: 0.9) : color)
                .focused($focusName, equals: .surname)
            HStack {
                Spacer()
                Button("Save") {
                    title = nameInput + " " + surnameInput
                }
            }
            Spacer()
        }.padding()
    }
}

??@FocusState???屬性的初始值是??nil???，表示未聚焦于任何視圖。在用戶點(diǎn)擊文本框時(shí)，焦點(diǎn)移至該視圖，標(biāo)識(shí)視圖的值會(huì)被賦值給該屬性。通過將該值與枚舉中的值進(jìn)行比較，我們就知道是哪個(gè)??TextField???視圖于聚焦?fàn)顟B(tài)，相應(yīng)地修改背景色。注意??roundedBorder??樣式對(duì)文本框添加了一個(gè)邊框和白色背景，所以本例中只有邊距的背景可見。

圖6-13：聚焦

在移動(dòng)設(shè)備中，在可處理輸入的視圖（如??TextField???視圖）獲取到焦點(diǎn)時(shí)會(huì)打開虛擬鍵盤。只要焦點(diǎn)還在該視圖上鍵盤就保持打開狀態(tài)。也就是說(shuō)要關(guān)閉鍵盤，我們必須移除該視圖的焦點(diǎn)。在SwiftUI中通過對(duì)??@FocusState???屬性的賦值??nil??來(lái)實(shí)現(xiàn)，如下所示。

示例6-23：關(guān)閉鍵盤

Button("Save") {
                    title = nameInput + " " + surnameInput
                    focusName = nil
                }

示例6-22中的??Button??視圖換成了示例6-23中的??Button??視圖。現(xiàn)在，每當(dāng)點(diǎn)擊Save按鈕時(shí)，會(huì)對(duì)值進(jìn)行處理并關(guān)閉鍵盤。

??跟我一起做：使用示例6-22中的代碼更新??ContentView.swift??文件并在iPhone模擬器上運(yùn)行應(yīng)用。點(diǎn)擊輸入框。背景會(huì)像圖6-13那樣變成灰色。使用示例6-23中的視圖替換原??Button??視圖。再次運(yùn)行應(yīng)用。在兩個(gè)文本框中插入值并點(diǎn)擊Save按鈕。此時(shí)標(biāo)題會(huì)被賦上新值，虛擬鍵盤關(guān)閉。

上例中，我們沒有檢測(cè)用戶是否插入了值，但通常應(yīng)用必須防止用戶保存無(wú)效值或空值。有幾種控制方式。一種是在存儲(chǔ)之前就檢測(cè)值。我們?cè)试S用戶輸入任意值，但僅保存應(yīng)用所接受的值。

示例6-24：在存儲(chǔ)前檢測(cè)值

Button("Save") {
                    let tempName = nameInput.trimmingCharacters(in: .whitespaces)
                    let tempSurname = surnameInput.trimmingCharacters(in: .whitespaces)
                    
                    if !tempName.isEmpty && !tempSurname.isEmpty {
                        title = nameInput + " " + surnameInput
                        focusName = nil
                    }
                }

本例中，我們首先對(duì)??nameInput???和??surnameInput??進(jìn)行修剪去除其首尾的空格（參數(shù)第4章字符串一節(jié)），然后在將它們賦值給??title??屬性之前檢測(cè)結(jié)果值是否為空。Save按鈕仍保持為激活狀態(tài)，但僅在用戶對(duì)兩個(gè)字段都插入值時(shí)才執(zhí)行保存。

??跟我一起做：使用示例6-24中的代碼更新??ContentView???視圖中的??Button??視圖。此時(shí)必須同時(shí)對(duì)名和姓兩個(gè)字段插入值才能修改標(biāo)題。

另一種方式是在用戶插入的為非應(yīng)用預(yù)期值時(shí)通過??disabled()??修飾符禁用按鈕。

示例6-25：禁用按鈕

Button("Save") {
                    let tempName = nameInput.trimmingCharacters(in: .whitespaces)
                    let tempSurname = surnameInput.trimmingCharacters(in: .whitespaces)
                    
                    if !tempName.isEmpty && !tempSurname.isEmpty {
                        title = nameInput + " " + surnameInput
                        focusName = nil
                    }
                }
            }.disabled(nameInput.isEmpty || surnameInput.isEmpty)

本例中，我們使用了前面介紹的??disabled()??修飾符來(lái)在用戶在兩個(gè)字段中輸入文本前禁用按鈕。如果其中一個(gè)或兩個(gè)字段為空，按鈕就無(wú)法使用。

??跟我一起做：使用示例6-25中的代碼更新??Button??視圖。只有同時(shí)插入名和姓時(shí)才能按下Save按鈕。

除了可檢測(cè)屬性是否包含有效值，我們還能限定用戶在字段中輸入的內(nèi)容。例如，我們可以只接受數(shù)字或指定數(shù)量的字符。這時(shí)，我們需要在每次視圖狀態(tài)發(fā)生改變時(shí)檢測(cè)用戶插入的值是否有效?？蚣転榇藘?nèi)置了如下的修飾符。

• onChange(of: State, initial: Bool, Closure)：該修飾符在狀態(tài)發(fā)生改變時(shí)執(zhí)行閉包。??of???參數(shù)是存儲(chǔ)待檢測(cè)值的屬性，??initial??參數(shù)為指定在視圖出現(xiàn)時(shí)是否還執(zhí)行檢測(cè)的布爾值，最后一個(gè)參數(shù)是在系統(tǒng)報(bào)出值發(fā)生改變時(shí)執(zhí)行的閉包。閉包可接收兩個(gè)值，一個(gè)表示屬性的老值，另一個(gè)表示新值。

該修飾符只能檢測(cè)一個(gè)狀態(tài)，因此我們應(yīng)對(duì)所有希望進(jìn)行控制的視圖應(yīng)用該修飾符。例如，我們可以在示例中對(duì)那兩個(gè)??TextField??視圖使用它來(lái)限定允許用戶輸入的字符數(shù)。如果超出，會(huì)移除掉多余的字符將結(jié)果賦回屬性，如下所示。

示例6-26：控制用戶的輸入

Text(title)
                .lineLimit(1)
                .padding()
                .background(Color.yellow)
            TextField("Insert Name", text: $nameInput)
                .textFieldStyle(.roundedBorder)
                .padding(4)
                .background(focusName == .name ? Color(white: 0.9) : color)
                .focused($focusName, equals: .name)
                .onChange(of: nameInput, initial: false) { old, value in
                    if value.count > 10 {
                        nameInput = String(value.prefix(10))
                    }
                }
            TextField("Insert Surname", text: $surnameInput)
                .textFieldStyle(.roundedBorder)
                .padding(4)
                .background(focusName == .surname ? Color(white: 0.9) : color)
                .focused($focusName, equals: .surname)
                .onChange(of: surnameInput, initial: false) { old, value in
                    if value.count > 15 {
                        surnameInput = String(value.prefix(15))
                    }
                }

在示例6-26的代碼中，我們檢測(cè)存儲(chǔ)文本框狀態(tài)的屬性的變化。在用戶輸入或刪除字符時(shí)，相應(yīng)的屬性值發(fā)生改變，執(zhí)行賦值給??onChange()???修飾符的閉包。閉包接收屬性的值。使用該值，我們檢測(cè)用戶插入的文本是否有效并進(jìn)行相應(yīng)的響應(yīng)。在示例中，我們計(jì)算字符串中的字符數(shù)，如果值超出上限，我們使用??prefix()??方法從文本的開頭進(jìn)行截取，并將結(jié)果賦回給屬性，這會(huì)更新視圖并刪除文本框中多余的字符。結(jié)果 是在字符數(shù)超出上限時(shí)，用戶就無(wú)法輸入更多的字符了。

??跟我一起做：使用示例6-26中的代碼更新項(xiàng)目中的??TextField??視圖。在iPhone模擬器中運(yùn)行應(yīng)用。插入名和姓。在名超過10個(gè)字符、姓超過15個(gè)字符時(shí)都無(wú)法再添加更多的字符。

當(dāng)然，我們可以指定字符數(shù)外的其它條件。下例創(chuàng)建了一個(gè)僅接收整數(shù)數(shù)字的小應(yīng)用。

示例6-27：僅接收整數(shù)數(shù)字

struct ContentView: View {
    @State private var title: String = "Default Name"
    @State private var numberInput = ""
    
    var body: some View {
        VStack(spacing: 10) {
            Text(title)
                .padding()
                .background(Color.yellow)
            TextField("Insert Number", text: $numberInput)
                .textFieldStyle(.roundedBorder)
                .padding(4)
                .keyboardType(.numbersAndPunctuation)
                .onChange(of: numberInput, initial: false) { old, value in
                    if !value.isEmpty && Int(value) == nil {
                        numberInput = old
                    }
                }
            HStack {
                Spacer()
                Button("Save") {
                    title = numberInput
                    numberInput = ""
                }
            }
            Spacer()
        }.padding()
    }
}

和之前一樣，視圖中包含一個(gè)帶有??onChange()???修飾符的??TextField???。不同之處于在于如何對(duì)輸入有進(jìn)行有效性檢測(cè)。本例中，我們需要確保文本框不為空，然后查看是否可以將其轉(zhuǎn)化為整數(shù)，這表示用戶只輸入了數(shù)字。如果不能，就將閉包接收到的舊值賦值給??numberInput??屬性，文本框回復(fù)到之前的狀態(tài)。

注意我們還實(shí)現(xiàn)了??keyboardType()??修飾符來(lái)顯示適配我們預(yù)期用戶輸入內(nèi)容（本例為數(shù)字）的鍵盤。

??跟我一起做：使用示例6-27中的代碼更新??ContentView.swift??文件。在iPhone模擬器上運(yùn)行應(yīng)用。此時(shí)只能輸入數(shù)字。

默認(rèn)，??TextField???視圖只顯示一行文本，但我們可以使用??lineLimit()???修飾符來(lái)允許視圖進(jìn)行擴(kuò)展來(lái)包含更多的文本。(此前展開??Text??視圖實(shí)現(xiàn)的同一個(gè)修飾符）。除了應(yīng)用修飾符來(lái)設(shè)置我們所需的行數(shù)，我們還要告訴視圖在縱軸上滾動(dòng)內(nèi)容，如下所示。

示例6-28：定義多行文本框

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        TextField("Insert Text", text: $text, axis: .vertical)
            .textFieldStyle(.roundedBorder)
            .padding(20)
            .lineLimit(5)
    }
}

本例中，??TextView???視圖會(huì)進(jìn)行擴(kuò)展，直至到5行的高度時(shí)，然后會(huì)在垂直方向上滾動(dòng)來(lái)允許用戶持續(xù)輸入。如若要對(duì)視圖設(shè)置最小和最大尺寸，可以使用區(qū)間來(lái)聲明修飾符，如??lineLimit(3...5)??。

圖6-14：多行文本框

其它相關(guān)內(nèi)容請(qǐng)見??虛擬現(xiàn)實(shí)(VR)/增強(qiáng)現(xiàn)實(shí)(AR)&visionOS開發(fā)學(xué)習(xí)筆記??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-801062.html

到了這里，關(guān)于大師學(xué)SwiftUI第6章 - 聲明式用戶界面 Part 2的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！