SwiftUI - 文字輸入和輸出

---

---

使用者輸入和輸出是使用者介面的基本概念。它是使用者與應用程式互動的主要方式。使用者輸入是使用者採取的操作，透過該操作使用者嚮應用程式提供資料。

相反，使用者輸出是應用程式向用戶提供的反饋或資訊。SwiftUI 非常容易處理文字輸入和輸出。它只需要三個主要元件來獲取使用者輸入和輸出以及這些元件。讓我們逐一瞭解它們。

狀態管理

它用於在檢視中儲存使用者輸入。如果狀態變數發生任何更改，它將自動更新使用者介面。

語法

以下是語法：

@State private var userData: String = ""

TextField

它允許使用者輸入資料。預設情況下，它沒有任何邊框，因此在預覽中您將看不到任何內容。您需要點選佔位符文字顯示的位置以啟用鍵盤。

語法

以下是語法：

TextField("text", text:$bindingVariable)

引數

此函式接受以下引數：

• text: 當欄位為空時顯示的佔位符文字。
• $bindingVariable 它將文字欄位連線到狀態變數。

Text

它用於顯示輸入的資料。

語法

以下是語法：

Text("text:\(userData)")

它顯示“userData”的值。如果 userData 的值發生更改，則顯示的文字將自動更改。

注意：在使用 TextField 時，您將無法在預覽佈局中鍵入。因此，要輸入資料，您需要透過按cmd + R在模擬器中構建並執行您的程式碼。

示例 1

以下 SwiftUI 程式用於建立一個簡單的文字欄位，該欄位接收使用者輸入並顯示輸出。

import SwiftUI

struct ContentView: View {
   @State private var userData: String = ""
   var body: some View {
      VStack{
         TextField("Enter data", text: $userData)
         Text("Entered data: \(userData)")
      }      
   }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於從使用者那裡獲取資料並顯示輸入的資料。

import SwiftUI

struct ContentView: View {
   @State private var inputData: String = ""
   var body: some View {
      VStack{            
         // For input
         TextField("Write here...", text: $inputData)
            .padding(10)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .frame(width: 250)
            .font(.largeTitle)
            .background(.mint)
         
         // For output
         Text("Output: \(inputData)").font(.title)
        }
    }
}
#Preview {
    ContentView()
}

輸出