切换PageView页面时内容自动重置如何解决？仅需Navigator.pop时触发重置

1. 实现PageView滑动切换不丢失输入状态 #

PageView默认切换页面时会销毁旧的子组件，下次切回时重新构建，所以会导致输入内容丢失，要解决这个问题只需给子页面混入AutomaticKeepAliveClientMixin开启保活即可：

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

  @override
  State<BaseSettingsPage> createState() => _BaseSettingsPageState();
}

class _BaseSettingsPageState extends State<BaseSettingsPage> with AutomaticKeepAliveClientMixin {
  // 输入控制器示例
  final _usernameController = TextEditingController();

  // 重写该属性返回true开启页面保活
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用父类build方法
    super.build(context);
    return Column(
      children: [
        TextField(controller: _usernameController, decoration: const InputDecoration(labelText: "用户名")),
        // 其他设置项
      ],
    );
  }

  // 暴露重置方法供父组件调用
  void reset() {
    _usernameController.clear();
    // 其他输入内容、状态重置逻辑
  }
}

「时间设置」「高级设置」两个子页面也按照上述逻辑改造即可，滑动切换时页面不会被销毁，输入内容会完整保留。

2. 实现pop返回页面时才重置内容 #

我们可以通过路由监听触发重置逻辑，覆盖所有返回当前页面的场景：

1. 首先全局定义路由监听器，注册到MaterialApp中：

// 全局声明路由监听器
final RouteObserver<ModalRoute<void>> routeObserver = RouteObserver<ModalRoute<void>>();

// 注册到MaterialApp
MaterialApp(
  navigatorObservers: [routeObserver],
  // 其他原有配置
)

2. 在PageView所在的父页面订阅路由监听，触发重置：

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

  @override
  State<SettingsContainerPage> createState() => _SettingsContainerPageState();
}

class _SettingsContainerPageState extends State<SettingsContainerPage> with RouteAware {
  // 通过GlobalKey获取三个子页面的State实例
  final _baseSettingsKey = GlobalKey<_BaseSettingsPageState>();
  final _timeSettingsKey = GlobalKey<_TimeSettingsPageState>();
  final _advancedSettingsKey = GlobalKey<_AdvancedSettingsPageState>();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 订阅路由监听
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // 页面销毁时取消订阅
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  // 其他页面pop回到当前页面时触发该回调
  @override
  void didPopNext() {
    super.didPopNext();
    // 调用所有子页面的重置方法
    _baseSettingsKey.currentState?.reset();
    _timeSettingsKey.currentState?.reset();
    _advancedSettingsKey.currentState?.reset();
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        BaseSettingsPage(key: _baseSettingsKey),
        TimeSettingsPage(key: _timeSettingsKey),
        AdvancedSettingsPage(key: _advancedSettingsKey),
      ],
    );
  }
}

可选优化方案 #

如果设置项较多，可以把所有表单数据统一存在父组件或者状态管理库中，无需依赖页面保活，切换时直接从上层状态读取数据渲染，重置时直接清空上层存储的表单数据即可，可维护性更高。

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