Jetpack Compose实战教程（一）

Jetpack Compose实战教程（一）

第一章 搭建环境、初识Compose

---

---

前言

自从官方推出了Jetpack之后，也引导我们从以前的MVC/MVP框架转变为MVVM框架，推出的一系列组件加速了我们开发更安全的应用。然而这些都仅限于代码逻辑层面，UI层仍然是命令式的XML布局，现在它得以改变。Compose出现了，一套全新的声明式UI框架，将彻底颠覆已经实行10多年的XML布局方式。

---

一、Compose是什么？

Compose是Jetpack下的一套UI框架，和苹果的swift类似，是一种声明式UI框架。

有小伙伴可能不清楚什么叫命令式UI，什么叫声明式UI。

简单解释一下，以往我们使用的xml布局，如果要改变布局中控件的内容，需要给这个控件设置一个id，然后代码通过这个id获取到控件，然后再改变它的内容，这个改变的过程就像是我们在发布指令，所以它是命令式UI。而Compose不同，我们通过设置一个变量，令组件的内容为这个变量，当我们改变这个变量值的时候，UI会自动改变，这种就是声明式UI；我们声明了这个组件的值为一个变量，变量改变，那么组件的内容就会自动改变。

提示：Compose使用Kotlin语言，如果您对于Kotlin语言不懂的话，请先移步学习一下Kotlin。链接->Java转Kotlin

二、搭建环境

1.下载最新版android studio

大家可以自行至官网下载最新稳定版android studio。此文发布时，官网最新稳定版为：Dolphin | 2021.3.1。当然，您也可以移步Preview区下载最新的预览版，提前体验最新的功能。

2.配置环境

安装好android studio之后，我们先来创建一个项目，请选择File->New->New Project->Phone and Tablet->Empty Compose Activity。它将为我们创建一个基础的Compose布局

初识Compose

1.项目结构

项目创建好了，等待片刻，让系统下载一些必要组件构建项目，让我们来看一下Compose的项目构造如何

可以看到，系统创建了ui.theme文件夹，里面包含了Color、Shape、Theme、Type等文件，因为Compose是使用Kotlin代码来创建布局，所以样式也相应创建了文件；同时我们留意到，res目录下没有了layout文件夹，我们的项目是可以同时兼容xml的布局方式的，所以各位看官可以放心大胆的将Compose引入到项目中，旧的工程保持不变，新的文件使用Compose即可

2.Hello Android

学习一门语言几乎所有的第一句都是Hello World！，而这次不同，我们学习的是android的一套新UI组件，于是官方的例子俏皮的改成了Hello Android

让我们来看看变化。
1.setContentView()函数不见了，取而代之的是setContent函数。

提示：这里我强烈建议各位看官对于新鲜的函数点击进去看看源码，例如如果点击查看setContent的源码，你会发现最终调用的仍然是setContentView函数

2.Greeting函数上方有Composeable注解。请留意，这是必须的，因为函数里面使用到了Compose的组件 Text，所有使用Compose组件的函数都必须有Composeable注解。有人要问了，那为什么onCreate函数没有Composeable注解？你点击看看setContent的源码就明白了

3.DefaultPreview函数不仅有Composeable注解，还有Preview注解。没错，它就是用来预览的。我们使用xml的方式编写布局的时候，在右上角有Code/Split/Design按钮可以切换，这里也一样的，大部分的看官应该都是切换至Split按钮，一边写代码一边查看预览吧

看不到右上角的Code/Split/Design切换按钮不要急，打开app模块下的build.gradle文件，在android{}节点中加入以下代码

buildFeatures{
        compose true
    }
1
2
3

然后点击File->Setting->Experimental->Jetpack Compose一栏，看是否都勾选上了，将未勾选的都勾选上

再点击File->Invalidate Caches->Invalidate and Restart 重启android studio后，就能看到切换按钮啦

如果各位在构建项目的过程中因为网络原因构建失败，可以尝试使用阿里云的镜像，地址是：maven{ url'https://maven.aliyun.com/repository/public/' }

3.组件

上文中我们留意到生成的代码中存在两个组件，分别是Surface和Text，是不是有一种熟悉的感觉。我们的xml布局中，有SurfaceView 和 TextView。是的，为了方便我们理解，android的开发人员贴心的使用了和xml基本一致的参数命名。
我们就从最基本的文本组件Text开始认识Compose吧，请各位看官点击Text()进入查看源码

从构造函数我们即可以看出Text支持的参数有哪些，建议后续所有的组件都使用该方式来进行查看，能快速的知道组件支持的可设定参数有哪些

---

总结

至此，我们已经构建了一个基于Compose的项目，对Compose也有了一个基本的认知，下一章节我们将认识几种常见的组件和排列方式