如何在Flutter中读取输入组件数据并在Dialog中展示验证？

我来帮你搞定这个问题！要读取输入组件的数据并在Dialog里验证，核心是用TextEditingController来绑定输入框，然后在按钮回调里获取内容并弹窗展示。下面是具体的实现步骤和完整代码：

核心思路 #

• 为每个输入框创建TextEditingController，用来监听和获取输入内容
• 在IconButton的onPressed回调中，通过控制器的text属性拿到输入值
• 调用showDialog方法弹出对话框，把读取到的数据展示出来
• 记得在页面销毁时释放控制器，避免内存泄漏

完整代码示例 #

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '输入数据验证',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const InputFormPage(),
    );
  }
}

// 改用StatefulWidget来管理控制器状态
class InputFormPage extends StatefulWidget {
  const InputFormPage({super.key});

  @override
  State<InputFormPage> createState() => _InputFormPageState();
}

class _InputFormPageState extends State<InputFormPage> {
  // 为每个输入框创建控制器
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _birthdayController = TextEditingController();
  final TextEditingController _phoneController = TextEditingController();

  @override
  void dispose() {
    // 页面销毁时释放控制器资源
    _nameController.dispose();
    _birthdayController.dispose();
    _phoneController.dispose();
    super.dispose();
  }

  // 读取数据并弹出Dialog的方法
  void _showInputData() {
    // 获取输入内容
    String name = _nameController.text.trim();
    String birthday = _birthdayController.text.trim();
    String phone = _phoneController.text.trim();

    // 弹出Dialog展示数据
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('已读取的输入数据'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('姓名：$name'),
            const SizedBox(height: 8),
            Text('生日：$birthday'),
            const SizedBox(height: 8),
            Text('电话：$phone'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确定'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('输入表单'),
        // 在AppBar添加IconButton
        actions: [
          IconButton(
            icon: const Icon(Icons.check),
            onPressed: _showInputData, // 绑定回调方法
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 姓名输入框
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(
                labelText: '请输入姓名',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            // 生日输入框
            TextField(
              controller: _birthdayController,
              decoration: const InputDecoration(
                labelText: '请输入生日（如2000-01-01）',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            // 电话输入框
            TextField(
              controller: _phoneController,
              decoration: const InputDecoration(
                labelText: '请输入电话',
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.phone,
            ),
          ],
        ),
      ),
    );
  }
}

关键部分解释 #

1. 控制器创建与绑定：每个TextField都绑定了对应的TextEditingController，这样就能实时获取输入内容。
2. 读取数据逻辑：在_showInputData方法里，通过controller.text拿到输入值，用trim()去掉前后空格更严谨。
3. Dialog展示：用showDialog创建AlertDialog，把读取到的姓名、生日等数据通过Text组件展示出来。
4. 资源释放：在dispose方法里释放所有控制器，这是Flutter状态管理的最佳实践，避免内存泄漏。

你可以把这段代码替换原来的部分，运行后输入内容，点击右上角的检查图标，就能看到弹出的Dialog里显示你输入的所有数据啦！

内容的提问来源于stack exchange，提问作者Hasan A Yousef