kotlin能用嵌入式linux,[Kotlin/Native] 踩坑，在 K/N 里使用 libui

之前我好几篇文章都提到了 Kotlin 官方的插件新建项目不给力的情况，总是要自己改 gradle 脚本，因此之前也写了一个名为 KtGen 项目生成工具(点击查看)。

然而基于 JVM 的代码总有一些小问题，比如说对 Kotlin 库的编译依赖，运行时对 JRE 的依赖，以及 swing UI 不那么美观等等，总有那么些时候会希望使用原生的 UI 框架来进行开发。

终于还是在 github 上找到了一个开源的原生 UI 库，看着非常强大，也就拿来尝试一下了。不得不说，自从 Flutter 在 2015 年发布以后(写这个的时候自己惊了一下，原来 Flutter 这么久了)，UI 代码的写法就越来越简单了，也越来越像了，比如说 2017 年发布的 kotlin anko，今年的 swiftUI 等，而如果我没有记错的话，K/N 的 UI 框架是在 anko 发布后不久就诞生了。

好了，闲话不多说，让我们来看看倒底是什么好货。

我们可以从 github 上找到这个项目(点击进入)，为了方便使用，作者早已将它发布到 jcenter，目前支持 Windows, Mac, Linux 三大平台。下面我们就直接来使用它，为了方便起见，本篇只讲述 Mac 下如何开发。

首称还是新建 Kotlin/Native 项目，然后修改 build.gradle 如下:

plugins { id 'kotlin-multiplatform' version '1.3.31' } repositories { mavenCentral() jcenter() } kotlin { macosX64("macos") { binaries { executable { entryPoint 'main' } } } sourceSets { macosMain { dependencies { implementation 'com.github.msink:libui-macosx:0.1.3' } } } }

此处需要加入 jcenter，默认的 MavenCentral 是拉不到依赖的，作者并没有往那里发布。

我的目的很简单，即实现原先 KtGen 的界面，你可以直接参考我先前的代码，要实现同样的界面，在 libui 下的代码是这样的:

fun TabPane.Page.ktorPane(type: Int , hasPackage: Boolean = true) = vbox.gridpane { if (hasPackage) { label("Package Name"); textfield { hexpand = true }; row() } label("Project Name"); textfield { hexpand = true }; row() button("Destination"); textfield { hexpand = true; readonly = true }; row() xspan = 2 halign = uiAlignCenter valign = uiAlignStart gridpane { button("Generate") { action { MsgBox("Hint", "type => $type") } } } } fun main() = appWindow("Sample", 600, 220) { tabpane { page("Ktor") { ktorPane(0) } page("KtNode") { ktorPane(1) } page("KtJS") { ktorPane(2, false) } page("KtorReact") { ktorPane(3) } page("Native") { ktorPane(4) } } }

好了，是不是觉得非常的简单？这些代码布局出来的效果是这样的:

布局效果

到这里，目标达成，下面就是逻辑代码了，在本篇不讲述。

这里有几个坑，是需要非常注意的。

其一是在布局过程中，如果对对齐方式等进行了设置，那么设置的代码仅对设置后的组件有效，所以你可以实现这样的布局:

vbox.gridpane { halign = uiAlignStart // 居左对齐 label("Label1") halign = uiAlignCenter // 居中对齐 label("Label2") }

一开始写的时候，往往会认为一个 UI 容器只能有一种对齐方式，所以把 halign 这类的代码写在容器的头部，导致后面很多东西都必须再套容器，代码就相当复杂了，实事上并没有必要那样写。

其二，引用 libui 的时候，出于一些不知道的原因，诸如 uiAlignStart 这样的常量其实是丢失了的，写代码时 IDE 报红，但是编译时又正常能过，为了能看起来舒服一些，需要将这些常量补齐，至于说怎么补，就只能看发布前的源码了:

val uiAlignFill = 0.toUInt() val uiAlignStart = 1.toUInt() val uiAlignCenter = 2.toUInt() val uiAlignEnd = 3.toUInt()

其三，直接用 gradle 编译是必然要报错的，异常信息是找不到 libui。这里可能你就会觉得奇怪了，不是已经引用了 libui-macosx 吗？平台也指定好了，写代码的时候也能提示了，怎么会编不过去呢。仔细分析一下，在 K/N 里的依赖引用，其实只是对库定义的引用，而没有对实际库的引用，所以我们需要手动的添加链接。

这了正常添加链接，还是得把完整的 libui 整个项目 clone 下来，然后编译得到 .klib 和 .a:

$ git clone https://github.com/msink/kotlin-libui.git $ cd kotlin-libui/libui $ gradle build

构建完成后，可以在 kotlin-libui/libui/build 下找到 .klib 和 .a，把这两个文件都拷到项目的根目录下，然后在 build.gradle 内添加链接选项:

macosX64("macos") { binaries { executable { entryPoint 'main' linkerOpts '-L. -lui' } } }

接着，就可以正常编译了，对于 libui 的介绍到此也告一段落，后续我会完成原生的 KtGen 和相关的 CLI，继续给大家提供方便。