如何在Jetpack Compose可组合项中重置已记忆的可变状态？

方法一：通过remember的key参数重置状态 #

给remember添加可变化的key，当需要重置时修改key值，强制remember重新初始化状态，同时LaunchedEffect也会随key变化重新执行倒计时逻辑：

@Composable
private fun TimedLayout(resetKey: Int) {
    // 当resetKey变化时，重新初始化show为true
    var show by remember(resetKey) { mutableStateOf(true) }

    // 重置key时重新启动倒计时
    LaunchedEffect(resetKey) {
        delay(5000)
        show = false
    }

    Column(modifier=Modifier.fillMaxSize()) {
        Text("Box showing: $show")
        if(show){
            Box{
                Text(text = "BlaBla")
            }
        }
    }
}

父组件调用时，通过修改resetKey触发重置：

var resetCounter by remember { mutableStateOf(0) }

Button(onClick = { resetCounter++ }) {
    Text("重启TimedLayout")
}

TimedLayout(resetKey = resetCounter)

方法二：状态提升到父组件管理 #

将show状态和倒计时逻辑移到父组件，让父组件控制状态的初始化和重置，子组件仅负责展示内容，这是Compose状态管理的最佳实践：

@Composable
private fun ParentComposable() {
    var show by remember { mutableStateOf(true) }

    // 当show变为true时启动倒计时
    LaunchedEffect(show) {
        if (show) {
            delay(5000)
            show = false
        }
    }

    Column(modifier=Modifier.fillMaxSize()) {
        Button(onClick = { show = true }) {
            Text("重启显示")
        }
        TimedLayout(show = show)
    }
}

@Composable
private fun TimedLayout(show: Boolean) {
    Column(modifier=Modifier.fillMaxSize()) {
        Text("Box showing: $show")
        if(show){
            Box{
                Text(text = "BlaBla")
            }
        }
    }
}

方法三：结合生命周期自动重置 #

如果TimedLayout和页面生命周期绑定，比如每次页面回到前台时自动重置显示，可以监听组件的生命周期事件：

@Composable
private fun TimedLayout() {
    var show by remember { mutableStateOf(true) }
    val lifecycleOwner = LocalLifecycleOwner.current
    val scope = rememberCoroutineScope()

    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            // 页面恢复到前台时重置状态并启动倒计时
            if (event == Lifecycle.Event.ON_RESUME) {
                show = true
                scope.launch {
                    delay(5000)
                    show = false
                }
            }
        }
        lifecycleOwner.lifecycle.addObserver(observer)
        // 组件销毁时移除观察者
        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }

    Column(modifier=Modifier.fillMaxSize()) {
        Text("Box showing: $show")
        if(show){
            Box{
                Text(text = "BlaBla")
            }
        }
    }
}

方法四：内部提供重置函数 #

在TimedLayout内部定义重置逻辑，通过按钮或其他触发方式调用，手动重置状态并重启倒计时：

@Composable
private fun TimedLayout() {
    var show by remember { mutableStateOf(true) }
    val scope = rememberCoroutineScope()

    // 重置状态并重启倒计时的函数
    fun resetDisplay() {
        show = true
        scope.launch {
            delay(5000)
            show = false
        }
    }

    // 首次组合时自动启动倒计时
    LaunchedEffect(Unit) {
        delay(5000)
        show = false
    }

    Column(modifier=Modifier.fillMaxSize()) {
        Button(onClick = { resetDisplay() }) {
            Text("重启")
        }
        Text("Box showing: $show")
        if(show){
            Box{
                Text(text = "BlaBla")
            }
        }
    }
}

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