自学内容网 自学内容网
自学内容网 > 正文

001-Kotlin界面开发之Jetpack Compose Desktop学习路径

🕗 发布于 2024-11-05 14:35 kotlin  学习  开发语言  jetpack compose  compose desktop  

Compose Desktop学习之路

在这里插入图片描述

学习过程

理解Kotlin的基本语法

Compose Desktop采用Kotlin构建，因此对Kotlin的基本语法有很好的理解是必不可少的。你可以从官方的Kotlin文档开始。

用一句话概括，Kotlin是一种现代的、静态类型的编程语言，它结合了面向对象和函数式编程的特性。用通俗的话说，Kotlin就是Java的含糖量爆表的全新版本。它非常现代，也非常简洁，同时还保留了Java的一些优点。

学习Kotlin的基本语法，包括变量、函数、类、接口、扩展函数、数据类、枚举类等，是学习Compose Desktop的基础。但是一个Java程序员，应该很快就能掌握Kotlin的基本语法。并且，JetBrains提供了一个非常好的在线Kotlin Playground，你可以在这里练习Kotlin的基本语法。JetBrains的免费Java开发环境IntelliJ IDEA也支持Kotlin，你可以在IntelliJ IDEA中创建一个Kotlin项目，并且支持把Java代码转换为Kotlin代码。

糖度高、身体好，Kotlin是Java程序员的福音。

开发环境搭建

  • 安装IntelliJ IDEA：这是Kotlin和Compose Desktop开发的推荐IDE。
  • 安装JDK：确保你安装了最新的JDK。
  • 创建一个新项目：使用IntelliJ IDEA创建一个带有Compose Desktop支持的Kotlin项目。

这几个步骤就已经完成了Compose Desktop的开发环境搭建。

学习Jetpack Compose的基础知识

Jetpack Compose是Compose Desktop的基础。从官方的Jetpack Compose文档开始，了解核心概念。

这个部分主要包括一些非常基础的概念，如：

  • Composable函数的概念
  • GUI界面的概念
  • Material Design的概念
  • 界面布局的概念
  • 基本的UI组件，如Button、TextField、Checkbox等

探索多平台Compose

  • 官方文档：参考Compose Multiplatform文档.
  • 示例项目：在GitHub上探索可用的示例项目，看看Compose Desktop在实际应用中是如何使用的。

Compose Desktop应用示例

首先，我们来看一个最简单的Compose Desktop应用示例。这个示例展示了如何创建一个简单的窗口，并在窗口中显示一段文本。

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import java.awt.Dimension

@Composable
@Preview
fun App() {
    MaterialTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("您好, Compose Desktop!", style = MaterialTheme.typography.h3)
        }
    }
}

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "Compose Desktop Demo 000"
    ) {
        App()
    }
}

这个代码，跟JavaFx的实际上比较类似，JavaFx中的容器、布局类、空间类，在Compose Desktop中都有对应的概念，只是Compose Desktop采用可组合函数的方式来实现。

而在编译这个代码之前，最好先把Gradle的下载地址换个国内的镜像，就在gradle/wrapper/gradle-wrapper.properties文件中，把distributionUrl的地址换成国内的镜像地址，比如https\://services.gradle.org/distributions/gradle-8.7-bin.zip，更换为distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.7-bin.zip。这样下载速度会快很多。

另外就是在build.gradle.kts文件中，添加国内的maven仓库地址，如下：

repositories {
    maven(url = "https://maven.aliyun.com/repository/public")
    mavenCentral()
}

当然，在你的settings.gradle.kts中同样需要增加maven("https://maven.aliyun.com/repository/public/")。

pluginManagement {
    repositories {
        maven("https://maven.aliyun.com/repository/public/")
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
        google()
        gradlePluginPortal()
        mavenCentral()
    }

    plugins {
        kotlin("jvm").version(extra["kotlin.version"] as String)
        id("org.jetbrains.compose").version(extra["compose.version"] as String)
        id("org.jetbrains.kotlin.plugin.compose").version(extra["kotlin.version"] as String)
    }
}

就算是都加上了，IDEA还是要卡一会，因为傻瓜的IDEA也要从遥远的地方下载kotlin那一套。

这两个步骤完成之后，就可以编译这个Compose Desktop应用程序了。

在这里插入图片描述

可以调用gradle run命令来运行这个应用程序。

还能用gradle createRuntimeImage命令来创建一个可执行文件，这个可执行文件可以在没有安装JDK的机器上运行。

大概在build/compose/binaries/app/Demo000目录下，有一个可执行文件，双击这个文件就可以运行这个应用程序。整个目录大概170MB左右。当然，这都不重要……

理解状态管理

学会如何在Compose Desktop中管理状态。这对于构建交互式应用程序至关重要。这个地方实际上是Compose Desktop的核心，也是最难的地方。

Compose Desktop的核心思想是函数式编程，状态管理是函数式编程的核心。Compose Desktop提供了一些函数来帮助我们管理状态，如remember和mutableStateOf。这些函数可以帮助我们在Compose Desktop中管理状态，使得我们的应用程序更加健壮和易于维护。

探索布局和修饰符

布局是一切GUI设计的中心工作之一。

理解不同的布局组合（Box、Column、Row等）以及如何使用Modifier来设计和定位UI元素，是构造Compose Desktop应用程序的主要工作内容。

用户输入的处理

学会如何使用Button、TextField和Checkbox等组合来处理用户输入。

一方面要掌握工具，也就是具体的用于处理用户输入的组合函数，另一方面也要仔细学习不同组件的实际用途，跟需求分析结合在一起。

列表

显示数量不定的数据是GUI设计的常见需求。Compose Desktop提供了LazyColumn和LazyRow等组合函数来处理这种情况。

高级主题

  • 自定义绘图：学会如何使用Canvas组合来创建自定义绘图。
  • 动画：探索如何为Compose Desktop应用程序添加动画。
  • 互操作性：了解如何与现有的Swing应用程序进行互操作。

测试

学会为Compose Desktop应用程序编写测试，以确保它按预期工作。

Compose Desktop提供了一些测试工具，如ComposeTestRule和onNode，可以帮助我们编写测试。这些工具可以帮助我们确保我们的应用程序按预期工作，同时也可以帮助我们快速定位和修复问题。

应用部署

学会如何使用compose.desktop.application插件打包和分发Compose Desktop应用程序。

总结

Compose Desktop是一个非常强大的桌面应用程序框架，它提供了一种现代、简洁、易于使用的方式来构建桌面应用程序。学习Compose Desktop需要掌握Kotlin的基本语法、Jetpack Compose的基础知识、状态管理、布局和修饰符、用户输入的处理、列表、高级主题、测试和应用部署等内容。

通过上面的学习过程，就有可能获得对Compose Desktop较深入的理解，并能够构建自己的桌面应用程序。

那么，就让我们开始这段……感情……哦不……旅程吧……


原文地址：https://blog.csdn.net/withstand/article/details/143406776

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024