Flutter开发中如何实现不同页面间TextField内容的传递

核心思路 #

通过TextEditingController获取每个TextField的输入值，跳转路由时将所有值作为参数传递给目标页面，目标页面接收参数后直接绑定到Text组件展示即可。

完整实现示例 #

第一步：编写输入页 #

import 'package:flutter/material.dart';
import 'display_page.dart'; // 引入后面要写的展示页

class InputPage extends StatefulWidget {
  const InputPage({super.key});

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  // 给每个TextField创建独立的控制器
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _ageController = TextEditingController();
  final TextEditingController _descController = TextEditingController();

  @override
  void dispose() {
    // 页面销毁时释放控制器，避免内存泄漏
    _nameController.dispose();
    _ageController.dispose();
    _descController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("信息输入页")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(labelText: "请输入用户名"),
            ),
            TextField(
              controller: _ageController,
              decoration: const InputDecoration(labelText: "请输入年龄"),
              keyboardType: TextInputType.number,
            ),
            TextField(
              controller: _descController,
              decoration: const InputDecoration(labelText: "请输入个人简介"),
              maxLines: 3,
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                // 点击提交时获取所有输入值，跳转到展示页并传参
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => DisplayPage(
                      // 依次传递每个输入值
                      name: _nameController.text,
                      age: _ageController.text,
                      desc: _descController.text,
                    ),
                  ),
                );
              },
              child: const Text("提交并跳转到展示页"),
            )
          ],
        ),
      ),
    );
  }
}

第二步：编写展示页（新建display_page.dart） #

import 'package:flutter/material.dart';

class DisplayPage extends StatelessWidget {
  // 定义要接收的参数，和输入页传递的参数一一对应
  final String name;
  final String age;
  final String desc;

  // 构造方法接收参数
  const DisplayPage({
    super.key,
    required this.name,
    required this.age,
    required this.desc,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("信息展示页")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 直接将参数绑定到Text组件展示
            Text("用户名：$name", style: const TextStyle(fontSize: 16)),
            const SizedBox(height: 10),
            Text("年龄：$age", style: const TextStyle(fontSize: 16)),
            const SizedBox(height: 10),
            Text("个人简介：$desc", style: const TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }
}

可选优化方案（字段较多时使用） #

如果表单字段超过5个，建议使用Form组件统一管理所有输入项：

• 用GlobalKey<FormState>绑定Form组件
• 所有输入项改用TextFormField，在onSaved回调中赋值给对应变量
• 提交时调用formKey.currentState?.save()即可一次性获取所有表单值，无需单独创建多个TextEditingController。

内容的提问来源于stack exchange，提问作者Learning Code