是时候学习Jetpack Compose了！！！

前言

Android上View.java的存在已经有十多年之久了，代码量也达到了惊人的3万行。而且很多常用的控件例如TextView、ImageView等又都直接或者间接继承自View，都说组合优于继承，所以针对View的这个设计，现在看来已经是落伍了。

去年（2019）年的时候，在AndroidDevSummit上，Google推出了Compose，当时眼前一亮，觉得Android上的UI开发要有一个全新的明天了。时隔一年，Compose已经从dev版本逐渐开发到了目前的alpha 07版本。至于Compose是什么，有什么优点，在Google之前的各种视频中都有讲解了这里不再赘述，官网介绍请移步Jetpack Compose，官方文档请移步Compose 文档。

其他文章的内容是从Compose alpha 07版本开始编写的，目前一直在紧跟Google的步伐进行更新，现在已进行到Compose Beta 01。

重大版本变更

alpha12

• setContent{}
  setContent从androidx.compose.ui.platform移到了androidx.activity.compose，需引入implementation "androidx.activity:activity-compose:1.3.0-alpha02"
• ConstraintLayout
  约束布局迁移到了新包中，需引入implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha02"

计划任务

跟最初学习View的时候一样，我们需要一个控件一个控件的去学习了解，先了解他的属性然后了解他的用法。
下面的任务列表是先基于xml中的控件名，然后对照Compose中的控件名展示出来的，目前还不完整，因为我也还在一步步的熟悉中，所以会根据进度慢慢的补充上来，有超链接的是已经更新完了的，请选择性阅读。

0、修饰符

• Modifier基础篇
  可以修饰Compose UI元素或者向其添加行为，例如背景、填充、点击事件、宽高等属性。

1、控件

声明：控件需要引入的包大部分是androidx.compose.material的。为什么？因为Google在后面的一些更新中，将很多控件都从foundation包中移到了material包。也就是说我们后面的控件等内容的讲解大部分需要基于androidx.compose.material包中的相关控件。

• TextView --> Text
  文本
• EditText --> TextField、OutlinedTextField
  输入框，编辑框

---

• Icon
  图标
• ImageView --> Image
• 图片

---

• Button->Button、IconButton、TextButton、OutlinedButton等
  按钮

---

• ProgressBar --> CircularProgressIndicator、LinearProgressIndicator
  进度条
• Slider --> Slider
  拖动条

---

• CheckBox --> CheckBox
  单选、多选框
• RadioButton、RadioGroup --> RadioButton
  单选、多选按钮
• Switch --> Switch
  开关

---

• ToolBar --> TopAppBar、BottomAppBar
  工具栏，一般用于顶部标题栏或者底部标题栏
• TabLayout --> TabRow、ScrollableTabRow
  包含多个标签的行
• Scaffold
  实现了Material设计页面基本结构的组件

2、布局

声明：目前alpha08版本的布局相关内容需要引入androidx.compose.foundation包：

• FrameLayout --> Box
  帧布局：从底层往上堆叠。

• LinearLayout -->Row、Column
  线性布局：横向、纵向。

• ScrollView --> ScrollableRow、ScrollableColumn
  【已废弃】ScrollableRow、ScrollableColumn在alpha11版本标记废弃，具体请看文章！

• RecyclerView + LinearLayoutManager --> LazyRow、LazyColumn
  可以缓存并复用视图的布局！但是只能实现单列或者单行列表。

• RecyclerView + GrideLayoutManager --> LazyVerticalGrid
  【试验阶段】可以缓存并复用视图的布局！可实现多行列表。

• ConstraintLayout --> ConstraintLayout
  强大的约束布局！！！

• [FlowLayout --> FlowRow、FlowColumn]
  【已废弃】在实验阶段后被标记废弃的流式布局，官方建议自定义实现。

• Spacer --> Spacer
  一个空白的视图，由于目前官方没有margin相关的属性，可能是建议正确使用paddig和Spacer代替margin。

3、弹窗

• AlertDialog --> AlertDialog
  弹窗、对话框

• Menu --> DropdownMenu
  菜单弹窗

4、动画

• AnimatedVisibility
  目前还在试验阶段，该函数会影响视图树的结构
• animateXxxAsState
  根据Xxx类型的值，自主响应的动画函数

5、自定义

• Canvas
  介绍了最基本的Canvas绘制的一些方法
• Canvas之BlendMode
  介绍了Canvas绘制图形时的混合方式

6、搭配其他Jetpack等组件

单纯的使用Compose已经满足不了我们了，怎么和其他Jetpack组件搭配是我们接下来的任务了。

• Compose搭档 — ViewModel、LiveData
  介绍了一些Compose的思想，以及ViewModel中LiveData数据如何转换为Compose需要的state数据
• Compose搭档 — Flow、Room
  介绍了Flow如何转换为LiveData数据，以及Room的基本使用