[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，继续给大家提供方便。