[KtJC] Jetpack Compose 入门

Jetpack Compose 是隶属于 AndroidX 的组件之一，目前还处于 Preview 版本，因此暂时不建议用于正式的产品开发。

曾经在 Kotlin 刚面世时，有过 Anko 这样的强力 UI 框架，只可惜早早的便被废弃了，Jetpack Compose 刚好属于其替代品，并且比 Anko 更为强大。这一篇就来讲讲如何使用该组件，来实现方便的 UI 开发。

---

由于是 Preview 版本，我们必须使用 Android Studio Preview 来体验它，目前推荐的版本为 Android Studio 4.0 Canary 6。

下载完成后，还是得再准备一下环境，必须采用 gradle 6.1 milestone 2 才可以编译 JC 项目。同样的，Kotlin 版本必须为 1.3.61，以及 Gradle 插件版本必须为 4.0.0-alpha。

接下去你可以选择两种办法来体验 JC，一种是新建一个 Empty Compose Activity 项目，另一种是将 JC 的支持添加到现有项目里，具体的做法为修改 build.gradle，加入以下内容:

android {
    ... ...
    buildFeatures {
        compose true
    }
}
... ...
dependencies {
    ... ...
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.ui:ui-framework:0.1.0-dev03'
    implementation 'androidx.ui:ui-layout:0.1.0-dev03'
    implementation 'androidx.ui:ui-material:0.1.0-dev03'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev03'
    implementation "androidx.ui:ui-foundation:0.1.0-dev03"
}

此时就可以使用 Android Studio 来对项目进行构建，需要注意的是 Android Studio 和 IntelliJ IDEA 有细微差别，AS 的 Gradle 面板上没有 Sync 按钮，必须通过菜单内 Build | Make Project 来手动触发一次构建。

成功构建后我们可以看到这样的界面，表示 JC 项目已建立成功，并且可以进行预览了。

---

下面可以来看一下代码了，@Composable 注解表示一个方法是“可组合的”，在 JC 项目中，UI 相关的方法必须标记为 @Composable。而 @Preview 注解则标识了该方法用于预览，预览方法的代码并不会被编译到最终项目内，只是供 IDE 读取的。

在很多情况下，出于各种需要，我们还需要添加多种预览，如下:

这样就可以显示两个预览，可以明显的看到，文字的颜色已被改变。

---

一些写法：

a) 与 Flutter 类似的写法

b) 加载图片

Screen Shot 2019-12-16 at 6.25.57 PM.png

c) Material design

d) 按钮事件

---

好了，就先写到这吧，后面的事情全是发挥想象力的事了。话说啥时候才能用 Kotlin 来写 Flutter，期待已久。