建立和設定文字欄位樣式

文字欄位允許使用者在應用程式中輸入文字。它們用於構建表單、傳送訊息、建立搜尋體驗等等。在本教程中，您將學習如何建立和樣式化文字欄位。

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

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