如何避免Jetpack Compose中FloatingActionButton的onClick回调重复触发？

你的当前方案通过标记位控制点击逻辑是可行的，但还有几种更贴合Jetpack Compose和Navigation特性的优化方式：

1. 利用NavController的返回值控制状态 #

popBackStack()本身会返回一个Boolean，表示是否成功执行了回退操作。可以直接用这个返回值来更新标记位，同时避免栈为空时的无效操作：

修改点击逻辑：

FloatingActionButton(onClick = {
    if (!isNavigating) {
        isNavigating = true
        // 假设onPopBackStack内部是调用navController.popBackStack()，调整为带返回值的lambda
        val popSuccess = onPopBackStack()
        if (!popSuccess) {
            // 回退失败（如栈为空）时重置标记位
            isNavigating = false
        }
    }
})

对应调整函数参数：

fun AddEditTodoScreen(onPopBackStack: () -> Boolean, viewModel: AddEditTodoViewModel = viewModel()) {
    // ... 其余代码不变
}
// 在NavHost中传递时：
// onPopBackStack = { navController.popBackStack() }

2. 使用防抖操作符（Debounce） #

借助Kotlin协程的debounce操作符，在ViewModel层自动过滤短时间内的重复点击：

ViewModel层定义点击事件流：

class AddEditTodoViewModel : ViewModel() {
    private val _onSaveClick = MutableSharedFlow<Unit>()
    // 300ms内的重复点击会被自动过滤
    val onSaveClick = _onSaveClick.debounce(300)

    fun onSaveClicked() {
        viewModelScope.launch {
            _onSaveClick.emit(Unit)
        }
    }
}

Compose层收集流处理逻辑：

fun AddEditTodoScreen(onPopBackStack: () -> Unit, viewModel: AddEditTodoViewModel = viewModel()) {
    LaunchedEffect(Unit) {
        viewModel.onSaveClick.collect {
            onPopBackStack()
        }
    }

    Scaffold(floatingActionButton = {
        FloatingActionButton(onClick = {
            viewModel.onSaveClicked()
        }) {
            Icon(imageVector = Icons.Default.Check, contentDescription = "Check")
        }
    })
    // ... 其余代码不变
}

这种方式无需手动维护标记位，由协程自动处理防抖逻辑，代码更简洁。

3. 监听导航状态自动重置标记 #

通过监听NavController的目的地变化，在导航完成后自动重置isNavigating标记，无需手动判断回退结果：

fun AddEditTodoScreen(navController: NavController, viewModel: AddEditTodoViewModel = viewModel()) {
    var isNavigating by remember { mutableStateOf(false) }

    // 监听导航目的地变化，导航完成后自动重置标记
    LaunchedEffect(navController) {
        navController.currentBackStackEntryFlow.collect {
            isNavigating = false
        }
    }

    Scaffold(floatingActionButton = {
        FloatingActionButton(onClick = {
            if (!isNavigating) {
                isNavigating = true
                navController.popBackStack()
            }
        }) {
            Icon(imageVector = Icons.Default.Check, contentDescription = "Check")
        }
    })
    // ... 其余代码不变
}

这种方式把状态重置逻辑交给Navigation框架，更贴合组件生命周期，无需额外判断逻辑。

内容的提问来源于stack exchange，提问作者Mauricio Benjamin Mossi