Compose的特性,UI必须要埋进主布局壳子里,通过boolean值控制显示隐藏
@OptIn(ExperimentalUnitApi::class)
@Composable
fun CustomerHintDialog(alertDialog: MutableState<Boolean>, title: String, message: String) {
if (alertDialog.value) {
Dialog(onDismissRequest = {
alertDialog.value = false
}) {
Column(
modifier = Modifier.fillMaxWidth().padding(24.dp).background(
Color.White,
RoundedCornerShape(6.dp)
)
) {
Text(
"$title",
fontSize = TextUnit(16f, TextUnitType.Sp),
color = Color.Black,
textAlign = TextAlign.Center,
fontFamily = FontFamily(
android.graphics.Typeface.DEFAULT_BOLD
),
modifier = Modifier.align(Alignment.CenterHorizontally)
.padding(vertical = 15.dp, horizontal = 12.dp)
.fillMaxWidth()
)
Text(
"$message",
fontSize = TextUnit(13f, TextUnitType.Sp),
color = Color.Gray,
modifier = Modifier.align(Alignment.CenterHorizontally).fillMaxWidth()
.verticalScroll(rememberScrollState())
.padding(vertical = 8.dp, horizontal = 12.dp)
)
Row(modifier = Modifier.padding(vertical = 8.dp, horizontal = 12.dp)) {
TextButton(
onClick = {
alertDialog.value = false
},
content = {
Text(
"取消",
fontSize = TextUnit(16f, TextUnitType.Sp),
color = Color.Gray
)
},
border = BorderStroke(0.5.dp, Color.Gray),
modifier = Modifier.weight(1f)
)
Spacer(Modifier.width(10.dp))
TextButton(
onClick = {
alertDialog.value = false
},
content = {
Text(
"确认",
fontSize = TextUnit(16f, TextUnitType.Sp),
color = Color.White
)
},
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = Color.White
),
modifier = Modifier.weight(1f)
)
}
}
}
}
}
调用方式在主布局定义一个boolean类型的mutableState,在定义一个按钮触发控制true或false显示隐藏
var isShowing by remember {
mutableStateOf(mutableStateOf(false))
}
Button(onClick = { isShowing = mutableStateOf(true) },Modifier.fillMaxWidth().wrapContentHeight().padding(horizontal = 12.dp)) {
Text(text = "弹框")
}
CustomerHintDialog(isShowing, "Title", "Description")
效果图