Аннотация Preview

Аннотация @Preview ставится перед @Composable и показывает функцию в Android Studio. Имя вкладки задают name, фон - showBackground, рамку устройства - device. Функция с Preview не обязана вызываться из activity, но должна быть composable, как в Composable.

Синтаксис

@Preview(name = "abcde", showBackground = true)
@Composable
fun NotePreview() {
	Text(text = "12345")
}

Параметры

Параметр	Описание
`name`	Подпись preview на панели Android Studio.
`showBackground`	Если `true`, рисуют фон за composable.
`device`	Строка профиля устройства, например pixel_4.

Пример

Давайте покажем Text в preview с именем abcde:

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun SimpleLine() {
	Text(text = "abcde")
}

@Preview(name = "abcde", showBackground = true)
@Composable
fun SimpleLinePreview() {
	MaterialTheme {
		SimpleLine()
	}
}

В Android Studio на панели Preview появится вкладка abcde с Text "abcde" на фоне.

Пример

Давайте задать device для второго preview:

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun CodeLine() {
	Text(text = "12345")
}

@Preview(
	name = "12345",
	showBackground = true,
	device = "spec:shape=Normal,width=360,height=640,unit=dp,dpi=480",
)
@Composable
fun CodeLinePreview() {
	CodeLine()
}

В Android Studio preview 12345 откроется в рамке с заданной шириной и высотой.

Смотрите также

аннотация Composable,
обязательна у preview-функции
функция MaterialTheme,
часто оборачивают preview
функция Text,
типичное содержимое preview
функция createComposeRule,
проверка UI на устройстве, не в Preview