获取文本字段的值

在这个示例中，学习如何通过以下步骤检索用户输入文本字段的文本：

1. 创建一个 TextEditingController。
2. 将 TextEditingController 提供给 TextField。
3. 显示文本字段的当前值。

要检索用户输入文本字段的文本，请创建一个 TextEditingController 并将其提供给 TextField 或 TextFormField。

// 定义一个自定义表单小部件。
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

// 定义相应的 State 类。
// 此类保存与表单相关的数据。
class _MyCustomFormState extends State<MyCustomForm> {
  // 创建一个文本控制器并使用它来检索 TextField 的当前值。
  final myController = TextEditingController();

  @override
  void dispose() {
    // 处置小部件时清理控制器。
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 在下一步中填写此内容。
  }
}

现在您有了 TextEditingController，请使用 controller 属性将其连接到文本字段：

return TextField(
  controller: myController,
);

将 TextEditingController 提供给文本字段后，开始读取值。使用 TextEditingController 提供的 text() 方法检索用户输入文本字段的字符串。

当用户点击浮动操作按钮时，以下代码将显示一个包含文本字段当前值的警报对话框。

FloatingActionButton(
  // 当用户按下按钮时，显示一个包含用户输入文本字段文本的警报对话框。
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          // 使用 TextEditingController 检索用户输入的文本。
          content: Text(myController.text),
        );
      },
    );
  },
  tooltip: 'Show me the value!',
  child: const Icon(Icons.text_fields),
),

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// 定义一个自定义表单小部件。
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

// 定义相应的 State 类。
// 此类保存与表单相关的数据。
class _MyCustomFormState extends State<MyCustomForm> {
  // 创建一个文本控制器并使用它来检索 TextField 的当前值。
  final myController = TextEditingController();

  @override
  void dispose() {
    // 处置小部件时清理控制器。
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 当用户按下按钮时，显示一个包含用户输入文本字段文本的警报对话框。
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // 使用 TextEditingController 检索用户输入的文本。
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。