Как сделать настольное приложение Jetpack Compose

Реактивный ранец

Как сделать настольное приложение Jetpack Compose

Практическое руководство

В этом руководстве вы изучите минимум для создания настольного приложения HelloWorld с помощью Jetpack Compose for Desktop в Kotlin.

Уровень: для новичков в написании для ПК.
Требования: установлена Java.
Окончательный образец: github.
Окончательный интерфейс:

1. Настройте проект

Во-первых, для настройки проекта вам понадобится скелет проекта Gradle с корнем build.gradle, settings.gradle и app/build.gradle.
Давайте сделаем это, используя kts файлов, чтобы использовать только один язык: Kotlin ❤️

build.gradle.ktsСоздайте build.gradle.kts в корне проекта со следующим, чтобы определить проект gradle с компоновкой maven.

settings.gradle.ktsДобавьте в корень проекта settings.gradle.kts для определения имени проекта и gradle модуля app.

rootProject.buildFileName = "build.gradle.kts"
rootProject.name = "medium-proto"
include(":app")

app/build.gradle.kts
Добавьте в app/build.gradle.kts плагин для создания:

plugins {
    kotlin("jvm")
    // https://github.com/JetBrains/compose-jb/releases
    id("org.jetbrains.compose") version "1.2.0-alpha01-dev686"
}

Затем добавьте зависимость:

dependencies {
    implementation(compose.desktop.currentOs)
}

Наконец, определите точку входа приложения:

compose.desktop.application.mainClass = "com.medium.MainKt"

Последние штрихи

Затем, чтобы скомпилировать приложение, добавьте в корень проекта файл gradlew и папку gradle. Вот как получить файл. В MacOS вы можете сделать это с помощью этой команды в корневом проекте: brew install gradle && gradle wrapper.

2. Создайте основной вид

Создайте файл kotlin app/src/main/kotlin/com/medium/Main.kt с

Этот файл содержит определение приложения с окном, содержащим

onCloseRequest: Закрытие приложения при нажатии кнопки закрытия окна.
state: Размер окна в dp, метрическая мера.
title: заголовок на верхней панели окна.

Внутри лямбды метода Window вы можете написать код JetPack Compose «как» в приложении для Android. Здесь было добавлено Box в max-width и max-height, чтобы центрировать текст в окне. Box — это контейнер, который позволяет Text иметь выравнивание Center.

3. Соберите и запустите приложение

Получите разрешение на запуск скрипта через команду chmod 755 ./gradlewЗатем запустите ./gradlew run и тада:

Спасибо команде JetBrains и участникам JetPack Compose и JetPack Compose Desktop.

Дальше

Как создать установочный файл MacOS pkg, чтобы избежать использования jar: используйте jpackage
Как добавить иконку приложения: образцы cf в этом проекте
Как выпустить как нативное приложение, чтобы избежать jvm: cf этот же репозиторийy

Как сделать настольное приложение Jetpack Compose

Реактивный ранец