Недавно JetBrains анонсировала предварительную версию Jetpack Compose для настольных компьютеров . Поскольку Jetpack Compose – это следующая важная вещь в пользовательском интерфейсе Android и у меня всегда была страсть к рабочему столу, я чувствовал, что просто должен знать, как выглядит и ощущается Compose for Desktop. Лучший способ узнать что-то новое – это использовать его и играть с ним. Поэтому я решил попробовать преобразовать пользовательский интерфейс Java Swing в Compose Desktop.
Следуйте за мной в моем путешествии.
Приложение, которое я буду преобразовывать, старое, очень старое. Он называется TKDupeFinder . Его единственная цель – найти дубликаты файлов. Как только пользователь вводит базовый каталог, приложение просматривает все дочерние папки и выполняет поиск файлов с одинаковым хэшем MD5. Они отображаются в виде списка. Затем пользователь может открыть эти файлы и удалить дубликаты. Более десяти лет приложение было похоронено в глубинах моего жесткого диска. Пару дней назад я создал репозиторий на GitHub и нажал на исходный код. Именно здесь произойдет трансформация.
Первый шаг – сделать исходный код Kotlin готовым. Первоначально приложение было написано на Java с использованием NetBeans и Maven. Хотя для NetBeans все еще существует плагин Kotlin, он, похоже, больше не разрабатывается активно. Поэтому я решил перенести проект в IntelliJ. Я также переключился на Gradle. В то время как вы можете легко использовать Kotlin с Maven, текущая документация Jetpack Compose для предварительного просмотра на рабочем столе сосредоточена на Gradle. Давайте напишем Kotlin main() -функцию, которая запускает приложение Swing:
package com.thomaskuenneth.tkdupefinder
import javax.swing.SwingUtilities
import javax.swing.UIManager
import javax.swing.UnsupportedLookAndFeelException
fun main() {
SwingUtilities.invokeLater {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName())
} catch (thr: ClassNotFoundException) {
System.err.println(thr.localizedMessage)
} catch (thr: InstantiationException) {
System.err.println(thr.localizedMessage)
} catch (thr: IllegalAccessException) {
System.err.println(thr.localizedMessage)
} catch (thr: UnsupportedLookAndFeelException) {
System.err.println(thr.localizedMessage)
}
TKDupeFinderGUI().isVisible = true
}
}
Неплохо, но это не то, чем мы хотим заниматься дальше, мы хотим создать пользовательский интерфейс, верно? Взгляните на этот каркас:
Итак, нам нужны несколько кнопок, метка, список и текстовое поле. Вот как мы могли бы все организовать.
package com.thomaskuenneth.tkdupefinder
import androidx.compose.desktop.Window
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LastBaseline
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
fun main() = Window(title = "TKDupeFinder", size = IntSize(600, 400)) {
MaterialTheme {
Column() {
FirstRow()
SecondRow()
ThirdRow()
}
}
}
@Composable
fun FirstRow() {
val name = remember { mutableStateOf(TextFieldValue("")) }
Row(
modifier = Modifier.fillMaxWidth()
.padding(8.dp),
) {
TextField(
value = name.value,
placeholder = {
Text("Base directory")
},
modifier = Modifier.alignBy(LastBaseline)
.weight(1.0f),
onValueChange = {
name.value = it
},
)
MySpacer()
Button(
onClick = {},
modifier = Modifier.alignByBaseline(),
) {
Text("Find")
}
}
}
@Composable
fun SecondRow() {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
.padding(8.dp),
) {
Button(onClick = {}) {
Text("\u140A")
}
MySpacer()
Button(onClick = {}) {
Text("\u1405")
}
MySpacer()
Text(text = "1 of 42")
}
}
@Composable
fun MySpacer() {
Spacer(modifier = Modifier.width(8.dp))
}
@Composable
fun ThirdRow() {
val scrollState = rememberScrollState()
ScrollableColumn(
scrollState = scrollState,
modifier = Modifier.fillMaxSize().padding(8.dp),
) {
Text("1")
Text("2")
Text("3")
}
}
На macOS это выглядит следующим образом:
Так вот, это наверняка всего лишь очень грубый срез. Но мы будем работать над этим. Так что следите за обновлениями.
Оригинал: “https://dev.to/tkuenneth/from-swing-to-jetpack-compose-desktop-1-12kf”