Jetpack compose 康奈尔笔记
快速上手
| 条目 | 内容 |
|---|---|
| 是什么 | 原生Android界面构建工具包 |
| 优势 | -更少的代码 -直观(状态变化，自动更新界面) -可以预览 -Material design |
| 什么是可组合函数 | -用函数描述外观和数据依赖 -不关注构建过程 |
| 预览 | @Preview 函数不能带参数 |
| 布局 | -Row水平排列 -Column垂直排列  |
| 修饰器 | 大小,外观,高级互动(例如使元素可以点击) 深色浅色主题切换  |
| Material design | 颜色,排版,形状   |
| 列表和状态,动画 |   https://developer.android.google.cn/jetpack/compose/themes/material?hl=zh-cn 颜色,字体Style(什么字体,多大)和形状.状态     动画    |
| 深入详解Compose优化UI构建 -Compose解决的问题 -Compose函数剖析 -声明式UI -组合VS继承 -重组 |
解决的问题: 减少耦合增加内聚 .将界面和数据用相同的语言来编写,一些隐式的依赖就会更加明显.  命令式需要自己更新UI, 声明式是数据绑定,当数据发生变化,自动更新UI. 组合VS继承 重组,将界面发生变化时,只进行部分重绘   状态改变时,自动重绘. 没有回调函数了,也不需要订阅了. |
| 总结: |
布局
| 条目 | 内容 |
|---|---|
| 标准布局组件 | Column(垂直) Row(水平) Box(层叠) |
| 修饰符 | 类似CSS 大小,布局,行为,外观 添加信息,例如无障碍标签 处理用户输入 高级互动,例如可点击,可滚动,可拖动,或可缩放   点击时显示黑色背景波纹(clickable的作用)  clickable修饰组件内部,padding修饰组件外部.  |
| Slots(卡槽) API | TopAppBar Scaffold 提供topAppBar,bottomAppBar,FloatingActionButton,Drawer的槽位     |
| 使用列表 | Column Row LazyColumn lazyRow  默认是不支持滚动的,需要支持滚动(状态变化才会重绘,也叫重组,没有状态是不能滑动的)   让jetpack compose支持从网络加载图片(需要添加网络访问权限) coil  ScrollToTop ScrollToBottom  |
| 自定义布局 | 自定义修饰符 案例:firstBaseline ToTop 文字底部到父元素的距离      layout 修饰符来修改元素的测量和布局方式  MyOwnColumn (这个应该叫,自定义容器)    StaggeredGrid(交错网格-棋盘)    |
| 约束布局 | 引用-createRefsor createRefFor parent是一个现有的引用 约束条件 constrainAs linkto       解耦API - 将布局和约束分离,根据屏幕修改约束条件.两个约束集之间可以添加动画效果.   BoxWithConstraints 可以获取父容器的大小,比如例子中的maxWidth 和 maxHeight. |
| Intrinsics(内部函数) | Compose只测量子元素一次,测试两次会引发运行时异常.但是,有时在测量子元素之前,我们需要一些有关元素的信息. Intrinsic允许在实际测量之前查询子项 (min,max)intrinsicWidth:鉴于此高度,您可以正确绘制内容的最小和最大宽度是多少 (min,max)intrinsicHeight:鉴于此高度,您可以正确绘制内容的最小和最大高度是多少    |
隐式传参 CompositionLocal
A()
{
var i =45
B(i)
}
拿出中等透明度这个值. CompositionLocalProvider中的所有元素,都会使用相同的透明度.
状态
| 条目 | 内容 |
|---|---|
| 无状态组件 |        |
| 非结构化状态 (传统view) |   缺点 - 测试: UI和代码混在一起,需要手动操作软件来测试,而不是通过函数调用测试 - 部分状态更新: 屏幕有很多事件时,可能忘记部分状态 - 部分UI更新: 每次状态改变后要手动更新UI,可能忘记更新某些控件的显示 - 代码复杂性: 代码难以阅读 |
| 单向数据流(传统view 的解决方式) | 为了解决非结构化状态的问题,引入了ViewModel和LiveData. 将状态从Activity移动到了ViewModel,在Viewmodel中,状态用LiveData 表示. LiveData是一种可观察的容器,在界面中使用observe方法,可以在状态变化时更新界面.  LiveData的set方法是protected,所以name是只读的. 不能通过name修改_name;写操作必须通过指定的函数来做;这就是单向数据流    事件向上流动,状态向下流动 - 分离状态和UI, 测试容易,直接调用onNameChanged函数就可以测试. - 状态封装 ,状态只能在viewmodel中更新,随着UI增长,不容易引入部分状态更新问题. - UI一致性,所有的状态更新都通过使用可观察状态持有者立即反映在UI中 |
| Compose的状态管理 |     把状态放到viewModel里面(放到父函数里面也行),这种操作叫做状态提升,将状态转移给调用Compose的调用方.而组合本身是无状态的. compose函数有两个输入参数:1. 数据2. 对数据的操作函数. |
| 重组和remember |  每次添加新元素,现有的透明度也会跟着改变,以为发生了重组.所以需要引入remember. 系统会将由remember计算的值存储在组合树种,只有当remember的键发生变化时才会重新计算.   使用remember会是的该可组合项有状态; 调用方不需要控制状态,而且不需要管理状态时,"有状态"非常有用,但有内部状态的可组合项往往不易重复使用,更难测试 将由状态的可组合项改成无状态,一种简单的做法是使用状态提升. |
| MutableState |    |
| 总结 | * 先做了一个静态界面 * 状态 * 传统view的更新方法 - 单向数据流(ViewModel和LiveData),单向数据流指的是事件向上流动和状态(数据)向下流动 - 将状态管理放到ViewModel也叫状态提升(函数需要两个输入参数:value和onValueChange函数) * Compose的remember * MutableState 状态变化时重组 |
| xx | yy |
TodoList的案例
| 条目 | 内容 |
|---|---|
| 弹出菜单-动画效果的实现 |  |
| 配置软键盘 |  TextField(keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done))//将Enter替换为完成按钮 ImeAction.Done;类似的还有ImeAction.Go |
| 添加带动画阴影和内容动画 |    |
| 编辑模式 |    |
| 保存和恢复状态 | 在重新创建Activity或者进程(被杀死)后,可以使用rememberSaveable恢复界面状态. 存储格式 * Bundle * Parcelize    * mapSaver  * ListSaver  |
| 总结 |
Run 标准函数
data class Person(var name: String, var age: Int)
val person = Person("John", 30)
val result = with(person) {
name = "Jane"
age = 28
"New name: $name, new age: $age"
}.let { it }
在这个例子中，我们首先使用 with 函数在 person 对象的上下文中执行一段代码块。然后，我们将 with 的返回值传递给 let 函数。由于 let 函数返回其代码块的最后一个表达式，我们可以将其简化为 it。这样，我们就实现了类似 run 的功能。
CompositionLocal
| 条目 | 内容 |
|---|---|
| 简介 | 显示传参和隐式传参   显示传参 1. 繁琐 2. 隔离较好 隐式传参 1. 方便 2. 一改全改(解决思路:提供provider,修改全局变量,并在函数末尾将数值改回来)  对于广泛使用的常用数据这样传参很麻烦.Compose 提供了CompositionLocal来隐式传递参数.创建以树为作用域的具名对象,让数据流经界面树.  MaterialTheme是一个单例. |
| 主题 |   这个函数修改的是LocalContentAlpha.current,修改为ContentAlpha.medium. |
| FruitText(理解current,当前上下文) |  为了访问strings.xml,需要resource,访问resource需要上下文  |
| 创建自己的CompositionLocal | Elevation(海拔,海拔越高,阴影越大)     提供一些默认值   动态创建和静态创建的区别 compositionLocalOf ,如果修改提供的值,会引起读取该current值的组件重绘. staticCompositionLocalOf ,更改绘导致提供CompositionLocal的整个content lambda被重组,而不仅仅是读取current值的组件.  |
主题
| 条目 | 内容 |
|---|---|
| 是什么 | 1. 定了了很多Color: Primary,secondary,surface - Color.kt 2. 定义了文本样式:h1 h2 h3 Subtitle1 body1 Type.kt 3. 形状:定义了3种类别:小型,中型和大型;每个都可以定义要使用的形状,自定义样式(切割和圆角)和大小-Shape.kt |
| 定义主题 | 参考创建项目时自动生成的主题 |
| 使用颜色 |      ContentColor为文本颜色   |
| 处理文本 | Button的默认样式  "这里的当前,就是指最近的祖先的值."  一行文字使用不同的样式.  |
| 处理形状 | 举例:Button的形状:大中小; 有些组件会根据主题修改适应上下文,默认情况下TextFiled使用小型形状主题,但它对底角应用零边角大小(就是直角).  |
动画和手势
| 条目 | 内容 |
|---|---|
| 简单值动画 | 将背景色从粉色改成绿色 直接改变背景色也可以,但是没有一个渐变的效果. 任务目标:给颜色改变添加渐变动画   动画对于compose来说,就是一个不断变化的state,连续的重组. 内部是一个协程. 可以打animate看看Android studio 提示,看看还有哪些简单值动画. |
| 可见性动画 | 可见<->不可见 之间的动画,举例:向上滚动式显示FloatingButton的文字.    另一个案例:消息从顶部滑入滑出     |
| 内容大小动画 |   |
| 多值动画 |   实现弹性动画  |
| 重复动画 |  |
| 手势动画 | 实现滑动删除 第一步: 元素跟随手指滑动 第二步: 手指松开,元素由于惯性,继续滑动(根据滑动速度,手指滑动结束位置,最终决定是否要删除 )   这是一个单行函数的写法,返回值类型为Modifier,这是一个扩展函数. composed是一个高阶函数,它的作用是组合多个 Modifier，并将它们应用于当前的 Modifier。     处理元素滑动      记录滑动速度  记录滑动位置和时间,就可以计算得到速度.  计算投掷速度  由于摩擦力的原因,速度会逐渐衰减. 样条衰减 指数衰减    设置滑动边界   |
手势
| 条目 | 内容 |
|---|---|
| 点击 | clickable   |
| 滚动 |   可滚动修饰符,scrol lable,可以检测滚动手势,但是不会偏移其内容,需要ScrollableController 才能正常运行.  嵌套滚动,简单的嵌套滚动无需执行任何操作,启动滚动操作的手势会自动从子元素到父元素,子元素无法进一步滚动时,就会由父元素处理.   |
| 拖动 |   |
| 滑动 | 滚动,拖动,滑动的区别 - 滚动,子元素大小超过父容器,只能一部分一部分的看,需要滚动. - 拖动,给元素换坐标 - 滑动 获得推进力后,自动惯性跑一段.   设置阈值,超过30%到下一个锚点. |
| 多点触控 | 平移,缩放,旋转使用transformable修饰符,不会转换元素,只会检测手势.   |
和传统view集成
| 从XML 创建可组合 | 基于SunFlower项目(官方案例) 把植物详情改成Compose   我们使用了Databinding,所以可以在代码中直接通过ID访问元素.      dimen是在values文件夹中中定义的尺寸信息dimens.xml .获取单复数形式.  |
| 在Compose中使用View |   |
| 共用主题 | 使用传统view 的styles.xml  |
导航
| 条目 | 内容 |
|---|---|
| 集成导航 | Overview ,Count,bills |
| 传统的navigation | - 一定要有一个navigation graph 导航图 - 要有一个NavHostFragment,指定navGraph - 在navigation标签中指定startDestination - 跳转通过findNavController.navigate |
| Compose 中的导航 | 这里写的是导航对应的目标页   设置导航部件   支持跳转  |
| 参数传递 | 案例: 有多个账户,可以跳转到对应账户的页面  |
| 深层链接 | 在一个应用中打开第三方应用的指定页面 .    |
| Compose和View 的关系 | 传统view 调用的是SetContentView compose 调用的是 SetContent,内部实际调用的还是SetContentView,传入参数为ComposeView,它集成自ViewGroup,内部东西怎么画的,dispatchDraw->Canvas. jetpack compose的组件没有继承原来view 的那套体系,是通过画布配置的. |
附带效应(副作用)
| 条目 | 内容 |
|---|---|
| 什么是附带效应 | 不是纯函数 组合函数也分为有副作用和无副作用的. 组合函数的特点: - 执行顺序不定 - 可以并行执行 - 可能频繁的运行(状态改变,就会重组) 可组合函数是为了做声明式UI的,而我们会在UI做一些和界面描述不相关的操作. 处理副作用 * 虽然我们不希望函数执行中出现副作用,但显示是有一些逻辑只能作为副作用来处理,比如IO操作,计时,日志埋点等等,这些都是会对外界或者受到外界影响的逻辑,不能无限制的反复执行.所以compose需要能够合理的处理一些副作用: * 副作用(比如下载)的执行时机是明确的,例如在Recomposition时等 * 副作用的执行次数的可控的,不应该随着函数反复执行. * 副作用(比如组合函数从组件树移除时,如果该组件发了网络请求,应该取消接收)不会造成泄漏,例如对于注册要提供适当的时机取消注册. 危险的附带效应 * 写入共享对象的属性(写全局变量) * 更新ViewModel中的可观察项(数据在多个组件中共享) * 更改共享偏好设置 SharePerference 这些数据都是全局的,共享的 使用Effect API,可以用可预测的方式执行那些副作用.Effect API是和compose的生命周期关联的.何时执行?比如是compose加入到组件树的时候.什么时候释放资源? compose从组件树移除的时候.  副作用也是根据这3个时间点来配合的. |
| LaunchedEffect & rememberCoroutineScope | 如果要在可组合函数中进行耗时操作,就需要将耗时操作放到协程,协程需要在协程作用域中创建, 所以提供了LaunchedEffect用于创建协程. 副作用一般都是耗时操作,一般用协程来完成. 案例:带动画的消息提示窗(动画是耗时操作,一般在协程中执行) LaunchedEffect 有一个key,key变化它的代码块就会重启. 如果上一个协程没做完,又需要重新执行代码块,就会自动把上个协程取消. 从组件树上移除,会取消协程. |
| rememberCoroutineScope | LaunchedEffect 只能在可组合函数中使用,非组合函数可以使用rememberCoroutineScope,该函数可以在可组合函数外启动协程,且需要对这个协程存在作用域限制,以便在协程退出组合后自动取消.协程作用域取消后,它内部的所有协程也会取消. |
| rememberUpdatedState & DisposableEffect | |
| SideEffect & produceState | |
| derivedStateOf & snapshotflow |