SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源碼)

本文，將是一篇系列長文，希望您通過閱讀這篇文章，基本上就可以解決TextField的所有問題。

文章目錄

快速入門
- 您的第一個TextField小程序
- 獲取用戶的輸入結果，學會回調函數(onEditingChanged 和 onCommit)
- 小結使用TextField的一般流程
- TextField formatters
TextField textFieldStyle

基礎入門

TextField(文本框) 是SwiftUI中一種常用的信息輸入控件，非常類似網頁中的表單字段。當用戶在TextField輸入數據時，我們可以通過SwiftUI提供各種鍵盤限制用戶當數據類型,例如數字鍵盤、郵件鍵盤、手機鍵盤等。和按鈕一樣，TextField也能響應用戶操作事件。

您的第一個TextField小應用

受益于SwiftUI聲明式代碼優勢，可以用非常少的代碼即可完成復雜的界面制作。本小節讓我們用6行代碼來做個文本輸入的應用。
1、應用效果

image.png

2、在Xcode里面創建個項目

請參考下面文章，SwiftUI零基礎之開發第一步創建個項目(Xcode 11.4)

3、在ContentView.Swift中復制下面代碼

import SwiftUI

struct ContentView: View {
     @State private var text = ""

      var body: some View {
          TextField("請輸入", text: $text)
      }
}

4、代碼講解

@State private var text
為了獲取Text輸入內容，我們可以定義一個@State變量。

如果您是新手，建議先略過此部分，繼續學習后面的內容。等完全掌握TextField再閱讀下面的內容。參考文章：
SwiftUI 基礎之@State 有什么用
 SwiftUI 基礎之@State @Binding @ObservedObject @EnvironmentObject區別

TextField("type something...", text: $text)
第一個參數是文本框提示內容，第二個參數是用于收集用戶輸入數據的變量

獲取用戶的輸入結果，學會回調函數(onEditingChanged 和 onCommit)

在上面的示例中，我們創建一個帶有占位符的TextField并將其綁定到狀態變量。很簡單，對不對？下面我們來學習一下如何獲取輸入結果。

1、看看運行效果

onEditingChanged 和 onCommit

2、在ContentView.Swift中復制下面代碼

import SwiftUI

struct ContentView: View {
    @State private var text = ""
    var body: some View {
        TextField(
            "請輸入",
            text:$text,
            onEditingChanged:{ item in print("onEditingChanged:\(item):\(self.text)")},
            onCommit: {print("用戶輸入:\(self.text)")}
        )
    }
}

如您在上面的示例中看到，TextField允許我們處理onEditingChanged和onCommit事件。每當用戶開始或完成編輯文本時，TextField都會調用onEditingChanged。它還傳遞一個描述開始或結束事件的布爾值。每當用戶執行諸如按回車鍵之類的操作時，TextField都會調用onCommit。

TextField formatters

本文鏈接：https://blog.csdn.net/iCloudEnd/article/details/105307137

智能推薦

SwiftUI iOS 富有設計感的TextField之Kaede風格(教程含源碼)

實戰需求大家是不是覺得SwiftUI的文本框TextField風格有些單調呢，本文將給大家帶來一套富有設計感的Kaede風格文本框本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能掌握定義Textfield風格方法實現Textfield的動畫效果代碼 1、主界面...

SwiftUI 2 TextField新功能支持自動適應鍵盤避免遮擋(教程含源碼)

實戰需求 TextField最大的問題就是鍵盤遮擋bug，xcode12 beta3的更新給我們帶來了新特效。現在 TextField開始支持自動適應鍵盤避免遮擋。本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能簡單方式實現自動適應鍵盤支持點擊空白處隱藏鍵盤代碼 1、原生實現方法...

SwiftUI官方教程解讀

原文鏈接：https://www.jianshu.com/p/ecfdbea7a0ed SwiftUI簡介 SwiftUI是wwdc2019發布的一個新的UI框架，通過聲明和修改視圖來布局UI和創建流暢的動畫效果。并且我們可以通過狀態變量來進行數據綁定實現一次性布局；Xcode 11 內建了直觀的新設計工具canvus，在整個開發過程中，預覽可視化與代碼可編輯性能同時支持并交互，讓我們可以體驗到代...

SwiftUI 官方教程（十）

由于 API 變動，此文章部分內容已失效，最新完整中文教程及代碼請查看 https://github.com/WillieWangWei/SwiftUI-Tutorials 創建 watchOS App 本教程為你提供一個將你已經學到的關于 SwiftUI 的知識應用到自己的產品上的機會，并且不費吹灰之力就可以將 Landmarks app 遷移到 watchOS 上。首先，給項目添加一個 wa...

SwiftUI TextField和Form實現輸入完成后自動跳轉到下個輸入框

本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能用form搭建注冊界面實現從一個輸入框自動切換到下一個textfield 用變量控制鍵盤的彈出與關閉掌握@State 使用掌握@Binding 的使用代碼 1、主界面...