Jetpack Compose实现点击显示对话框

基于compose material3

implementation "androidx.compose.material3:material3:1.0.0-alpha09"
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"

某些控件的点击回调没有集成composeable,无法直接在其中使用composeable函数, 可以用其他方法实现此功能

//每点击一次都会重组
var clicked by remember { mutableStateOf(false) }
var showDialog by remember { mutableStateOf(false) }
Column(modifier = Modifier
    .fillMaxWidth()
    .clickable {
         //触发点击事件
        clicked = true
        showDialog = true
    }) {
   
if (clicked and showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text(text = "点击了") },
        text = { Text(text = "点击了") },
        buttons = {
            TextButton(onClick = { /*TODO*/ }) {
                Text(text = "按钮1")
            }
            TextButton(onClick = { /*TODO*/ }) {
                Text(text = "按钮2")
            }
        }
    )
}
}

当compose中控件参数的值更改后,该控件会重组,即更新UI

关键术语 - 组合：Jetpack Compose 在执行可组合项时构建的界面描述。

初始组合：通过首次运行可组合项创建组合。

重组：在数据发生变化时重新运行可组合项以更新组合。