如何使用jetpack compose创建可重复使用的按钮？

Question

我有一个可重复使用的组合，如下所示，

@Composable
fun CustomButton(
    text : String
){
    Button(onClick = { },
        modifier = Modifier.fillMaxWidth().height(60.dp)
        ) {
        Text(text = text)
    }
}

我正在使用可组合按钮，如下所示。
如何实现onclick function 的回调？

Column(
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 32.dp)
) {
    CustomButton(text = "Get Started")
    Spacer(modifier = Modifier.size(16.dp))
    CustomButton(text = "Log In")
}

Answer 1

像这样，

按钮

@Composable
fun CustomButton(
    text: String,
    onClick: () -> Unit,
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp),
    ) {
        Text(text = text)
    }
}

用法

Column(
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 32.dp)
) {
    CustomButton(text = "Get Started") {
        // Click event occurs here.
    }
    Spacer(modifier = Modifier.size(16.dp))
    CustomButton(text = "Log In") {
        // Click event occurs here.
    }
}