建立和設定文字欄位樣式

文字欄位允許使用者在應用程式中鍵入文字。它們用於構建表單、傳送訊息、建立搜尋體驗等等。在本教程中，探索如何建立和設定文字欄位的樣式。

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(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),

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',
            ),
          ),
        ),
      ],
    );
  }
}

有關輸入驗證的更多資訊，請參閱 構建帶有驗證的表單 教程。