Compose Multiplatform

Compose Multiplatform

Schnelles, reaktives Kotlin-Framework für Desktop- und Web-UIs, basierend auf dem modernen Toolkit von Google und bereitgestellt von JetBrains

Compose Multiplatform vereinfacht und beschleunigt die UI-Entwicklung für Desktop- und Webanwendungen und ermöglicht eine weitgehende gemeinsame Nutzung von UI-Code auf den Plattformen Android, Desktop und Web.

Erste Schritte

Desktop-App

Compose for Desktop ermöglicht einen deklarativen und reaktiven Ansatz für die Entwicklung von Desktop-Bedienoberflächen mit Kotlin. Kombinieren Sie Composing-fähige Funktionen, um Ihre Bedienoberfläche zu erstellen, und profitieren Sie von einer vollständigen Unterstützung durch Ihre IDE und Ihr Build-System. Eine spezielle XML- oder Template-Sprache wird nicht benötigt.

Compose for Desktop zielt auf die JVM ab und ermöglicht ein leistungsstarkes, hardwarebeschleunigtes UI-Rendering auf allen wichtigen Desktop-Plattformen (macOS, Windows und Linux) durch Nutzung der nativen Hochleistungs-Grafikbibliothek Skia. Sie können mit einem einzigen Klick eine native Distribution Ihrer Anwendung erstellen.

Windows

Windows

macOS

macOS

Linux

Linux

Web-App

Mit Compose for Web können Sie reaktive Web-Bedienoberflächen in Kotlin entwickeln, indem Sie den Zustand, das Verhalten und die Logik Ihrer Anwendung mithilfe der Konzepte und APIs von Jetpack Compose definieren.

Compose for Web bietet zahlreiche Möglichkeiten, Bedienoberflächen in Kotlin-Code zu deklarieren, sodass Sie mit einer deklarativen DOM-API die vollständige Kontrolle über Ihr Website-Layout erhalten.

Web

Web

Compose for Desktop – Merkmale

Desktop-Erweiterungen für Menüs, Tastenkombinationen, Fenstermanipulation, Benachrichtigungsverwaltung und mehr.

Hardwarebeschleunigtes Rendering mit Skia.

Leistungsstarkes Text-Rendering und Layout für viele Sprachen.

Hervorragende Interoperabilität mit AWT und Swing.

Code-Sharing mit Jetpack-Compose-Android-Anwendungen über Kotlin Multiplatform.

Android-Compose-Kompatibilität auf der Ebene der UI-Elemente.

Unterstützung für die Erstellung eigenständiger Anwendungspakete.

Alle Merkmale sehen

Compose for Web – Merkmale

Die Verwendung derselben reaktiven Engine, die auf Android/Desktop eingesetzt wird, ermöglicht die Entwicklung einer gemeinsamen Codebasis.

Framework für die Entwicklung von reichhaltigen UIs für Kotlin/JS.

Komfortable Kotlin-DOM-DSL für alle gängigen Frontend-Entwicklungsszenarien.

Umfassende CSS-in-Kotlin/JS-API.

Alle Merkmale sehen

Erste Schritte mit Compose for Desktop

Arbeiten Sie unsere Tutorials durch, um mehr über die Möglichkeiten von Compose for Desktop zu erfahren.

Tutorial für den Einstieg

In diesem Tutorial erstellen wir eine einfache Desktop-UI-Anwendung mit dem Compose-UI-Framework.

Tutorial ansehen

Bildbetrachter

Beispiel einer Bildergalerie, die Bilder von einem Remote-Server anzeigt; erstellt mit Compose for Desktop und Android.

App erkunden

Beispielapp „Ticketbrowser“

GitHub-Ticketbetrachter, entwickelt mit Compose for Desktop.

App erkunden

Auf GitHub mehr erkunden

Erste Schritte mit Compose for Web

Arbeiten Sie unsere Tutorials durch, um mehr über die Möglichkeiten von Compose for Web zu erfahren.

Tutorial für den Einstieg

In diesem Tutorial erstellen wir eine erste Web-UI-Anwendung mit Compose for Web.

Tutorial ansehen

Beispielhafte Landingpage

Beispielhafte Landingpage, erstellt mit der Composable-DOM-API und der Stylesheet-DSL.

Quellcode erkunden

Beispiel-App „Fallende Bälle“

Dieses Beispiel demonstriert die Verwendung von Multiplattform-Widgets. Dabei wird in Compose for Desktop und Compose for Web gemeinsamer UI-Code verwendet.

Quellcode erkunden

Spielen

Auf GitHub mehr erkunden

Codebeispiele

Pointer Events

fun main() = singleWindowApplication {

var isActivated by remember { mutableStateOf(false) }

var isHovered by remember { mutableStateOf(false) }

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

Box(

Modifier

.size(size)

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

.onPointerEvent(PointerEventType.Enter) { isHovered = true }

.onPointerEvent(PointerEventType.Exit) { isHovered = false }

.onPointerEvent(PointerEventType.Press) {

if (it.buttons.isPrimaryPressed) {

isActivated = true

} else if (it.buttons.isSecondaryPressed) {

isActivated = false

}

}

)

}

Im #compose-desktop-Kanal des Kotlin-Slacks können Sie sich über den Desktop-Teil von Compose Multiplatform austauschen, der #compose-web-Kanal steht für den Web-Teil von Compose Multiplatform zur Verfügung, und auf #compose finden allgemeine Diskussionen zu Compose und Jetpack Compose statt.