Flutter PageController切换页面后数据丢失，如何持久化输入内容？

问题根源 #

1. PageView默认会销毁非当前显示页面的State，导致页面重建时数据被重置
2. 当前代码仅在选择图片时保存部分数据，未实时保存输入内容，也未在页面初始化时恢复已保存的数据

解决方案 #

1. 让页面保持状态（避免被销毁）

给State类混入AutomaticKeepAliveClientMixin，阻止PageView销毁页面State：

class _AAddTitleComponentState extends State<AAddTitleComponent>
    with WidgetsBindingObserver, AutomaticKeepAliveClientMixin { // 添加混入

  // 重写该方法，返回true表示保持页面状态
  @override
  bool get wantKeepAlive => true;

  // ... 原有代码
}

同时在build方法中必须调用super.build(context)：

@override
Widget build(BuildContext context) {
  super.build(context); // 必须调用，否则状态保持不生效
  return Scaffold(
    // 你的页面布局代码
    body: Column(
      children: [
        // ... 原有布局内容
      ],
    ),
  );
}

2. 实时保存+初始化恢复数据

修改初始化逻辑，从SharedPreferences加载已保存的数据；同时监听输入框变化，实时保存内容：

@override
void initState() {
  super.initState();
  _loadSavedData(); // 初始化时加载保存的数据
}

// 加载已保存的数据
Future<void> _loadSavedData() async {
  final sharedPreferences = await SharedPreferences.getInstance();
  
  // 恢复标题输入框内容
  final savedTitle = sharedPreferences.getString('vehicleTitleInfo') ?? '';
  vehicleTitleTextEditingController = TextEditingController(text: savedTitle);
  
  // 恢复图片路径
  final savedImagePath = sharedPreferences.getString('image');
  if (savedImagePath != null && savedImagePath.isNotEmpty) {
    setState(() {
      image = File(savedImagePath);
    });
  }
  
  // 添加输入框监听，实时保存内容
  vehicleTitleTextEditingController.addListener(_saveTitle);
}

// 实时保存标题输入内容
Future<void> _saveTitle() async {
  final sharedPreferences = await SharedPreferences.getInstance();
  await sharedPreferences.setString('vehicleTitleInfo', vehicleTitleTextEditingController.text);
}

// 修复选择图片后的保存逻辑（保存实际图片路径）
Future pickImage(ImageSource source) async {
  try {
    final pickedImage = await ImagePicker().pickImage(source: source);
    if (pickedImage == null) return;
    
    final imageTemp = File(pickedImage.path);
    setState(() => this.image = imageTemp);
    
    // 保存图片路径到本地
    final sharedPreferences = await SharedPreferences.getInstance();
    await sharedPreferences.setString('image', imageTemp.path);
  } on PlatformException catch (e) {
    print('Kein Bild ausgewählt $e');
  }
}

// 页面销毁时移除监听，避免内存泄漏
@override
void dispose() {
  vehicleTitleTextEditingController.removeListener(_saveTitle);
  vehicleTitleTextEditingController.dispose();
  vehiclePSDescriptionTextEditingController.dispose();
  super.dispose();
}

3. 移除无效代码

删除initState中重复初始化controller的代码（原代码中在类顶部已初始化，initState又重新赋值，会清空之前的内容）：

// 删掉这行
// vehicleTitleTextEditingController = TextEditingController();

额外说明 #

• AutomaticKeepAliveClientMixin用于让PageView中的页面保持状态，不会被销毁
• 实时保存+初始化恢复的逻辑，即使页面意外重建（比如内存不足被回收），也能从本地存储恢复数据
• 注意在dispose时移除controller的监听，避免内存泄漏

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