创建和设置文本字段样式

文本字段允许用户在应用中输入文本。它们用于构建表单、发送消息、创建搜索体验等。在本篇菜谱中，我们将探讨如何创建和设置文本字段的样式。

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

有关输入验证的更多信息，请参阅 构建带验证的表单 菜谱。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-06-26。 查看源代码 或 报告问题.