Introducción a la vista previa en Jetpack Compose | de Kaaveh Mohamedi | febrero 2023

La anotación @Preview tiene varias funciones para administrar la vista previa de las funciones componibles. ¡Este artículo profundiza y cubre el poder de @Preview! 🔥Foto de Lin Mei en Unsplash Para obtener una vista previa de una función componible, solo defina otra función componible usando @Preview:@Preview@Composablefun MyButtonPreview() {MyAppTheme {MyButton()}}Esta función genera la vista previa:Digamos que el tema de la aplicación también tiene un tema oscuro. Para agregar la versión oscura de las funciones componibles, podemos agregar un @Preview:@Preview@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)@Composablefun MyButtonPreview() {ComposeNewsTheme {MyButton()}}aquí tenemos:Pero, ¿necesitamos agregar dos anotaciones @Preview para cada función componible? Por supuesto que no. Hay una forma de definir su propia anotación: @Preview(name = «Light»)@Preview(name = «Dark»,uiMode = Configuration.UI_MODE_NIGHT_YES,)annotation class ThemePreviewsAhora, se puede usar así: @ThemePreviews@Composablefun MyButtonPreview() {MyAppTheme {MyButton()}}Puede colocar estas definiciones de clase de anotación en el módulo del sistema de temas. Como en la sección anterior, para obtener una vista previa de un widget en diferentes escalas de fuente, puede definir una clase de anotación para él: @Preview( fontScale = 1.0f, name = «Default (100%)»)@Preview(fontScale = 0.85f, name = «Pequeño (85%) «)@Preview(fontScale = 1.15f, name = «Large (115%)» )@Preview(fontScale = 1.3f, name = «Largest (130%) «)clase de anotación FontScalePreviewY el resultado:Si su aplicación es compatible con varios idiomas y obtiene cadenas de texto de recursos de cadena, esta anotación lo ayudará a obtener una vista previa de sus funciones componibles en diferentes configuraciones regionales:@Preview(locale = «en», name = «English»)@Preview(locale = » fr», name = «Francés»)@Preview(locale = «ar», name = «Arabic»)@Preview(locale = «ja», name = «Japanese»)anotation class MultiLanguagePreviewEs conveniente previsualizar una pantalla que puede montarse en diferentes tamaños de pantalla como teléfono, plegable, tablet e incluso escritorio (específicamente para ChromeOS). Podemos usar el atributo de dispositivo @Preview para este propósito.Como sugiere el autocompletado de Android Studio, hay ajustes preestablecidos predefinidos para diferentes dimensiones. Así es como podemos usarlos: @Preview(name = «Phone», device = «spec:width=411dp,height=891dp») @Preview(name = «Foldable», device = «spec:width=673.5dp, height = 841dp,dpi=480»)@Preview(name = «Tablet», dispositivo = «spec:width=1280dp,height=800dp,dpi=480»)@Preview(name = «Escritorio», dispositivo = «spec: ancho = 1920dp,height=1080dp,dpi=480») Clase de anotación DevicesPreviewsEste es el resultado:El atributo del dispositivo también tiene algunas especificaciones de teléfono predefinidas para facilitar las pruebas:Es común que una pantalla componible requiera un modelo de vista como titular de estado. Un enfoque básico es pasar viewModel como un parámetro: @Composablefun NewsListScreen(viewModel: NewsListViewModel,onNavigateToDetailScreen: (noticias: Noticias) -> Unidad,) {…}Para obtener una vista previa de este componente, necesita una implementación de instancia de viewModel que cree una vista previa difícil. Para manejar este escenario, puede definir un contenedor componible: @Composablefun NewsListRoute(viewModel: NewsListViewModel,onNavigateToDetailScreen: (noticias: Noticias) -> Unidad,) {…NewsListScreen(…)}Cambie la pantalla componible a una versión sin estado :@Composableprivate fun NewsListScreen(newsListState: NewsListState,onNavigateToDetailScreen: (noticias: Noticias) -> Unidad,onFavoriteClick: (noticias: Noticias) -> Unidad,onRefresh: () -> Unidad,) {…}En NewsListRoute, llama a NewsListScreen y pasa cualquier parámetro que desee. Ahora puede obtener una vista previa de NewsListScreen más fácilmente y probar todos los parámetros posibles. El último consejo de vista previa es la situación en la que su función componible depende de algunos argumentos como clases de datos. @Composablefun NewsItem(noticias: Noticias,onFavoriteClick: (noticias: Noticias) -> Unidad,) {…}Para evitar valores predeterminados de vista previa codificada arriba de Composable, hay una anotación llamada @PreviewParameter.@Preview@Composableprivate fun NewsItemPreview(@PreviewParameter (NewsProvider::class)news: News,) {NewsItem(news = news, onFavoriteClick = {})}Así es como define la clase NewsProvider: class NewsProvider: PreviewParameterProvider {override val valores = secuenciaDe(Noticias(autor = «Kaaveh Mohamedi»,descripción = «Esta es una descripción de ejemplo.»,publishedAt = «2022/02.10»,…),Noticias(…),. . .)}PreviewParameterProvider es una buena solución para reutilizar los parámetros predeterminados para la vista previa. Espero que hayas disfrutado después de leer este artículo 🤓. Si desea ver los consejos anteriores en una base de código, consulte este repositorio de Github: ¡Feliz codificación! 👋