【Flutter 學習筆記】TextField 文字輸入框元件

【Flutter 學習筆記】🎬 教學影片：連結

【Flutter 學習筆記】📚 文章目錄：連結

今天我們將一起探索 Flutter 中的 TextField 文字輸入框元件。這個元件讓使用者能夠方便地輸入文字，無論是用於表單、搜尋框還是其他互動功能。

在開始之前，如果你還沒有看過我們之前的課程，建議你先回去複習，這樣會對今天的內容有更好的理解。上一次我們介紹了 ElevatedButton 按鈕元件，今天我們將重點放在 TextField 上。

基本用法

首先，我們來看看如何在 Flutter 中使用 TextField。以下是我們的基本範例：

@override
Widget build(BuildContext context) {
  return Center(
    child: TextField(
      decoration: InputDecoration(
        labelText: '請輸入文字',
      ),
      onChanged: (value) {
        print(value);
      },
    ),
  );
}

逐步解析

1. Center Widget： 我們使用 Center 元件來將 TextField 放置在畫面的中央。這樣可以讓 UI 更加美觀，並且提升使用者體驗。
2. TextField Widget： 在 Center 的 child 參數中，我們加入了 TextField 元件。這是我們的主要輸入框，讓使用者可以在這裡輸入文字。
3. Decoration 屬性： decoration 屬性用來設定輸入框的外觀。我們使用 InputDecoration 來進一步自訂這個外觀。在這裡，我們設定了 labelText，這是顯示在輸入框上方的提示文字，告訴使用者可以在這裡輸入什麼。
4. onChanged 屬性： onChanged 屬性是一個回調函數，當使用者輸入文字時會被觸發。我們在這裡傳入一個匿名函數，這個函數接收一個參數 value，它代表使用者當前輸入的文字。透過 print(value)，我們可以在偵錯主控台中看到使用者的輸入。

Hot Reload 功能

當我們完成程式碼的編寫後，使用快捷鍵存檔，Flutter 的 Hot Reload 功能會自動更新畫面。這樣我們就能立即看到效果，並且在輸入框上方會顯示「請輸入文字」的標籤。

總結

以上就是 TextField 文字輸入框元件的基本用法。透過這個元件，我們可以輕鬆地讓使用者輸入文字，並即時獲取他們的輸入內容。