Flutter页面回退再返回后如何保留TextField中的文本

问题核心原因是：每次从Screen1跳转到Screen2时，都会创建一个全新的SecondPage实例，其内部的TextEditingController也会重新初始化，导致之前输入的文本无法保留。

下面提供两种简单有效的解决思路：

方法一：父页面持有控制器（推荐） #

将TextEditingController的实例放在Screen1中，通过构造函数传递给Screen2，让控制器的生命周期和父页面绑定，避免因Screen2销毁丢失数据。

修改后的Screen1代码： #

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();

  void _nextPage() {
    Navigator.push(
      context,
      // 传递控制器给SecondPage
      MaterialPageRoute(builder: (context) => SecondPage(controller: controller)),
    );
  }

  @override
  void dispose() {
    // 页面销毁时清理控制器，避免内存泄漏
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const SizedBox.shrink(),
      floatingActionButton: FloatingActionButton(
        onPressed: _nextPage,
        child: const Icon(Icons.add),
      ),
    );
  }
}

修改后的Screen2代码： #

class SecondPage extends StatefulWidget {
  // 接收父页面传递的控制器
  final TextEditingController controller;

  const SecondPage({super.key, required this.controller});

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      )),
      body: Center(
        // 使用父页面传来的控制器
        child: TextField(
          controller: widget.controller,
        ),
      ),
    );
  }
}

方法二：使用状态管理工具 #

如果页面结构复杂，或者需要跨多个页面共享文本状态，可以使用Provider、GetX等状态管理库，将文本状态抽离到全局或独立的状态类中，确保状态不会随页面销毁而丢失。

比如用Provider的简单示例：

1. 创建状态类：

class TextProvider extends ChangeNotifier {
  final TextEditingController controller = TextEditingController();
}

2. 在根节点注入：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TextProvider(),
      child: const MyApp(),
    ),
  );
}

3. 在Screen2中使用：

class _SecondPageState extends State<SecondPage> {
  late TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = Provider.of<TextProvider>(context, listen: false).controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      )),
      body: Center(
        child: TextField(
          controller: controller,
        ),
      ),
    );
  }
}

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