Compose Multiplatform Beta

Compose Multiplatform Beta

Marco de trabajo de interfaces de usuario de escritorio y web reactivas y rápidas para Kotlin, basadas en el moderno kit de herramientas de Google y que JetBrains pone a su disposición

Compose Multiplatform simplifica y acelera el desarrollo de las interfaces de usuario para las aplicaciones de escritorio y web, y permite compartir de forma extensiva el código de las interfaces de usuario entre Android, Desktop y Web. Actualmente en versión Beta.

Explorar en GitHub

Aplicación de escritorio

Compose for Desktop ofrece un enfoque declarativo y reactivo para crear interfaces de usuario de escritorio con Kotlin. Combine funciones redactables para compilar interfaces de usuario y disfrute de una compatibilidad total de las herramientas de su IDE y de su sistema de compilación. No se necesita ningún XML ni ningún lenguaje de plantillas.

Compose for Desktop se centra en la JVM y es compatible con interfaces de usuario de alto rendimiento, con aceleración material, en las principales plataformas de escritorio (macOS, Windows y Linux) aprovechando la potente biblioteca gráfica nativa Skia. Las distribuciones de aplicaciones nativas se pueden crear con un solo clic.

Windows

Windows

macOS

macOS

Linux

Linux

Aplicación web

Compose for Web le permite crear interfaces de usuario reactivas para la web en Kotlin, utilizando los conceptos y las API de Jetpack Compose para expresar el estado, el comportamiento y la lógica de su aplicación.

Compose for Web proporciona muchas formas de declarar interfaces de usuario en el código Kotlin, lo que le permite tener un control total sobre el diseño de su sitio web con una API DOM declarativa.

Web

Web

Funcionalidades de Compose for Desktop

Extensiones de escritorio para menús, accesos directos de teclado, manipulación de ventanas, gestión de notificaciones, etc.

Representación acelerada del hardware con Skia.

Representación y diseño potente de texto en varios lenguajes.

Excelente interoperabilidad AWT y Swing.

Intercambio de código con las aplicaciones de Jetpack Compose Android mediante Kotlin Multiplatform.

Compatibilidad de los elementos de la interfaz de usuario con Android Compose.

Compatibilidad para crear paquetes de aplicaciones autónomas.

Vea todas las funcionalidades

Funcionalidades de Compose for Web

El mismo motor reactivo que se usa en Android/Desktop permite usar una base de código común.

Marco de trabajo para la creación de interfaces de usuario enriquecidas para Kotlin/JS.

Útil DSL para Kotlin DOM que abarca todos los escenarios comunes de desarrollo de frontend.

API CSS-in-Kotlin/JS completa.

Vea todas las funcionalidades

Primeros pasos con Compose for Desktop

Navegue por nuestros tutoriales para obtener información sobre las funcionalidades de Compose for Desktop.

Iniciar el tutorial aquí

En este tutorial, le enseñaremos a crear una aplicación de interfaz de usuario de escritorio sencilla con el marco de trabajo Compose UI.

Ver tutorial

Aplicación de visualizador de imágenes

Un ejemplo de galería de imágenes con imágenes de un servidor remoto, que utiliza Compose for Desktop y Android.

Explorar la aplicación

Ejemplo de navegador de incidencias

Visualizador de incidencias de GitHub escritas con Compose for Desktop.

Explorar la aplicación

Tenga en cuenta que, actualmente, Compose for Desktop está en la fase de desarrollo Beta y puede que no sea adecuado para aplicaciones en producción.

Primeros pasos con Compose for Web

Navegue por nuestros tutoriales para obtener información sobre las funcionalidades de Compose for Web.

Iniciar el tutorial aquí

En este tutorial, le enseñaremos a crear nuestra primera aplicación de interfaz de usuario web con Compose for Desktop.

Ver tutorial

Ejemplo de página de destino

Un ejemplo de una página de destino creada con la API Composable DOM y Stylesheet DSL.

Explorar el código fuente

Ejemplo de aplicación Falling Balls

Este ejemplo demuestra el uso de widgets multiplataforma, compartiendo el código de la interfaz de usuario entre Compose for Desktop y Web.

Explorar el código fuente

Jugar

Tenga en cuenta que, actualmente, Compose for Web está en la fase de desarrollo Beta y puede que no sea adecuado para aplicaciones en producción.

Muestras de código

pointerMoveFilter + mouseClickable

fun main() = singleWindowApplication {

var isActivated by remember { mutableStateOf(false) }

var isHovered by remember { mutableStateOf(false) }

var size by animateDpAsState(if (isActivated) 300.dp else 200.dp)

Box(

Modifier

.size(size)

.background(if (isHovered) Color.Red else Color.Blue)

.pointerMoveFilter(

onEnter = { isHovered = true; false },

onExit = { isHovered = false; false },

)

.mouseClickable {

if (buttons.isPrimaryPressed) {

isActivated = true

} else if (buttons.isSecondaryPressed) {

isActivated = false

}

}

)

}

No dude en unirse al canal #compose-desktop en el Slack de Kotlin para hablar de la parte de escritorio de Compose Multiplatform, al canal #compose-web para hablar de la parte de web de Compose Multiplatform o al canal #compose para cuestiones generales sobre Compose y Jetpack Compose.