Compose返回时重置页面状态、前进时保留的两种实现方案问询

我的应用包含QueryScreen、BookListScreen、BookDetailsScreen三个页面，每个页面的UiState由ViewModel统一管理，通过NavHost实现页面导航。应用运行逻辑如下：

• QueryScreen：输入书籍搜索词并点击搜索，调用ViewModel的searchBooks()方法从服务器获取书籍列表，随后导航至BookListScreen；
• BookListScreen：展示获取到的书籍列表，用户点击书籍时调用ViewModel的searchBook()方法获取该书籍详情，随后导航至BookDetailsScreen；
• BookDetailsScreen：展示已获取的书籍详情。

当前前进导航时状态更新正常，但回退导航存在状态重置需求：

• 从BookDetailsScreen回退到BookListScreen时，需将BookDetailsUiState中的book置为null；
• 从BookListScreen回退到QueryScreen时，需将BookListUiState中的books置为空列表。

如果应用扩展到20个页面，逐个设置标记跟踪导航方向过于繁琐，现提供两种高效的实现方案。

状态类定义 #

data class QueryUiState(
    val query: String = "",
    val isFetchingBooks: Boolean = false,
    val errorMessage: String? = null
)
data class BookListUiState(
    val books: List<Book> = emptyList(),
    val isFetchingBook: Boolean = false,
    val errorMessage: String? = null,
    val selectedBook: Book? = null
)
data class BookDetailsUiState(
    val book: Book? = null
)

页面导航实现 #

object BookshelfDestinations {
    const val QUERY_ROUTE = "query"
    const val BOOK_LIST_ROUTE = "bookList"
    const val BOOK_DETAILS_ROUTE = "bookDetails"
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BookshelfApp(
    appContainer: AppContainer,
    navController: NavHostController = rememberNavController(),
    modifier: Modifier = Modifier
) {
    Scaffold { innerPadding ->
        BookshelfNavHost(
            appContainer = appContainer,
            navController = navController,
            modifier = modifier.padding(innerPadding)
        )
    }
}

@Composable
fun BookshelfNavHost(
    appContainer: AppContainer,
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    val viewModel: AppViewModel =
        viewModel(factory = AppViewModel.AppViewModelFactory(appContainer.bookshelfRepository))

    NavHost(
        navController = navController,
        startDestination = BookshelfDestinations.QUERY_ROUTE,
        modifier = modifier
    ) {
        composable(route = BookshelfDestinations.QUERY_ROUTE) {
            QueryScreen(
                viewModel = viewModel,
                onSearch = {
                    navController.navigate(BookshelfDestinations.BOOK_LIST_ROUTE)
                }
            )
        }
        composable(route = BookshelfDestinations.BOOK_LIST_ROUTE) {
            BookListScreen(
                viewModel = viewModel,
                onBookClicked = {
                    navController.navigate(BookshelfDestinations.BOOK_DETAILS_ROUTE)
                }
            )
        }
        composable(route = BookshelfDestinations.BOOK_DETAILS_ROUTE) {
            BookDetailsScreen(
                viewModel = viewModel
            )
        }
    }
}

ViewModel实现 #

class AppViewModel(private val repository: BookshelfRepository) : ViewModel() {
    private val _queryUiState = MutableStateFlow(QueryUiState())
    val queryUiState: StateFlow<QueryUiState> = _queryUiState.asStateFlow()

    private val _bookListUiState = MutableStateFlow(BookListUiState())
    val bookListUiState: StateFlow<BookListUiState> = _bookListUiState.asStateFlow()

    private val _bookDetailsUiState = MutableStateFlow(BookDetailsUiState())
    val bookDetailsUiState: StateFlow<BookDetailsUiState> = _bookDetailsUiState.asStateFlow()

    init {
        Log.d("AppViewModel", "App view model initialized!")
    }

    fun onQueryChanged(query: String) {
        _queryUiState.value = _queryUiState.value.copy(query = query)
    }

