AlertDialog 的預覽在 Jetpack Compose 中不起作用

Question

問題描述

我正在嘗試在撰寫中查看我的AlertDialog的預覽，但我沒有得到它，即使它沒有顯示任何錯誤，預覽也不會呈現它。 我確定問題只出在這個可組合的 function 上，因為我可以正常看到其他功能的預覽。

警告

我收到了這個警告，但我不太明白這是一個沒有呈現我的對話框的問題。

在運行時正常工作

我的對話框在執行環境中正常出現，這讓我相信這確實是預覽版function的問題：

我的代碼

編寫相關版本

我正在使用build.gradle.kts文件，我引用了我的撰寫相關版本，如下所示：

object Compose {
    const val composeVersion = "1.0.5"
    const val composeCompilerVersion = "1.0.5"
    const val material = "androidx.compose.material:material:$composeVersion"
    const val ui = "androidx.compose.ui:ui:$composeVersion"
    const val uiTooling = "androidx.compose.ui:ui-tooling:$composeVersion"
    const val uiToolingPreview = "androidx.compose.ui:ui-tooling-preview:$composeVersion"
    const val runtime = "androidx.compose.runtime:runtime:$composeVersion"
    const val compiler = "androidx.compose.compiler:compiler:$composeCompilerVersion"

    private const val navigationVersion = "2.4.0-beta02"
    const val navigation = "androidx.navigation:navigation-compose:$navigationVersion"

    private const val hiltNavigationComposeVersion = "1.0.0-beta01"
    const val hiltNavigationCompose = "androidx.hilt:hilt-navigation-compose:$hiltNavigationComposeVersion"

    private const val activityComposeVersion = "1.4.0"
    const val activityCompose = "androidx.activity:activity-compose:$activityComposeVersion"

    private const val lifecycleVersion = "2.4.0"
    const val viewModelCompose = "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycleVersion"
}

呈現對話框的組件

@Composable
fun InvalidValuesDialog(
    @StringRes title: Int,
    @StringRes message: Int,
    @StringRes buttonText: Int,
    checkBoxIsChecked: Boolean,
    onCheckChange: () -> Unit,
    onDismissRequest: () -> Unit,
    buttonClick: () -> Unit,
) {
    val spaces = LocalSpacing.current
    AlertDialog(
        onDismissRequest = onDismissRequest,
        title = {
            Text(
                text = stringResource(id = title),
                fontSize = 20.sp
            )
        },
        text = {
            Column {
                Text(
                    text = stringResource(id = message),
                    fontSize = 18.sp
                )
                VerticalSpacer(spaces.small)
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(checked = checkBoxIsChecked, onCheckedChange = { onCheckChange() })
                    HorizontalSpacer(spaces.extraSmall)
                    Text(
                        modifier = Modifier.clickable { onCheckChange() },
                        text = stringResource(id = R.string.keep_value_informed),
                        fontSize = 16.sp
                    )
                }
            }
        },
        buttons = {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = buttonClick
            ) {
                Text(text = stringResource(id = buttonText))
            }
        }
    )
}

預覽 function

@Composable
@Preview
fun InvalidValuesDialogCheckedPreview() {
    CalorieTrackerTheme {
        InvalidValuesDialog(
            title = R.string.high_height,
            message = R.string.high_height_message,
            buttonText = R.string.next,
            checkBoxIsChecked = true,
            onCheckChange = {},
            onDismissRequest = {},
            buttonClick = {}
        )
    }
}

預覽結果

我的嘗試失敗了

我認為對話框可能無法呈現，因為它不夠大，無法在屏幕上顯示。 所以我決定把它放在一個最大屏幕尺寸的Box里，但它仍然不起作用。

@Composable
@Preview(showBackground = true)
fun InvalidValuesDialogCheckedPreview() {
    CalorieTrackerTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            InvalidValuesDialog(
                title = R.string.high_height,
                message = R.string.high_height_message,
                buttonText = R.string.next,
                checkBoxIsChecked = true,
                onCheckChange = {},
                onDismissRequest = {},
                buttonClick = {}
            )
        }
    }
}

嘗試失敗結果

Answer 1

預覽 window 不支持多個 windows我認為錯誤是有效的，在預覽或預覽交互模式下仍然無法看到 Toast 或snackbar。

順便說一句，我認為當您使用androidx.compose.ui:ui-tooling時，您不再需要androidx.compose.ui:ui-tooling-preview