Flutter TextField返回主页文本丢失，点击ElevatedButton可保留问题求助

问题根源 #

你遇到的差异是页面生命周期导致的：

• 点击返回键（Navigator.pop）回到主页时，BookRead页面的State会被完全销毁，再次进入时会创建全新的_BookReadState实例，之前的TextEditingController也会重新初始化，所以输入的文本丢失。
• 用Navigator.push跳转到AddTaskScreen时，BookRead页面只是被压入导航栈下层，其State仍保存在内存中，返回时不会重建，因此输入的文本得以保留。

解决方案 #

下面提供两种适合新手的解决方式：

方式一：状态提升到父组件（推荐，符合Flutter状态管理最佳实践）

把TextField的文本状态放到主页（父组件）中，通过构造函数传递给BookRead，同时通过回调更新父组件的状态。这样即使BookRead页面销毁，状态依然保存在父组件里，再次进入时可以恢复。

修改后的核心代码示例：

// 主页（父组件）示例
class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _savedText = ''; // 保存TextField的文本

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('主页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 跳转并接收返回的文本
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => BookRead('阅读页', initialText: _savedText)),
            );
            if (result != null) {
              setState(() {
                _savedText = result;
              });
            }
          },
          child: Text('进入阅读页'),
        ),
      ),
    );
  }
}

// 修改后的BookRead组件
class BookRead extends StatefulWidget {
  final String nameScreen;
  final String initialText; // 接收初始文本

  BookRead(this.nameScreen, {required this.initialText});

  @override
  State<BookRead> createState() => _BookReadState();
}

class _BookReadState extends State<BookRead> {
  late final TextEditingController controllerT;

  @override
  void initState() {
    super.initState();
    // 用初始文本初始化控制器
    controllerT = TextEditingController(text: widget.initialText);
  }

  @override
  void dispose() {
    controllerT.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.nameScreen)),
        // 返回时把当前文本传递给父组件
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context, controllerT.text);
          },
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: TextField(
              controller: controllerT,
              maxLines: null,
              expands: true,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AddTaskScreen()),
              );
            },
            child: Text('test'),
          ),
        ],
      ),
    );
  }
}

class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('test')),
      body: Column(children: [Expanded(child: Container())]),
    );
  }
}

方式二：使用PageStorage自动保存状态

Flutter的PageStorage可以自动保存页面的临时状态，适合快速实现输入内容保留：

class _BookReadState extends State<BookRead> {
  // 使用PageStorageKey绑定TextField的状态
  final _textFieldKey = PageStorageKey<String>('book_read_text');
  final controllerT = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.nameScreen)),
      ),
      body: Column(
        children: [
          Expanded(
            child: TextField(
              key: _textFieldKey, // 绑定PageStorageKey
              controller: controllerT,
              maxLines: null,
              expands: true,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AddTaskScreen()),
              );
            },
            child: Text('test'),
          ),
        ],
      ),
    );
  }
}

注意：PageStorage保存的状态是临时的，当APP被杀死后会丢失，如果需要长期保存，需要使用SharedPreferences等本地持久化方案。

内容的提问来源于stack exchange，提问作者Kitti Alise 3