    fun onBookSelected(book: Book) {
        _bookListUiState.value = _bookListUiState.value.copy(selectedBook = book)
        searchBook()
    }

    fun searchBooks() {
        viewModelScope.launch {
            _queryUiState.value = _queryUiState.value.copy(isFetchingBooks = true)
            try {
                val result = repository.getBooks(_queryUiState.value.query)
                when(result) {
                    is BookshelfResult.Success -> {
                        _bookListUiState.value = _bookListUiState.value.copy(books = result.data)
                    }
                    is BookshelfResult.Error -> {
                        _queryUiState.value = _queryUiState.value.copy(errorMessage = result.exception.message)
                    }
                }
            } catch (e: Exception) {
                _queryUiState.value = _queryUiState.value.copy(errorMessage = e.message)
            } finally {
                _queryUiState.value = _queryUiState.value.copy(isFetchingBooks = false)
            }
        }
    }

    fun searchBook() {
        viewModelScope.launch {
            _bookListUiState.value = _bookListUiState.value.copy(isFetchingBook = true)
            try {
                val result = repository.getBook(_bookListUiState.value.selectedBook!!.id)
                when(result) {
                    is BookshelfResult.Success -> {
                        _bookDetailsUiState.value = _bookDetailsUiState.value.copy(book = result.data)
                    }
                    is BookshelfResult.Error -> {
                        _bookListUiState.value = _bookListUiState.value.copy(errorMessage = result.exception.message)
                    }
                }
            } catch (e: Exception) {
                _bookListUiState.value = _bookListUiState.value.copy(errorMessage = e.message)
            } finally {
                _bookListUiState.value = _bookListUiState.value.copy(isFetchingBook = false)
            }
        }
    }

    class AppViewModelFactory(private val appRepository: BookshelfRepository) :
        ViewModelProvider.Factory {
        override fun <T : ViewModel> create(modelClass: Class<T>): T {
            if (modelClass.isAssignableFrom(AppViewModel::class.java)) {
                @Suppress("UNCHECKED_CAST")
                return AppViewModel(appRepository) as T
            }
            throw IllegalArgumentException("Unknown ViewModel class")
        }
    }
}

方案一：利用NavController的BackStackEntry生命周期自动重置状态 #

通过监听页面BackStackEntry的生命周期，当页面从RESUMED变为DESTROYED时（即回退离开该页面），触发对应状态的重置逻辑。

实现步骤 #

1. 在BookshelfNavHost中，为每个页面的composable添加BackStackEntry监听；
2. 在ViewModel中添加对应状态的重置方法；

修改后的BookshelfNavHost关键代码

@Composable
fun BookshelfNavHost(
    appContainer: AppContainer,
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    val viewModel: AppViewModel =
        viewModel(factory = AppViewModel.AppViewModelFactory(appContainer.bookshelfRepository))

    NavHost(
        navController = navController,
        startDestination = BookshelfDestinations.QUERY_ROUTE,
        modifier = modifier
    ) {
        composable(route = BookshelfDestinations.QUERY_ROUTE) {
            // 监听回退到Query页面时，重置BookList状态
            DisposableEffect(navController) {
                val callback = object : NavController.OnDestinationChangedListener {
                    override fun onDestinationChanged(
                        controller: NavHostController,
                        destination: NavDestination,
                        arguments: Bundle?
                    ) {
                        if (destination.route == BookshelfDestinations.QUERY_ROUTE) {
                            viewModel.resetBookListUiState()
                        }
                    }
                }
                navController.addOnDestinationChangedListener(callback)
                onDispose { navController.removeOnDestinationChangedListener(callback) }
            }
            QueryScreen(
                viewModel = viewModel,
                onSearch = {
                    navController.navigate(BookshelfDestinations.BOOK_LIST_ROUTE)
                }
            )
        }
        composable(route = BookshelfDestinations.BOOK_LIST_ROUTE) {
            // 监听回退到BookList页面时，重置BookDetails状态
            DisposableEffect(navController) {
                val callback = object : NavController.OnDestinationChangedListener {
                    override fun onDestinationChanged(
                        controller: NavHostController,
                        destination: NavDestination,
                        arguments: Bundle?
                    ) {
                        if (destination.route == BookshelfDestinations.BOOK_LIST_ROUTE) {
                            viewModel.resetBookDetailsUiState()
                        }
                    }
                }
                navController.addOnDestinationChangedListener(callback)
                onDispose { navController.removeOnDestinationChangedListener(callback) }
            }
            BookListScreen(
                viewModel = viewModel,
                onBookClicked = {
                    navController.navigate(BookshelfDestinations.BOOK_DETAILS_ROUTE)
                }
            )
        }
        composable(route = BookshelfDestinations.BOOK_DETAILS_ROUTE) {
            BookDetailsScreen(
                viewModel = viewModel
            )
        }
    }
}

ViewModel中添加重置方法

fun resetBookListUiState() {
    _bookListUiState.value = BookListUiState()
}

fun resetBookDetailsUiState() {
    _bookDetailsUiState.value = BookDetailsUiState()
}

优势 #

• 无需手动跟踪导航动作，完全依赖Jetpack Navigation的原生机制；
• 扩展性强，新增页面时只需添加对应监听和重置方法，逻辑清晰。

方案二：按导航层级划分状态容器+自动重置规则 #

将状态按导航流程的层级分组，当导航回退到上一层级时，自动重置下一层级的所有状态。

实现步骤 #

1. 在ViewModel中定义导航层级枚举，对应不同的页面组；
2. 维护当前活跃的导航层级状态；
3. 当导航层级变化时，自动触发对应状态的重置；

修改后的AppViewModel关键代码

class AppViewModel(private val repository: BookshelfRepository) : ViewModel() {
    // 定义导航层级
    enum class NavigationLevel {
        QUERY, BOOK_LIST, BOOK_DETAILS
    }

