之前我好几篇文章都提到了 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，继续给大家提供方便。
