JetPack Compose для настольных компьютеров — первый опыт

задняя часть внешний интерфейс

JetPack Compose для настольных компьютеров — первый опыт

图源作者

До сих пор мы видели только в Android-разработкеJetpack Compose. Сегодня мы вступаем в совершенно новую фазу, поскольку JetBrains анонсирует раннюю версию IntelliJ, которая позволяет создавать приложения для Windows с помощью Jetpack Compose.

В будущем я планирую написать несколько статей о том, как использовать Jetpack Compose для рабочего стола, это первая статья в этой серии. В прошлом месяце JetBrains выпустила Compose для настольных компьютеров Milestone 2, предоставив разработчикам лучший опыт разработки и удобство использования.

Как всегда, JetBrains продолжает пытаться упростить процесс разработки для разработчиков, предлагая эксклюзивную регистрацию проектов. В более ранней версии Compose для настольных компьютеров они добавили в IntelliJ руководство по настольным проектам, что позволило нам настроить наши проекты за считанные секунды.

Перед началом разработки необходимо установитьIntelliJ IDEA2020.3 или новее.

Быстрое начало работы с шаблонами проектов

Как я уже говорил ранее, шаблон проекта является одним из лучших людей Intellij. После установки IDE запустите приложение. Вы увидите следующий интерфейс:

然后点击顶部栏的 "New Project "按钮，这一操作将会跳转至选择应用程序类型的界面。 Следующим образом:

Сначала нам нужно выбрать Kotlin в левом меню, затем изменить имя и местоположение проекта. После этого нам нужно выбрать шаблон проекта. Это важный шаг в настройке вашего проекта. Нам нужно выбрать шаблон рабочего стола из списка шаблонов проектов, который можно найти, прокрутив вниз. Затем нужно выбрать JDK проекта, здесь я рекомендую использовать JDK 11.

Затем нажмите кнопку «Далее», которая перейдет к экрану для подтверждения модуля Compose. Теперь нажмите кнопку «Готово», и IntelliJ настроит для вас весь проект, автоматически загрузив соответствующий градиент.

Запустите свое первое настольное приложение

Если все пойдет хорошо, вы увидите следующий интерфейс, когда весь проект рабочего стола будет загружен:

На этом этапе вы можете запустить приложение. по определенным причинам,Main.ktРядом с кнопкой «Выполнить» в правом верхнем углу по умолчанию не выбрано, поэтому будет предложено настроить проект. Для решения этой проблемы необходимоMain.ktНажмите зеленую кнопку «Выполнить» рядом с основной функцией в файле.

После успешного запуска вы увидите вывод ниже с кнопкой, содержащей текст «Hello, World!». Если вы нажмете на нее, текст внутри кнопки изменится на «Привет, рабочий стол!», давайте посмотрим, как это отразится на реальном опыте.

Исследуйте код

Как видите, это простая программа Hello World — совсем не сложная. Большая часть кода похожа на пользовательский интерфейс Jetpack Compose в Android.

Main.kt— это файл Kotlin, содержащий код, связанный с выводом. Он выполняет основную функцию точки входа для запуска приложения. код отWindowФункция запускается, открывая окно с заданным содержимым. Для первоначальной настройки свойств окна требуется несколько параметров, таких какtitle,size,location,centered,contentЖдать.

fun main() = Window {
}

В этом случае нам нужно только передать значение параметру содержимого и оставить остальные параметры со значениями по умолчанию. В следующем коде мы объявляемrememberфункциональныйtextпеременная, начальное значение которой равноHello, World!. Следующим образом:

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }
}

В декларативной системе пользовательского интерфейса сам код описывает пользовательский интерфейс. Нам нужно описать пользовательский интерфейс в любой момент времени, а не только в начальный момент. В компонентах пользовательского интерфейса, таких как кнопки, текстовые поля и т. д., мы используемrememberкак текстовое состояние, чтобы при обновлении в будущемtextКогда отображается переменная, представление, связанное с этой переменной, также обновляет отображаемый текст.

Чтобы понять это лучше, я рекомендую прочитать следующие статьи.

Jetpack Compose Components (Part 2)

Следующий фрагмент кода должен определить кнопку с функцией щелчка и установить тему материала для всего окна приложения. Следующим образом:

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        Button(onClick = {
            text = "Hello, Desktop!"
        }) {
            Text(text)
        }
    }
}

Суммировать

В настоящее время Jetpack Compose находится на очень ранней стадии как для настольных компьютеров, так и для Android, но по-прежнему показывает большой прогресс в создании пользовательских интерфейсов. Такие фреймворки, как Jetpack Compose, в сочетании с мощью Kotlin повысят производительность разработчиков и дадут им возможность работать на разных платформах.

картинаGurupreet SinghТакие разработчики очень активно участвуют в выпуске Compose и создают ценные ресурсы, такие какComposeCookBook), чтобы помочь другим разработчикам. Он также создал из Android-приложения Composethe Spotify desktop clone, который дал мне много вдохновения.

пожертвовать

Если вы новичок в Jetpack Compose, вы можете начать здесь.

Выше приведено полное содержание этой статьи. Надеюсь, эта статья может быть вам полезна. Спасибо за прочтение.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории