用一把王者的时间入门JetPack Compose

2023-10-04 20:06:04

为了让大家更快、更有效的学习JetPack Compose，这里给大家介绍一份《JetPack Compose开发应用指南》。

这本指南包括七个章节，内容涵盖：

初识JetPack
Compose的设计原理和基本概念
Compose入门案例与实战
Compose布局
Compose动画
Compose图形
Compose核心控件

一、初识JetPack

JetPack是什么
Jetpack 是一套库、工具和指南，可帮助开发者更轻松地编写优质应用。这些组件可帮助你遵循最佳做法、让你摆脱编写样板代码的工作并简化复杂任务，以便你将精力集中放在所需的代码上。
JetPack分类有四种，分别是Architecture、Foundationy、Behavior、UI。
JetPack和AndroidX
Jetpack 是各种组件库的统称，AndroidX 是这些组件的统一包名。
AndroidX的迁移
第一步：升级版本
第二步：开启Jetifier
第三步：更新依赖
第四步：使用Android Studio进行迁移

二、Compose的设计原理和基本概念

JetPack Compose 环境搭建
建议升级到北极狐版本（2020.3.1)。
JetPack Compose 新特性和组件依赖
Compose的优势：
1. 紧密结合Kotlin，可以利用现代化编程语言的魅力（高阶函数、各种函数新特性）
2. 提高声明式UI开发效率
3. 结合最新的IDE可以进行实时预览、动画执行等功能
4. Jetpack Compose 为我们提供了很多开箱即用的Material 组件
5. 还有很多等你体验
JetPack Compose 编程思想总结
1. 声明性编程范式
2. 可组合函数（ @Composable函数）
3. 声明性范式转变（在 Compose 的声明性方法中，微件相对无状态，并且不提供
  setter 或 getter 函数。）

三、Compose入门

JetPack Compose 入门的基础案例
JetPack Compose 基础实战

四、Compose布局

Compose State
Jetpack Compose 像React或者Flutter一样，需要通过state变更驱动UI刷新。但是
Compose没有React的ClassComponent或者Flutter的StatefulWidget，那Compose
是如何更新并监视state呢？
一种方式是使用state{…}方法声明初始状态，并监听状态变化。当状态变化时，会触发
recomposition执行从而刷新UI。
另外一种方式就是通过@model注解来完成Compose State的管理。使用@modle添加的
Class，其所有的的属性的变成了可观察的状态。
Compose 样式（Theme）
Compose提供了系统化的方法来帮助我们自定义主题，这让我们在实现暗黑主题以及其他颜色主题的时候非常非常的方便。这一小节我们先通过一个小的案例来了解Compose的样式是什么？又该如何的设置？
Compose布局核心控件
Jetpack Compose 提供了 Material Design 的实现，后者是一个用于创建数字化界面的综
合设计系统。Material 组件（按钮、卡片、开关等）和布局（如 Scaffold）可作为可组合
函数提供。
自定义布局
在 Compose 中，界面元素由可组合函数表面，此类函数在被调用后会发出一部分界面，这
部分界面随后会被添加到呈现在屏幕上的界面树中。每个界面元素都有一个父元素，还可能
有多个子元素。此外，每个元素在其父元素中都有一个位置，指定为 (x, y) 位置；也都有一
个尺存，指定为 width 和 height。
Compose中的ConstraintLayout
是否将 ConstraintLayout 用于 Compose 中的特定界⾯取决于开发者的偏好。在Android View 系统中，使用 ConstraintLayout 作为构建更高性能布局的一种方法，但这在 Compose 中并不是问题。在需要进行选择时，请考虑 ConstraintLayout 是否有助于提高可组合项的可读性和可维护性。

五、Compose动画

Compose SideEffect
简单的可组合函数，使用 Compose，可以通过定义一组接受数据而发出界面元素的可组合
函数来构建界面。
Compose 动画概述
几个核心重点函数：
1. AnimatedVisibility
2. animateContentSize
3. animate*AsState
4. Animatable
Compose Crossfade
Crossfade可以通过监听状态值的变化，使用淡入淡出的动画在两个布局之间添加动画效
果，函数自身就是一个Composable。
Compose animateContentSize
可以为布局大小动画设置动画速度和监听值。由函数的定义可以看出这个函数本质上就Modefier的一个扩展函数。可以通过变量size监听状态变化实现布局大小的动画效果。
Animatable
Animatable 是一个值容器，它可以在通过 animateTo 更改值时为值添加动画效果。该API 支持animate*AsState 的实现。它可确保一致的连续性和互斥性，这意味着值变化始终是连续的，并且会取消任何正在播放的动画。
Compose自定义动画
AnimationSpec 可以自定义动画的行为，效果类似于原生动画中的估值器。

六、Compose图形

Compose Canvas
自定义图形的核心可组合项是 Canvas。在布局中放置 Canvas 的方式与放置其他 Compose界面元素相同。在 Canvas 中，开发人员可以通过精确控制元素的样式和位置来绘制元素。
Compose 绘制API的分析
Canvas Composable 是官方提供的一个专门用来自定义绘制的独立组件，这个组件不包含任何子元素，类似于传统View系统中的一个独立View（不是ViewGroup，不包含子View）。Canvas参数有两个参数, 类型分别是 Modifier 与 DrawScope.() -> Unit。
Modifier 作为该组件的修饰符不难理解， DrawScope.() -> Unit 是一个 reciever 为
DrawScope 类型的 lambda。那么我们就可以在 lambda 中任意使⽤用DrawScope 为我们所
提供的 API 了。
Compose自定义绘制
对于自定义绘制，官方为我们提供了三个Modifier API，分别是drawWithContent、drawBehind 、drawWithCache。

七、Compose核心控件总结

Scaffold
在Compose中提供了一种脚手架Scaffold的控件帮助开发者快速开发。在Scaffold中提供了很多配件，比如顶部菜单栏、侧滑菜单、底部菜单栏等。并且除了默认的Scaffold外，还有一些类似的控件，比如BackdropScaffold、BottomSheetScaffold等等。
LazyColumn