Блог

У меня есть этот код:

 @Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
        ....
    }
}

@Preview(showBackground = true)
@Composable
fun SomeDialogPreview() {
    MyTherapyPreviewTheme {
        Scaffold {
            SomeDialog()
        }
    }
}
 

Я ожидал, что этот предварительный просмотр создаст предварительный просмотр, аналогичный другим составным функциям, но вместо этого я вижу только белый прямоугольник в предварительном просмотре (чистый каркас).

Как я могу правильно сгенерировать предварительный просмотр диалогового окна? Или, может быть, я могу сделать предварительный просмотр содержимого диалогового окна только в отдельной функции?

@MihaiBC прямо говорит о том, почему вы не можете просмотреть (пока). Между тем, вы можете просматривать содержимое диалогового окна, извлекая содержимое диалогового окна в отдельный составной файл.

Например, если ваш диалог выглядит следующим образом:

 @Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         Card(modifier = Modifier.fillMaxWidth()) {
             .....
        }
    }
}
 

затем извлеките содержимое следующим образом:

 @Composable
fun SomeDialog() {
    Dialog(onDismissRequest = { }, properties = DialogProperties()) {
         SomeDialogContent()
    }
}

@Composable
fun SomeDialogContent(){
   Card(modifier = Modifier.fillMaxWidth()) {
       .....
   }
}
 

и, наконец, просмотрите это SomeDialogContent с некоторыми дополнениями:

 @Preview
@Composable
fun PreviewSomeDialogContent() {
    AppTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background)
                .padding(20.dp),
            contentAlignment = Alignment.Center,
        ) {
            SomeDialogContent({})
        }
    }
}
 

В документации указано, что только AlertDialog поддерживает составные функции, и именно по этой причине вы не можете просмотреть предварительный просмотр.

Вы можете проверить более подробную информацию здесь.

Есть еще один способ просмотреть предварительный просмотр, но на этот раз он будет на вашем живом устройстве или симуляторе.

В окне предварительного просмотра найдите кнопку предварительного просмотра развертывания, которая создаст предварительный просмотр на телефоне.

Обратите внимание, что будет построен только этот составляемый файл.