【Flutter 學習筆記】🎬 教學影片：連結
【Flutter 學習筆記】📚 文章目錄：連結
今天我們將一起探索 Flutter 中的 TextField 文字輸入框元件。這個元件讓使用者能夠方便地輸入文字，無論是用於表單、搜尋框還是其他互動功能。
在開始之前，如果你還沒有看過我們之前的課程，建議你先回去複習，這樣會對今天的內容有更好的理解。上一次我們介紹了 ElevatedButton 按鈕元件，今天我們將重點放在 TextField 上。
基本用法
首先，我們來看看如何在 Flutter 中使用 TextField。以下是我們的基本範例：@override
Widget build(BuildContext context) {
return Center(
child: TextField(
decoration: InputDecoration(
labelText: '請輸入文字',
),
onChanged: (value) {
print(value);
},
),
);
}
逐步解析
- Center Widget： 我們使用
Center元件來將 TextField 放置在畫面的中央。這樣可以讓 UI 更加美觀，並且提升使用者體驗。 - TextField Widget： 在
Center的child參數中，我們加入了TextField元件。這是我們的主要輸入框，讓使用者可以在這裡輸入文字。 - Decoration 屬性：
decoration屬性用來設定輸入框的外觀。我們使用InputDecoration來進一步自訂這個外觀。在這裡，我們設定了labelText，這是顯示在輸入框上方的提示文字，告訴使用者可以在這裡輸入什麼。 - onChanged 屬性：
onChanged屬性是一個回調函數，當使用者輸入文字時會被觸發。我們在這裡傳入一個匿名函數，這個函數接收一個參數value，它代表使用者當前輸入的文字。透過print(value)，我們可以在偵錯主控台中看到使用者的輸入。
Hot Reload 功能
當我們完成程式碼的編寫後，使用快捷鍵存檔，Flutter 的 Hot Reload 功能會自動更新畫面。這樣我們就能立即看到效果，並且在輸入框上方會顯示「請輸入文字」的標籤。
總結
以上就是 TextField 文字輸入框元件的基本用法。透過這個元件，我們可以輕鬆地讓使用者輸入文字，並即時獲取他們的輸入內容。
