Compose Multiplatform

Compose Multiplatform

JetBrains представляет фреймворк для создания быстрых и реактивных интерфейсов десктопных и веб-приложений на Kotlin. В его основе лежит набор инструментов Google

Compose Multiplatform упрощает и ускоряет разработку интерфейсов десктопных и веб-приложений, позволяя использовать общий код в десктопных, Android- и веб-приложениях.

Начало работы

Десктопные приложения

Compose for Desktop обеспечивает декларативный и реактивный подход к разработке десктопных пользовательских интерфейсов на Kotlin. Комбинируйте composable-функции для создания интерфейса и наслаждайтесь полной поддержкой инструментов в вашей IDE и системе сборки — применять XML или язык шаблонов не требуется.

Compose for Desktop нацелен на JVM и использует мощную нативную графическую библиотеку Skia для поддержки высокопроизводительного аппаратно ускоренного UI-рендеринга на основных десктопных платформах (macOS, Windows и Linux). Дистрибутивы нативных приложений можно создать в один клик.

Windows

Windows

macOS

macOS

Linux

Linux

Веб-приложения

Compose for Web позволяет создавать реактивные пользовательские интерфейсы для веб-приложений на Kotlin, используя концепты и API Jetpack Compose для описания состояния, поведения и логики приложения.

Compose for Web предлагает разные способы объявления пользовательских интерфейсов в коде Kotlin. Это позволяет вам полностью контролировать верстку веб-сайта с помощью декларативного DOM API.

Веб

Веб

Возможности Compose for Desktop

Расширения рабочего стола, такие как меню, сочетания клавиш, операции с окнами, управление уведомлениями и прочее.

Аппаратное ускорение рендеринга с помощью Skia.

Эффективный рендеринг текста и макеты для многих языков.

Отличная совместимость c AWT и Swing.

Использование кода из Android-приложений на основе Jetpack Compose при помощи Kotlin Multiplatform.

Совместимость с Android Compose на уровне UI-элементов.

Поддержка создания автономных пакетов приложений.

Другие возможности

Возможности Compose for Web

Поскольку в Compose for Desktop и Android используется тот же реактивный движок, можно использовать общую кодовую базу.

Фреймворк для создания интерфейса с широкими возможностями на Kotlin/JS.

Удобный Kotlin DOM DSL, охватывающий все самые распространенные сценарии фронтенд-разработки.

Комплексный API CSS-in-Kotlin/JS.

Другие возможности

Начало работы с Compose for Desktop

Узнайте о возможностях Compose for Desktop из наших уроков.

С чего начать

В этом уроке рассказывается, как создать простое десктопное UI-приложение с помощью фреймворка Compose для интерфейсов.

Просмотреть урок

Приложение для просмотра изображений

Пример галереи для просмотра изображений с удаленного сервера, которая использует Compose for Desktop и Android.

Подробнее о приложении

Пример инструмента для просмотра задач

Инструмент для просмотра задач на GitHub, написанный с помощью Compose for Desktop.

Подробнее о приложении

Больше материалов на GitHub

Начало работы с Compose for Web

Узнайте о возможностях Compose for Web из наших уроков.

С чего начать

В этом уроке рассказывается, как создать первое веб UI-приложение с помощью Compose for Web.

Просмотреть урок

Пример лендинга

Пример лендинга, созданного с помощью Composable DOM API и DSL для управления стилями

Посмотреть исходный код

Пример приложения «Падающие мячи»

Пример демонстрирует использование мультиплатформенных виджетов с совместным использованием кода пользовательского интерфейса в Compose for Desktop и Web.

Посмотреть исходный код

Играть

Больше материалов на GitHub

Примеры кода

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

}

}

)

}

Присоединяйтесь к обсуждениям в Slack: канал #compose-desktop посвящен десктопной части Compose Multiplatform, канал #compose-web — веб-части, а в канале #compose можно обсудить общие темы, связанные с Compose и Jetpack Compose.