Android Compose 中的位置警报对话框

Question

如何将 Jetpack Compose 中的警告对话框定位到屏幕底部。另外，设置透明背景。

Answer 1

看起来很简单

Box(Modifier.fillMaxSize()) {
            Column() {
                /* Content */
            }
             /* Box alert */
            Box(
                Modifier
                    .padding(horizontal = 32.dp, vertical = 16.dp)
                    .fillMaxWidth()
                    .background(Color.Transparent, RoundedCornerShape(8.dp))
                    .border(2.dp, Color.LightGray, RoundedCornerShape(8.dp))
                    .align(Alignment.BottomCenter)
            ) {
                Text(
                    text = "Alert",
                    modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    color = Color.Black
                )
            }
        }

Answer 2

谢谢@alekseyHunter 和@johann。我可以使用自定义布局修改器来实现这一点。

用于放置警报对话框的自定义修饰符

enum class CustomDialogPosition {
    BOTTOM, TOP
}

fun Modifier.customDialogModifier(pos: CustomDialogPosition) = layout { measurable, constraints ->

    val placeable = measurable.measure(constraints);
    layout(constraints.maxWidth, constraints.maxHeight){
        when(pos) {
            CustomDialogPosition.BOTTOM -> {
                placeable.place(0, constraints.maxHeight - placeable.height, 10f)
            }
            CustomDialogPosition.TOP -> {
                placeable.place(0,0,10f)
            }
        }
    }
}

并且在警报对话框实现中为

AlertDialog( ..., modifiers = Modifiers.customDialogModifier(CustomDialogPosition.BOTTOM)) 
{
    // block
})

Android Compose 中的位置警报对话框

Position Alert dialog in Android Compose

android

android-alertdialog

android-jetpack-compose