文字框的建立和設定
文字框作為一個接收使用者輸入的元件，被廣泛應用於表單建立、即時通訊、搜尋等場景中。
Flutter 提供了兩個開箱即用的文字框元件：
TextField 和 TextFormField。
文字框
TextField 是最常用的文字輸入元件。
TextField 元件的預設樣式是帶有下劃線的裝飾樣式。如果需要自定義裝飾樣式（新增標籤、圖示、提示文字和錯誤文字），可以將 InputDecoration 應用到 TextField 的 decoration 屬性上。如果需要完全移除下劃線和標籤預留空間，可以將 decoration 屬性設定為 null。
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),要在內容發生變化時收到此內容，請參見 回應文字框內容的更改。
表單文字框
TextFormField 內部封裝了一個 TextField
並被整合在表單元件 Form 中。如果需要對文字輸入進行驗證或者需要與其他表單元件 FormField 互動聯動，可以考慮使用 TextFormField。
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),Interactive example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Form Styling Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatelessWidget {
const MyCustomForm({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
),
],
);
}
}檢視章節 建立一個有驗證判斷的表單 獲取更多關於輸入驗證的內容。