Jetpack Compose 全屏对话框

Question

我尝试使用以下代码使用 Jetpack Compose 创建全屏对话框：

Dialog(onDismissRequest = { /*TODO*/ }) {
           NewPostDialog()
       }

它最终看起来像这样。我怎样才能去掉边边距（标记为红色）？

Answer 1

更新： 正如@Nestor Perez 提到的，自从编写 1.0.0-rc01 后，您可以在 DialogProperties 中设置 usePlatformDefaultWidth 以使对话框填充整个屏幕宽度：

Dialog(
    properties = DialogProperties(usePlatformDefaultWidth = false),
    onDismissRequest...
    ){
      Surface(modifier = Modifier.fillMaxSize()) {
          DialogContent()
      }
    }

Compose Dialog 使用 ContextThemeWrapper 因此您应该能够使用自定义样式为对话框设置主题。

themes.xml:

 <style name="Theme.YourApp" parent="Theme.MaterialComponents.Light.NoActionBar">
       //theme content...
        <item name="android:dialogTheme">@style/Theme.DialogFullScreen</item>
    </style>

 <style name="Theme.DialogFullScreen" parent="@style/ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="android:windowMinWidthMajor">100%</item>
        <item name="android:windowMinWidthMinor">100%</item>
    </style>

在代码中：

@Composable
fun FullScreenDialog(showDialog:Boolean, onClose:()->Unit) {
    if (showDialog) {
        Dialog(onDismissRequest =  onClose ) {
            Surface(
                modifier = Modifier.fillMaxSize(),
                shape = RoundedCornerShape(16.dp),
                color = Color.LightGray
            ) {
                Box(
                    contentAlignment = Alignment.Center
                ) {
                    Text(modifier = Modifier.align(Alignment.TopCenter),
                        text = "top")
                    Text("center")
                    Text(
                        modifier = Modifier.align(Alignment.BottomCenter),
                        text = "bottom")
                }
            }
        }
    }
}

Answer 2

如果您想完全避免使用 xml 主题并避免对所有对话框都这样做，您可以将 requiredWidth 修饰符设置为等于 LocalConfiguration.current.screenWidthDp.dp（乘以随心所欲的分数）。

占用0.96f屏幕宽度的例子：

@Composable
fun LargerDialog(
    dialogOpen: MutableState<Boolean>
) {
    Dialog(onDismissRequest = { dialogOpen.value = false }) {
        Card( // or Surface
            elevation = 8.dp,
            modifier = Modifier
                .requiredWidth(LocalConfiguration.current.screenWidthDp.dp * 0.96f)
                .padding(4.dp)
        ) {
            // content
        }
    }
}

Answer 3

jns 的解决方案对我来说效果不佳，如果有人还在寻找，我会在这里留下另一个解决方案：

将主题实现为jns答案：

<style name="Theme.Outlay" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    ...
    <!-- Customize your theme here. -->
    <item name="android:dialogTheme">@style/Theme.DialogFullScreen</item    >
</style>

<style name="Theme.DialogFullScreen" parent="@style/ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="android:windowMinWidthMajor">100%</item>
    <item name="android:windowMinWidthMinor">100%</item>
</style>

为对话框创建一个脚手架并在对话框属性中添加实验性属性“usePlatformDefaultWidth = false”：

Dialog(
    onDismissRequest = onBackPressed,
    properties = DialogProperties(
        usePlatformDefaultWidth = false
    )
) {
    Scaffold(topBar = { TopBar(onBackPressed = onBackPressed) }) {
        Content()
    }
}

Jetpack Compose 全屏对话框

Jetpack Compose Fullscreen Dialog

android

android-dialog

android-jetpack-compose