如何为Jetpack Compose可复用CustomButton实现点击事件回调

你需要给CustomButton新增一个函数类型的入参，用来接收外部传入的点击回调逻辑，具体修改步骤如下：

步骤1：修改CustomButton组件定义 #

给组件添加onClick: () -> Unit参数，将其直接传给内部原生Button的onClick属性：

@Composable
fun CustomButton(
    text : String,
    // 新增点击回调参数，() -> Unit 代表无参数无返回值的函数类型
    onClick: () -> Unit
){
    Button(
        onClick = onClick,
        modifier = Modifier.fillMaxWidth().height(60.dp)
    ) {
        Text(text = text)
    }
}

如果要兼容旧调用不需要传点击回调的场景，可以给参数设置默认空实现：onClick: () -> Unit = {}

步骤2：调用组件时传入点击逻辑 #

在使用CustomButton的位置，通过onClick参数传入对应按钮要执行的业务逻辑即可：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 32.dp)
) {
    CustomButton(
        text = "Get Started",
        onClick = {
            // 这里写"开始使用"按钮要执行的逻辑，比如页面跳转、数据上报等
            // 示例：navController.navigate("start_page")
        }
    )
    Spacer(modifier = Modifier.size(16.dp))
    CustomButton(
        text = "Log In",
        onClick = {
            // 这里写"登录"按钮要执行的逻辑
            // 示例：navController.navigate("login_page")
        }
    )
}

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