    private val _currentLevel = MutableStateFlow(NavigationLevel.QUERY)
    val currentLevel: StateFlow<NavigationLevel> = _currentLevel.asStateFlow()

    // ... 原有状态定义及方法

    // 更新当前层级并触发状态重置
    fun updateNavigationLevel(level: NavigationLevel) {
        val previousLevel = _currentLevel.value
        _currentLevel.value = level
        
        // 根据层级变化自动重置状态
        when {
            level == NavigationLevel.BOOK_LIST && previousLevel == NavigationLevel.BOOK_DETAILS -> {
                resetBookDetailsUiState()
            }
            level == NavigationLevel.QUERY && previousLevel == NavigationLevel.BOOK_LIST -> {
                resetBookListUiState()
            }
        }
    }

    // ... 重置方法同方案一
}

修改后的BookshelfNavHost代码

composable(route = BookshelfDestinations.QUERY_ROUTE) {
    viewModel.updateNavigationLevel(AppViewModel.NavigationLevel.QUERY)
    QueryScreen(
        viewModel = viewModel,
        onSearch = {
            navController.navigate(BookshelfDestinations.BOOK_LIST_ROUTE)
        }
    )
}
composable(route = BookshelfDestinations.BOOK_LIST_ROUTE) {
    viewModel.updateNavigationLevel(AppViewModel.NavigationLevel.BOOK_LIST)
    BookListScreen(
        viewModel = viewModel,
        onBookClicked = {
            navController.navigate(BookshelfDestinations.BOOK_DETAILS_ROUTE)
        }
    )
}
composable(route = BookshelfDestinations.BOOK_DETAILS_ROUTE) {
    viewModel.updateNavigationLevel(AppViewModel.NavigationLevel.BOOK_DETAILS)
    BookDetailsScreen(
        viewModel = viewModel
    )
}

优势 #

• 将状态重置逻辑集中在ViewModel中，导航组件只需负责更新层级；
• 适合复杂导航结构，层级关系清晰，新增页面时只需扩展枚举和重置规则。

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