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 SchritteDesktop-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
macOS
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
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.
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.
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.
Bildbetrachter
Beispiel einer Bildergalerie, die Bilder von einem Remote-Server anzeigt; erstellt mit Compose for Desktop und Android.
Beispielapp „Ticketbrowser“
GitHub-Ticketbetrachter, entwickelt mit Compose for Desktop.
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.
Beispielhafte Landingpage
Beispielhafte Landingpage, erstellt mit der Composable-DOM-API und der Stylesheet-DSL.
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.
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.