Contents

文本框的创建和设定

Contents

文本框作为一个接收用户输入的组件，被广泛应用于表单构建、即时通讯、搜索等场景中。

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

查看章节 构建一个有验证判断的表单 获取更多关于输入验证的内容。