原创_Android Jetpack Compose 最全上手指南，互联网寒冬公司倒闭后

声明式 UI 框架近年来飞速发展，并且被 Web 开发带向高潮。React 更是为声明式 UI 奠定了坚实基础并一直引领其未来的发展。随后 Flutter 的发布也将声明式 UI 的思想成功带到移动端开发领域…

声明式UI的意思就是，描述你想要一个什么样的UI界面，状态变化时，界面按照先前描述的重新“渲染”即可得到状态绝对正确的界面，而不用像命令一样，告诉程序一步一步该干什么，维护各种状态。扯远了，这个并不是今天文章的重点，稍微了解一下就好，其他的就不在本文延伸。关于声明式的更多介绍，建议看看这篇文章：zhuanlan.zhihu.com/p/68275232

我们回到本文的重点Jetpack Compose。

二、Jetpack Compose 介绍

Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包，它基于声明式的编程模型，因此你可以简单地描述UI的外观，而Compose则负责其余的工作-当状态发生改变时，你的UI将自动更新。由于Compose基于Kotlin构建，因此可以与Java编程语言完全互操作，并且可以直接访问所有Android和Jetpack API。它与现有的UI工具包也是完全兼容的，因此你可以混合原来的View和现在新的View，并且从一开始就使用Material和动画进行设计。

三、Jetpack Compose 环境准备和Hello World

每当我们学习一门新的语言，我们都是从一个hello world开始，今天我们也从一个hello world来开始Jetpack Compose 吧! 要想获得Jetpack Compose 的最佳体验，我们需要下载最新版本的Android Studio 预览版本（即Android Studio 4.0）。因为Android Studio 4.0 添加了对Jetpack Compose 的支持，如新的Compose 模版和Compose 及时预览。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFDbn5sN-1638176762409)(https://user-gold-cdn.xitu.io/2019/11/18/16e7cdb8ae434097?imageView2/0/w/1280/h/960/ignore-error/1)]

使用Jetpack Compose 来开始你的开发工作有2种方式：

• 将Jetpack Compose 添加到现有项目
• 创建一个支持Jetpack Compose的新应用

接下来分别介绍一下这两种方式。

1. 将Jetpack Compose 添加到现有项目

如果你想在现有的项目中使用Jetpack Compose，你需要配置一些必须的设置和依赖：

（1）gradle 配置

在app目录下的build.gradle 中将app支持的最低API 版本设置为21或更高，同时开启Jetpack Compose enable开关，代码如下：

android {
defaultConfig {
…
minSdkVersion 21
}

buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
…

// Set both the Java and Kotlin compilers to target Java 8.

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}

kotlinOptions {
jvmTarget = “1.8”
}
}

(2) 使用试验版Kotlin-Gradle 插件

Jetpack Compose 需要试验版的Kotlin-Gradle插件,在根目录下的build.gradle添加如下代码：

buildscript {
repositories {
google()
jcenter()
// To download the required version of the Kotlin-Gradle plugin,
// add the following repository.
maven { url ‘https://dl.bintray.com/kotlin/kotlin-eap’ }
…
dependencies {
classpath ‘com.android.tools.build:gradle:4.0.0-alpha01’
classpath ‘org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25’
}
}

allprojects {
repositories {
google()
jcenter()
maven { url ‘https://