Jetpack Compose中如何触发Unit动作？BackNavigationSingleButton点击无响应怎么解决

问题原因及解决方法 #

核心原因1：重复绑定点击事件导致冲突

BackNavigationSingleButton 内部已经通过 IconButton 的 onClick 参数绑定了点击回调，此时你额外给传入该组件的 modifier 加 .clickable() 修饰符，会产生点击事件冲突，后绑定的点击修饰符会优先消耗触摸事件，导致 IconButton 自带的点击回调无法触发。

核心原因2：组件尺寸小于内部内容，导致可点击区域异常

你给 BackNavigationSingleButton 设置的高度是 42dp，但内部默认大小为 24dp 的 Icon 加了上下各 10dp 的 padding，总高度为 44dp，超出了父容器高度，会导致内容被裁剪、可点击区域偏移出组件边界，出现点不到的情况。 #

修复步骤 #

1. 删除所有额外添加的 .clickable() 修饰符：包括你加在 BackNavigationSingleButton 入参 modifier 上的、外层 Box 上的点击修饰符都删掉，仅保留 IconButton 自带的 onClick 回调绑定即可。
2. 调整组件尺寸适配内容：将 BackNavigationSingleButton 的高度从 42dp 改为至少 44dp，或者将内部 Icon 的 padding 调整为 9dp 适配 42dp 的容器高度。
3. 若修复后仍无响应，可给 IconButton 临时加 .border(1.dp, Color.Red) 修饰符，确认组件实际布局位置没有被其他更高层级的元素遮挡。

修正后核心代码示例 #

@Composable
fun TopGeneralInformationSection(backButtonInvoked: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp)
            .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
            .background(MaterialTheme.colors.onBackground)
            .padding(10.dp)
    ) {
        Row {
            BackNavigationSingleButton(
                backButtonSelected = { backButtonInvoked.invoke() },
                modifier = Modifier
                    .height(44.dp) // 调整高度适配内容
                    .width(60.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .background(MaterialTheme.colors.background)
            )
        }
    }
}

@Composable
fun BackNavigationSingleButton(
    backButtonSelected: () -> Unit,
    modifier: Modifier
) {
    IconButton(
        modifier = modifier,
        onClick = { backButtonSelected.invoke() }
    ) {
        Icon(
            imageVector = Icons.Filled.ArrowBack,
            modifier = Modifier.padding(10.dp),
            tint = MaterialTheme.colors.primary,
            contentDescription = "返回"
        )
    }
}

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