JetPack Compose 基础之Dialog

1,296 阅读2分钟

一:Dialog的基本用法与各参数属性

1.dialog构造

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
)
  • onDismissRequest:弹窗消失时处理逻辑,此时需要更改让弹窗显示的状态值加上一些业务逻辑
override fun onTouchEvent(event: MotionEvent): Boolean {
    val result = super.onTouchEvent(event)
    if (result && properties.dismissOnClickOutside) {
        onDismissRequest()
    }

    return result
}
当dismissOnBackPress为false时,点击系统返回按钮,该方法不会回调
override fun onBackPressed() {
    if (properties.dismissOnBackPress) {
        onDismissRequest()
    }
}
当dismissOnClickOutside为false时,点击空白区域,该方法不会回调
当控制弹窗显示隐藏的参数不在该方法中改变时,就算dismissOnBackPress,dismissOnClickOutside都为true,且触发了该方法逻辑,依然无法隐藏弹窗。
  • properties:
弹窗属性,可更改dismissOnBackPress、dismissOnClickOutside、SecureFlagPolicy。
SecureFlagPolicy:分为三种情况 
Inherit:跟随父弹窗的属性
 
SecureOn:开启不可截屏、不可录屏
 
SecureOff:关闭不可截屏、不可录屏
 
  • content:弹窗布局

PS:弹窗默认全屏、有阴影、布局默认居中

  • 设置无阴影
themes中增加一个名称为DialogWindowTheme的主题
<style name="DialogWindowTheme" parent="Theme.AppCompat.Dialog">
    <!-- 是否有边框 -->
    <item name="android:windowFrame">@null</item>
    <!--是否在悬浮Activity之上  -->
    <item name="android:windowIsFloating">true</item>
    <!--标题  -->
    <item name="android:windowNoTitle">true</item>
    <!--阴影  -->
    <item name="android:windowIsTranslucent">true</item>
    <!--透明背景-->
    <item name="android:background">@android:color/transparent</item>
    <!--窗口背景透明-->
    <item name="android:windowBackground">@android:color/transparent</item>
    <!--弹窗背景是否变暗-->
    <item name="android:backgroundDimEnabled">false</item>

</style>

2.例子

@Composable
fun norDialog(){
    var flag by remember {
        mutableStateOf(true)
    }
    Button(onClick = {
        flag = true
    }) {
        Text(text = "原生dialog")
    }
    if (flag){
        Dialog(onDismissRequest = {
            Log.e("Dialog","dismiss")
            flag = false
        }) {
            Text(text = "原生dialog")
        }
    }

}

二:AlertDialog的基本用法

1.构造方法

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = androidx.compose.material3.tokens.Dialog.ContainerShape,
    containerColor: Color =
        MaterialTheme.colorScheme.fromToken(
            androidx.compose.material3.tokens.Dialog.ContainerColor
        ),
    tonalElevation: Dp = androidx.compose.material3.tokens.Dialog.ContainerElevation,
    iconContentColor: Color = MaterialTheme.colorScheme.fromToken(
        androidx.compose.material3.tokens.Dialog.WithIconIconColor
    ),
    titleContentColor: Color = MaterialTheme.colorScheme.fromToken(
        androidx.compose.material3.tokens.Dialog.SubheadColor
    ),
    textContentColor: Color = MaterialTheme.colorScheme.fromToken(
        androidx.compose.material3.tokens.Dialog.SupportingTextColor
    ),
    properties: DialogProperties = DialogProperties()
){
    Dialog(
        onDismissRequest = onDismissRequest,
        properties = properties
    ) {
        AlertDialogContent(
            buttons = {
                AlertDialogFlowRow(
                    mainAxisSpacing = ButtonsMainAxisSpacing,
                    crossAxisSpacing = ButtonsCrossAxisSpacing
                ) {
                    dismissButton?.invoke()
                    confirmButton()
                }
            },
            modifier = modifier,
            icon = icon,
            title = title,
            text = text,
            shape = shape,
            containerColor = containerColor,
            tonalElevation = tonalElevation,
            // Note that a button content color is provided here from the dialog's token, but in
            // most cases, TextButtons should be used for dismiss and confirm buttons.
            // TextButtons will not consume this provided content color value, and will used their
            // own defined or default colors.
            buttonContentColor = MaterialTheme.colorScheme.fromToken(
                androidx.compose.material3.tokens.Dialog.ActionLabelTextColor
            ),
            iconContentColor = iconContentColor,
            titleContentColor = titleContentColor,
            textContentColor = textContentColor,
        )
    }
}

从构造方法可以看出,AlertDialog内部实现就是dialog,所以onDismissRequest,properties与dialog意思一致。主要不同就是alertdialog内部帮我们实现了一个布局。

2.参数布局层级

  • icon 最上面

  • title 第二

  • text 第三

  • confirmButton与dismissButton同一层级

  • confirmButton与dismissButton内部可随意写界面,默认布局是Row,会自动换行