Jetpack compose dialogFragment 等价物

Question

我正在尝试在 Jetpack Compose 中实现具有自定义布局的 dialogFragment，但找不到任何示例。我是否需要将 UI 组件包装在 Card/Surface 中，然后将其包装在对话框中？在文档中找不到任何示例，所有示例都是关于警报对话框的，但我需要自定义布局。谢谢。

Answer 1

您可以使用 Dialog 可组合项：

Dialog(
    onDismissRequest = { /* ... */ },
    DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = false)
) {
    /* Your custom layout */
}

Answer 2

在编写 AlertDialog 时将可组合项传递到 text 字段。参数 text 使用一个可组合项，您可以在其中布局任何您想要的内容作为普通可组合项。

@Composable
fun AlertDialog(
    onDismissRequest: (() -> Unit)?,
    confirmButton: (@Composable () -> Unit)?,
    modifier: Modifier? = Modifier,
    dismissButton: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape? = MaterialTheme.shapes.medium,
    backgroundColor: Color? = MaterialTheme.colors.surface,
    contentColor: Color? = contentColorFor(backgroundColor),
    properties: DialogProperties? = DialogProperties()
): Unit

源代码可以在这里找到：

https://github.com/androidx/androidx/blob/androidx-main/compose/material/material/src/androidMain/kotlin/androidx/compose/material/AndroidAlertDialog.android.kt

Answer 3

package com.rejia.manage.module.xiangshan

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.Window
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.fragment.app.DialogFragment

class TestDialogFragment : DialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        dialog!!.requestWindowFeature(Window.FEATURE_NO_TITLE)
        return ComposeView(requireContext()).apply {
            setContent {
                Column(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        text = "溫馨提示",
                        textAlign = TextAlign.Center,
                        fontSize = 18.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(30.dp),
                    )
                    Text(
                        text = "回家吃饭啦",
                        textAlign = TextAlign.Center,
                        fontSize = 18.sp,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(start = 30.dp, end = 30.dp, bottom = 30.dp),
                    )

                    Row(
                        modifier = Modifier
                            .background(Color.Gray)
                            .padding(top = 1.dp)
                            .background(Color.White)
                            .height(48.dp)
                    ) {
                        TextButton(
                            shape = RoundedCornerShape(0.dp),
                            modifier = Modifier
                                .fillMaxHeight()
                                .weight(1F),
                            onClick = {
                                Toast.makeText(requireContext(), "onCancelClick", Toast.LENGTH_SHORT).show()
                            },
                        ) {
                            Text(text = "取消", color = Color.Gray)
                        }
                        Spacer(
                            modifier = Modifier
                                .width(1.dp)
                                .fillMaxHeight()
                                .background(Color.Gray)
                        )
                        TextButton(
                            shape = RoundedCornerShape(0.dp),
                            modifier = Modifier
                                .fillMaxHeight()
                                .weight(1F),
                            onClick = {
                                Toast.makeText(requireContext(), "onConfirmClick", Toast.LENGTH_SHORT).show()
                            },
                        ) {
                            Text(text = "确定")
                        }
                    }
                }
            }
        }
    }
}

TestDialogFragment().show(parentFragmentManager, "TestDialogFragment")

show

Jetpack compose dialogFragment 等价物

Jetpack compose dialogFragment equivalent

android

kotlin

android-layout

android-jetpack-compose

android-dialogfragment