建立文字欄位並設定樣式

文字欄位允許使用者在應用程式中輸入文字。它們用於建立表單、傳送訊息、建立搜尋體驗等等。在此食譜中，探索如何建立和樣式化文字欄位。

Flutter 提供兩個文字欄位：TextField 和 TextFormField。

TextField 是最常用的文字輸入 Widget。

預設情況下，TextField 會以底線裝飾。您可以透過提供 InputDecoration 作為 TextField 的 decoration 屬性，來新增標籤、圖示、內嵌提示文字和錯誤文字。若要完全移除裝飾 (包括底線和為標籤保留的空間)，請將 decoration 設定為 null。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),

若要在值變更時擷取它，請參閱處理文字欄位的變更食譜。

TextFormField 包裹了 TextField 並將其與封閉的 Form 整合。這提供了額外的功能，例如驗證和與其他 FormField Widget 的整合。

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

有關輸入驗證的更多資訊，請參閱建立具有驗證的表單食譜。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-06-26。 檢視原始碼 或 回報問題。