Flutter求助：实现编辑文本持久化及编辑状态自动恢复

要解决你提到的两个问题，我们可以通过本地持久化存储保存编辑后的文本，同时切换输入框的可编辑状态并添加完成逻辑来实现需求。

步骤说明 #

1. 添加依赖：使用shared_preferences包实现本地数据持久化，在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

2. 修改代码逻辑：
   • 初始化时从本地读取保存的文本，没有则使用默认值
   • 切换编辑/完成状态，点击完成时保存文本并禁用输入框

完整代码 #

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isEnable = false;
  late TextEditingController _controller;
  final String _textKey = 'saved_leave_text'; // 存储用的唯一标识

  @override
  void initState() {
    super.initState();
    _loadSavedText(); // 初始化时读取本地存储的文本
  }

  // 从本地读取保存的文本
  Future<void> _loadSavedText() async {
    final prefs = await SharedPreferences.getInstance();
    String savedText = prefs.getString(_textKey) ?? "Festive Leave";
    _controller = TextEditingController(text: savedText);
    setState(() {});
  }

  // 保存文本到本地
  Future<void> _saveText() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(_textKey, _controller.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Container(
            width: 100,
            child: TextField(
              controller: _controller,
              enabled: _isEnable,
              // 可选：按回车时自动完成编辑
              onSubmitted: (value) {
                setState(() {
                  _isEnable = false;
                });
                _saveText();
              },
            ),
          ),
          IconButton(
            icon: Icon(_isEnable ? Icons.check : Icons.edit),
            onPressed: () {
              setState(() {
                if (_isEnable) {
                  // 当前是编辑状态，点击保存并禁用输入框
                  _saveText();
                  _isEnable = false;
                } else {
                  // 当前是不可编辑状态，点击进入编辑模式
                  _isEnable = true;
                }
              });
            },
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放控制器资源
    super.dispose();
  }
}

关键逻辑解释 #

• 持久化处理：通过SharedPreferences将文本保存在本地，应用重启时会优先读取本地存储的内容，代替默认初始值
• 状态切换：IconButton的图标会根据输入框状态自动切换（编辑时显示✅，未编辑时显示✏️），点击完成按钮时自动保存文本并禁用输入框
• 额外优化：添加了onSubmitted回调，用户按回车也能完成编辑，提升操作流畅度

内容的提问来源于stack exchange，提问作者JUSTIN N THAMPI