Jetpack Compose中搜索图标切换页面后无法隐藏的问题

使用ViewPager搭配TopAppBar，期望进入SecondScreen时显示搜索图标，切换到FirstScreen时隐藏该图标。通过MainViewModel中的searchWidgetVisibility状态控制图标显示，但切换到FirstScreen后图标并未消失。

相关代码如下：

DefaultAppBar 代码 #

@Composable
fun DefaultAppBar(
                  mainViewModel: MainViewModel
) {
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
        TopAppBar(
            backgroundColor = Color.White
            ,
            title = {
                Text(text = "",
                    modifier = Modifier
                        .clickable { }
                        .padding(start = 160.dp)

                )
            },
            actions = {
                if(mainViewModel.searchWidgetVisibility.value) {
                    IconButton(
                        onClick = {  },
                        modifier = Modifier,

                        ) {
                        Icon(
                            imageVector = Icons.Filled.Search,
                            contentDescription = "Search Icon",
                            tint = Color.Black,
                            modifier = Modifier,

                            )
                    }
                }


            }
        )
    }

}

MainViewModel 代码 #

class MainViewModel:ViewModel() {

    private val _searchWidgetVisibility: MutableState<Boolean> = mutableStateOf(value = false)


    val searchWidgetVisibility: MutableState<Boolean> = _searchWidgetVisibility


    fun updateSearchWidgetVisibility(newValue:Boolean) {
        _searchWidgetVisibility.value = newValue
    }
}

页面代码 #

@Composable
fun SecondScreen(
    mainViewModel: MainViewModel
) {
    mainViewModel.updateSearchWidgetVisibility(true)
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = C2)
        ,
        contentAlignment = Alignment.Center
    ) {
        Text(text = "second screen")
    }
}

@Composable
fun FirstScreen(
    mainViewModel: MainViewModel
) {
    mainViewModel.updateSearchWidgetVisibility(false)
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = C2)
        ,
        contentAlignment = Alignment.Center
    ) {
        Text(text = "first screen")
    }
}

• Composable重组导致状态被重复覆盖：在FirstScreen和SecondScreen的根作用域直接调用updateSearchWidgetVisibility，每次Composable重组（比如ViewPager切换、父组件状态变化）都会执行这段代码。ViewPager通常会缓存前后页面，切换时被缓存的页面可能会发生重组，比如从SecondScreen切到FirstScreen，FirstScreen执行update(false)后，SecondScreen若因缓存触发重组，又会执行update(true)，把状态改回显示图标。
• ViewModel状态暴露不规范：将searchWidgetVisibility直接暴露为MutableState，虽然外部是通过方法更新，但不符合单向数据流原则，增加了状态被意外修改的风险。

1. 用LaunchedEffect触发状态更新：确保状态更新只在页面进入组合时执行一次，而非每次重组都执行。修改页面代码：

@Composable
fun FirstScreen(
    mainViewModel: MainViewModel
) {
    // 仅当FirstScreen进入组合时执行一次状态更新
    LaunchedEffect(Unit) {
        mainViewModel.updateSearchWidgetVisibility(false)
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = C2),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "first screen")
    }
}

@Composable
fun SecondScreen(
    mainViewModel: MainViewModel
) {
    // 仅当SecondScreen进入组合时执行一次状态更新
    LaunchedEffect(Unit) {
        mainViewModel.updateSearchWidgetVisibility(true)
    }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = C2),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "second screen")
    }
}

2. 优化ViewModel状态暴露：将对外暴露的状态改为State<Boolean>，避免外部直接修改内部MutableState，保持单向数据流：

class MainViewModel:ViewModel() {
    private val _searchWidgetVisibility: MutableState<Boolean> = mutableStateOf(false)
    // 对外暴露不可变的State
    val searchWidgetVisibility: State<Boolean> = _searchWidgetVisibility

    fun updateSearchWidgetVisibility(newValue:Boolean) {
        _searchWidgetVisibility.value = newValue
    }
}

3. 确认ViewPager缓存逻辑：如果使用Accompanist ViewPager，通过rememberPagerState控制页面切换，确保缓存的页面不会频繁触发不必要的重组，比如设置合适的pageLimit（默认是1），避免过多页面被缓存导致状态冲突。

内容的提问来源于stack exchange，提问作者A.G