Jetpack Compose 中如何拦截返回键切换内部viewState而非返回上一页面

你可以用Compose官方提供的BackHandlerAPI实现这个需求，它可以拦截系统返回事件，优先级高于页面默认的返回逻辑，两种实现方案如下： #

方案1：简单连续状态场景 #

如果你的内部状态是连续递增的数字，直接判断当前状态是否为初始值即可：

var viewState by remember { mutableStateOf(0) }

// 返回拦截逻辑：状态大于0时拦截返回，执行状态回退
BackHandler(enabled = viewState > 0) {
    viewState -= 1
}

Column {
    when (viewState) {
        0 -> { Button(onClick = { viewState = 1 }) { Text(text = "Goto 1") } }
        1 -> { Button(onClick = { viewState = 2 }) { Text(text = "Goto 2") } }
        2 -> { Button(onClick = { viewState = 3 }) { Text(text = "Goto 3") } }
        3 -> { Button(onClick = { viewState = 0 }) { Text(text = "Goto 0") } }
    }
}

说明：BackHandler的enabled参数为true时，系统返回事件会被当前回调接管，不会触发页面退出；为false时事件会向上传递，执行默认的返回上一页面逻辑。注：示例代码里修正了你原代码中状态3点击跳转4和文案Goto 0不符的笔误。 #

方案2：通用复杂跳转场景 #

如果你的状态跳转逻辑不固定、存在非连续跳转的情况，推荐用状态栈维护历史记录，适配性更强：

// 维护状态栈，初始存入初始状态0
val stateStack = remember { mutableStateListOf(0) }
// 取栈顶为当前展示的状态
val currentState = stateStack.last()

// 栈内元素大于1时说明有历史状态，拦截返回
BackHandler(enabled = stateStack.size > 1) {
    // 弹出栈顶当前状态，自动回到上一个状态
    stateStack.removeLast()
}

Column {
    when (currentState) {
        0 -> { 
            Button(onClick = { stateStack.add(1) }) { 
                Text(text = "Goto 1") 
            } 
        }
        1 -> { 
            Button(onClick = { stateStack.add(2) }) { 
                Text(text = "Goto 2") 
            } 
        }
        2 -> { 
            Button(onClick = { stateStack.add(3) }) { 
                Text(text = "Goto 3") 
            } 
        }
        3 -> { 
            Button(onClick = { 
                // 直接返回初始状态时清空栈，只保留初始状态
                stateStack.clear()
                stateStack.add(0)
            }) { 
                Text(text = "Goto 0") 
            } 
        }
    }
}

说明：这种方案不管你中间怎么跳转状态，都能按用户操作的顺序反向回退，适配所有场景。

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