Jetpack Compose导航：返回后重新进入页面如何保留原有状态？

针对你遇到的Screen B返回后状态丢失的问题，以下是几种实用的解决方案，覆盖不同场景需求：

方案1：修改导航逻辑，避免弹出Screen B #

核心思路是不让Screen B从导航栈中移除，通过自定义返回逻辑回到Screen A，Screen B始终保留在栈内，后续返回时直接恢复原状态。

实现示例（Flutter） #

拦截Screen B的系统返回键，替换为回到Screen A的逻辑（避免重复入栈）：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      // 查找栈中已存在的ScreenA实例，直接跳转过去
      bool hasScreenA = false;
      Navigator.popUntil(context, (route) {
        if (route.settings.name == 'ScreenA') {
          hasScreenA = true;
          return true;
        }
        return false;
      });
      // 栈中无ScreenA时再push新实例
      if (!hasScreenA) {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ScreenA(),
            settings: const RouteSettings(name: 'ScreenA'),
          ),
        );
      }
      return false; // 阻止默认pop操作
    },
    child: Scaffold(
      // Screen B的页面内容
    ),
  );
}

完成Screen A的操作后，调用Navigator.pop(context)即可回到保留原状态的Screen B。

实现示例（Android原生） #

在Screen B的onBackPressed()中拦截返回事件，将已存在的Screen A移到栈顶：

override fun onBackPressed() {
    val intent = Intent(this, ScreenA::class.java)
    intent.flags = Intent.FLAG_ACTIVITY_REORDER_TO_FRONT
    startActivity(intent)
}

Screen B不会被销毁，再次返回时直接恢复原状态。

方案2：状态持久化存储 #

如果必须弹出Screen B，可将Screen B的状态持久化到外部存储，再次进入时读取恢复。

实现示例（React Native + Pinia） #

1. 定义全局状态存储Screen B的状态：

// stores/screenBStore.js
import { defineStore } from 'pinia'
import AsyncStorage from '@react-native-async-storage/async-storage'

export const useScreenBStore = defineStore('screenB', {
  state: () => ({
    inputText: '',
    count: 0
  }),
  actions: {
    async saveState() {
      await AsyncStorage.setItem('screenBState', JSON.stringify(this.$state))
    },
    async loadState() {
      const saved = await AsyncStorage.getItem('screenBState')
      if (saved) this.$state = JSON.parse(saved)
    }
  }
})

2. 在Screen B中绑定状态并处理生命周期：

import { useScreenBStore } from '../stores/screenBStore'
import { useEffect } from 'react'

function ScreenB() {
  const store = useScreenBStore()

  useEffect(() => {
    store.loadState()
    return () => store.saveState()
  }, [])

  return (
    // Screen B的UI组件，绑定store中的inputText和count
  )
}

方案3：页面实例缓存 #

利用导航框架的页面缓存能力，保留Screen B的组件实例，再次进入时直接复用。

实现示例（React Native + react-navigation-keep-alive） #

1. 安装依赖并配置缓存：

import { createStackNavigator } from '@react-navigation/native-stack'
import { KeepAliveProvider, withKeepAlive } from 'react-navigation-keep-alive'
import ScreenA from './ScreenA'
import ScreenB from './ScreenB'

const Stack = createStackNavigator()
// 将ScreenB包裹为可缓存组件
const CachedScreenB = withKeepAlive(ScreenB, { id: 'ScreenB' })

function AppNavigator() {
  return (
    <KeepAliveProvider>
      <Stack.Navigator>
        <Stack.Screen name="ScreenA" component={ScreenA} />
        <Stack.Screen name="ScreenB" component={CachedScreenB} />
      </Stack.Navigator>
    </KeepAliveProvider>
  )
}

从Screen B返回Screen A时，Screen B的实例会被缓存，再次跳转时直接复用，本地状态完全保留。

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