ompose发布正式版已经有一段时间了。趁最近比较闲,抓紧学习一波。
学习过程中,主要以实战项目中常用技术为目标。下面是项目地址,会长期更新,希望能给正在学习Compose的小伙伴一点参考。同时您有什么好的建议,也可以提issue给我,我们一起讨论。
目标
- 配合Retrofit+Okhttp实现数据加载并展示
- 实现列表的上拉加载更多、下来刷新
- 项目采用单页面
- 使用compose-navigation实现路由导航
- 使用ViewModel+LiveData实现MVVM架构
- 使用ViewModel+Flow(LiveData)实现MVI架构
- 导航动画使用
- compose中嵌入原生控件
- 常见的动画使用
- 全局状态的管理
- 适配平板
- 暗黑适配
- 多主题定制,切换
- 自定义组件
- 视频列表实现和优化
- 嵌入网页,和js交互
- compose-permission使用
- compose-pager使用
- 流式布局实现和优化
- Material3主题适配
- 实现至少两个复杂页面并交互
- 登录功能,并实现全局登录状态的同步
- 本地数据存储Room、DataStore等组件的使用
- 自定义页面状态管理组件
- 代码质量检测工具
- 老项目混写Compose
- 其他更高级的功能,想到再补充
知识点
这只是我自己学习过程中的笔记和思考,可能不是完全正确,如有错误,忘指正!
SnackBar的使用
//第一步:
val snackbarHostState = remember { SnackbarHostState() }
//通过kotlin Channel发送消息
val channel = remember { Channel<String>(Channel.CONFLATED) }
//第二步:
LaunchedEffect(key1 = channel) {
channel.receiveAsFlow().collect {
snackbarHostState.showSnackbar(it)
}
}
//第三步:
Scaffold(
modifier = Modifier.fillMaxSize(),
backgroundColor = Color.Transparent,
scaffoldState = rememberScaffoldState(snackbarHostState = snackbarHostState)
) {
}
//第四步:
channel.trySend("需要显示的文本")
和ViewModel配合使用
使用ViewModel扩展函数需要添加下面组件:
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
//示例代码
@Composable
fun HomeMainPage(viewModel: HomeMainViewModel = viewModel()) {}
将LiveData转换成State需要添加下面组件:
implementation "androidx.compose.runtime:runtime-livedata:1.2.1"
//示例代码
val counter = viewModel.counter.observeAsState()
软键盘显示/隐藏的控制
val keyboard = LocalSoftwareKeyboardController.current
// ...
onClick = {
keyboard?.hide()
keyboard?.show()
}
不借助State手动刷新(不推荐这么做)
DisposableEffect
和生命周期相关的逻辑执行使用。比如广播注册和反注册、监听和注销监听等等。
key1传Unit或者true,首次渲染执行一次,重组则不再执行。key1传State,则State值变化,则再次执行。
SideEffect
每次重组都需要执行的副作用。比如日志打印等等。
LaunchedEffect
需要调用协程函数的时候使用。
key1传Unit或者true,首次渲染执行一次,重组则不再执行。key1传State,如果State值变化,则再次执行。
如果是条件启动该副作用,条件应该写在外面,而不是LaunchedEffect里面,尽量减少资源的浪费。
Compose函数中dp转px
import androidx.compose.ui.platform.LocalDensity
val pxValue = with(LocalDensity.current) { 16.dp.toPx() }
// or
val pxValue = LocalDensity.current.run { 16.dp.toPx() }
设置部分文字不可复制
// 设置可选区域
SelectionContainer {
// Column等价于竖直的LinearLayout
Column {
Text(text = "可以选中我,可以选中我,可以选中我")
// 设置不可选区域
DisableSelection {
Text(text = "选不中我,选不中我,选不中")
}
// 位于可选区域内,可选
Text(text = "可以选中我,可以选中我,可以选中我")
}
}
物理返回键的处理
使用BackHandler进行拦截,但是不能写在MaterialTheme的代码块中,否则不生效
@Composable
fun TestPage(){
BackHandler {
//TODO:拦截物理返回键
}
MaterialTheme {
androidx.compose.material.Scaffold {
Box(Modifier.padding(it)) {
}
}
}
}
我的一点看法
我之前用Flutter写过几个demo,逐渐熟悉了写Flutter后,感觉写起来真好。特别是Android Studio各种智能补全,写起来特别流畅。所以一直比较抵触学Compose,总感觉比Flutter书写体验差太多了。不过我毕竟还是一个Android开发嘛,还指望着吃这碗饭,所以Android这边的新技术也要学习起来。
写这篇文章的时候,我前前后后学Compose大概花了一周。主要是remember和Effect都是新概念,从接触到理解个大概,花了一些时间。如果有学习过React前端技术的,应该立马就能明白,可惜我并没有这样的经验。
学习了基本的组件后,我就开始写上面这个项目,刚开始写起来有点生疏。比如状态提升什么的,刚开始写完全没注意到。不过随着业务逐渐偏向于实战项目,不断重构和优化代码,状态提升这个东西,自然而然就有了。
代码写的好不好,性能怎么样。除了直觉感受,更重要的是要有工具来检测,于是又到处搜文章看,然后尝试大佬们推荐的做法。工具有了之后,又把之前性能不好的地方重构了下。
总体来说,目前Compose已经很好了,我个人感觉性能上不比原生差。而且函数组合方式真的比类继承好使多了,非常灵活,而且少很多模板代码。写动画真的不要太爽,原生项目写个动画有多痛苦,相信做过原生开发的小伙伴都知道。另外自定义控件比原生容易多了,原生自定义需要理解很多概念,什么ViewGroup,View,事件传递等等。而Compose相对来说理解的概念就少多了,而且代码更简洁。有时候寥寥几句代码,就能实现很复杂的组件。
希望想在Android领域继续讨饭吃的小伙伴都学起来吧!