Android Jetpack Compose 超快速上手指南

Compose 介绍

Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码，更强大的功能，能提高开发速度（可以参考几乎一模一样的Flutter，开发速度确实很快）。

Jetpack Compose对于没有接触过声明式UI的小伙伴可能会学习曲线有点陡峭，对于已经能熟练开发Flutter应用的小伙白来说几乎没有难度。（Compose就是参考flutter的模式开发的，代码中还可以看到Flutter的相关注释）

这篇文章不回去解释过多的原理与技巧，只要是让你能够快速上手开发项目。

目前Jetpack Compose 为 Alpha 版。所以需要在 Android Studio 的 Canary 版本才能体验。下载 ANDROID STUDIO CANARY 版

1. 创建 Jetpack Compose 项目

在 Android Studio Canary 版本中已经提供了 Compose 的模板，在创建项目时选择 Empty Compose Activity 模板即可。

至此，就完成一个 Compose 项目的创建。除此之外，我们也可以选择导入 Jetpack Compose 示例应用，操作步骤参照 Jetpack Compose Sample 操作步骤。

2. Compose 函数使用

Compose 是一种以函数为依托的声明式 UI 构建方式。比如在 MainActivity.kt 中显示一个文本。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello Compose!")
        }
    }
}

这个与使用 XML 布局的方式差别很大，setContent 块定义了 Activity 的布局。我们不使用 XML 文件来定义布局内容，而是调用一个 Compose 函数，比如上面的 Text 函数。然后 Jetpack Compose 使用自定义 Kotlin 编译器插件将这些 Compose 函数转换为应用的界面元素。

2.1 Compose 函数

Jetpack Compose 是围绕 Compose 函数构建的，在开发时只需描述应用界面的样式布局和数据依赖关系，而不必关注界面的构建过程。给一个函数添加 @Composable 注解即创建了一个 Compose 函数。注意，Compose 函数只能在其他 Compose 函数的范围内调用。 下面我们将上面示例中的 Text 移动到自定义的 Compose 函数中。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloCompose()
        }
    }

    @Composable
    fun HelloCompose() {
        Text("Hello Compose!")
    }
}

2.3 设置点击监听

除了使用 Text 函数，还有其它的基础函数供我们使用，比如 Button、Image 等。那么如何给 UI 控件设置点击监听呢？在 Compose 框架中提供了两种方式：

• 对于类似 Button 函数的这种，提供了 onClick 函数式接口供外部设置点击监听；
• 对于类似 Text 函数这种，没有提供显式接口设置的