Guía para empezar con Compose Multiplatform

Compose Multiplatform es un toolkit de interfaz de usuario de JetBrains, construiod con Kotlin, que permite desarrollar aplicaciones para múltiples plataformas incluyendo Android, iOS y escritorio.

1. Organización del código fuente en el proyecto

En un proyecto de Compose Multiplatform, el código se organiza para separar la lógica compartida de la específica de cada plataforma. Un esquema típico incluye los siguientes directorios:


- build.gradle.kts          Script principal de configuración de Gradle
- settings.gradle.kts       Define los módulos que componen el proyecto
- sharedModules             Código Kotlin común para todas las plataformas
    - src
        - commonMain
        - commonTest
- androidApp                Módulo para la aplicación Android
    - src/main
        - kotlin            Código fuente Kotlin para Android
        - res               Recursos nativos de Android
- iosApp                    Configuración y código para la aplicación iOS
- desktopApp                Módulo para la aplicación de escritorio (JVM)
    - src/main/kotlin       Punto de entrada y lógica para escritorio
- webApp                    Módulo para la aplicación web (Kotlin/JS)
    - src/main/kotlin       Código fuente para la plataforma JavaScript

El directorio sharedModules alberga toda la lógica de negocio y los componentes de UI reutilizables. Los directorios como androidApp, iosApp, desktopApp y webApp contienen las adaptaciones y el código de arranque particular de cada entorno.

2. Punttos de entrada por plataforma

Cada plataforma tiene su propio mecanismo para iniciar la aplicación y cargar la interfaz de usuario de Compose.

Para Android: El punto de entrada es una Activity. Por ejemplo, androidApp/src/main/kotlin/PrincipalActivity.kt podría contener:


class PrincipalActivity : ComponentActivity() {
    override fun onCreate(savedState: Bundle?) {
        super.onCreate(savedState)
        setContent {
            AppTheme {
                MainComposableScreen()
            }
        }
    }
}

Para escritorio (JVM): El arranque se realiza mediante una función main. Un archivo como desktopApp/src/main/kotlin/Lanzador.kt iniciaría la ventana de la aplicación.

Para web (Kotlin/JS): Similar al escritorio, existe una función main en el módulo correspondiente que renderiza el contenido en el navegador.

3. Archivos de configuración clave

build.gradle.kts (Nivel raíz)

Este archivo gestiona la configuración global del proyecto, los plugins y la definición de las plataformas objetivo.


plugins {
    kotlin("multiplatform") version "1.9.0"
    id("org.jetbrains.compose") version "1.5.0"
}

kotlin {
    androidTarget()
    jvm("desktop")
    js(IR) {
        browser()
    }
    iosX64()
    iosArm64()
    iosSimulatorArm64()

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(compose.runtime)
                implementation(compose.foundation)
            }
        }
        val androidMain by getting
        val desktopMain by getting
        // Configuraciones adicionales para otras plataformas...
    }
}

La sección kotlin especifica las plataformas a compilar. Dentro de sourceSets, se declaran las dependencias para el código compartido y se pueden personalizar para cada conjunto de fuentes específico de una plataforma.

setings.gradle.kts

Este archivo lista todos los módulos que Gradle debe incluir en el proyecto.


rootProject.name = "mi-aplicacion-multiplataforma"
include(":sharedModules")
include(":androidApp")
include(":iosApp")
include(":desktopApp")
include(":webApp")

Esta estructura permite que Gradle entienda las dependencias entre módulos y ejecute tareas de compilación específicas para cada objetivo. Ajustar estos archivos es fundamental para adaptar el proyecto a las necesidades concretas de tu aplicación.

Etiquetas: Kotlin Compose Multiplatform Desarrollo Multiplataforma UI Multiplataforma JetBrains

Publicado el 6-22 02:19

Friki Work