前言
JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于有机会写一点(将原有项目的简单页面用compose重写),发现了一些compose的优势和劣势:
优势:
超容易封装和组合,相对于原生自定义组合view,compose组合一个view简直不要太简单,只需要一个方法就能搞定,封装也更简便好用(组合vs继承)
跨平台,目前kotlin的跨平台,compose ui是其中重大的一步,虽然目前跨平台还不是正式版,平台支持的也不全,但未来可期
响应式ui,响应式是未来的ui范式,如果吃透的话不管是开发效率还是bug出现几率都可以大幅减少
互操作性,compose和kotlin一样,都保持了优良的互操作性,这样不管是推广还是项目过度都能更平滑,这样不仅新项目可以用,老项目也可以在某个页面或某个布局位置使用compose,这么菜大佬的文章很好的讲了这一点: Jetpack Compose和View的互操作性 - 圣骑士wind - 博客园 (cnblogs.com)
代码即时预览,虽然目前不是很完善,只支持String之类的修改即时预览,但是未来应该会有长足的进步.(即时预览:不止是在Preview处,另一个地方是如果你跑在设备上,你在代码处修改,设备上也会即时修改)
动态内容,比如你可以在compose中使用 if 或者 for 等进行流程控制,这在xml view体系中基本是不可能的
理论性能更好,因为compose使用了部分内容重组和并行执行,并且没有xml加载和解析,所以性能理论上会更好,但目前大部分还是不如原生,但现在才1.0.1,有很多优化空间
如果你使用flutter可以很轻松的学会,并且比flutter更简洁,语言更好用
劣势:
学习成本高,学习曲线稍微陡峭,需要颠覆之前的view体系的view,动画,手势和三方库之类的,需要一定勇气
代码要求较高,需要以函数式的要求来写compose代码,要求compose代码幂等,无副作用,保持方法快速
嵌套地狱,可以通过抽方法解决(当然比flutter好点)
目前view组件比较基础,很多需要自行封装
现存资料较少,不过以后应该会慢慢多起来
正文
我就懒得写各种api怎么用了,网上很多,官网也有,只写一些可能需要自定义的东西
1.防止重复点击
compose实现点击事件很简单,如下
Text(text = "", modifier = Modifier.clickable {
//点击回调
})
但是实现防止重复点击可能会麻烦些,如下:
const val VIEW_CLICK_INTERVAL_TIME = 800//View的click方法的两次点击间隔时间
/**
* 防止重复点击(有的人可能会手抖连点两次,造成奇怪的bug)
*/
@Composable
inline fun Modifier.click(
time: Int = VIEW_CLICK_INTERVAL_TIME,
enabled: Boolean = true,//中间这三个是clickable自带的参数
onClickLabel: String? = null,
role: Role? = null,
crossinline onClick: () -> Unit
): Modifier {
var lastClickTime by remember { mutableStateOf(value = 0L) }//使用remember函数记录上次点击的时间 return clickable(enabled, onClickLabel, role) {
val currentTimeMillis = System.currentTimeMillis()
if (currentTimeMillis - time >= lastClickTime) {//判断点击间隔,如果在间隔内则不回调
onClick()
lastClickTime = currentTimeMillis
}
}
}
//使用如下,api基本没有区别:
Text(text = "", modifier = Modifier.click {
//点击回调
})
2.Button的防止重复点击
Button的点击事件如下:
Button(onClick = {
//点击回调
}) {
}
可以看出onClick参数是一个()->Unit,所以我们只需要返回一个可以过滤重复点击的()->Unit即可,如下所示:
/**
* 防止重复点击,比如用在Button时直接传入onClick函数
*/
@Composable
inline fun composeClick(
time: Int = VIEW_CLICK_INTERVAL_TIME,
crossinline onClick: () -> Unit
): () -> Unit {
var lastClickTime by remember { mutableStateOf(value = 0L) }//使用remember函数记录上次点击的时间 return {
val currentTimeMillis = System.currentTimeMillis()
if (currentTimeMillis - time >= lastClickTime) {//判断点击间隔,如果在间隔内则不回调
onClick()
lastClickTime = currentTimeMillis
}
}
}
使用如下:
Button(onClick = composeClick {
//点击回调
}) {
}
3.双击
双击可以使用compose的基础触摸api:
/**
* 双击事件
*/
fun Modifier.doubleClick(onDoubleClick: (Offset) -> Unit): Modifier =
//处理手势反馈
pointerInput(this) {
//处理基础手势反馈
detectTapGestures(
onDoubleTap = onDoubleClick//双击时回调
// onPress = {}//按下时回调
// onLongPress = {}//长按时回调
// onTap = {}//轻触时回调(按下并抬起)
)
}
)
}
使用方式:
Text(text = "", modifier = Modifier.doubleClick {
//双击回调
})
4.长按
长按也可以使用compose的基础触摸api:
/**
* 长按事件
*/
fun Modifier.longClick(onLongClick: (Offset) -> Unit): Modifier =
pointerInput(this) {
detectTapGestures(
onLongPress = onLongClick
)
}
使用如下:
Text(text = "", modifier = Modifier.longClick {
//双击回调
})
5.全局触摸隐藏键盘
全局触摸自动隐藏键盘也是用到了基础触摸api,并使用我们常用的键盘工具类(可自行搜索),代码如下:
/**
* 在有键盘的页面,设置在root compose上,点击别处可以自动隐藏键盘
*/
fun Modifier.autoCloseKeyboard(view: View): Modifier =
pointerInput(this) {
detectTapGestures(
onPress = {
KeyBoardUtil.hideKeyboard(view)//调用键盘工具类来隐藏键盘
}
)
}
使用如下:
Text(text = "", modifier = Modifier.autoCloseKeyboard(getRootViewGroup()))
结语
以后有好用的新东西在写这个系列吧,毕竟目前用的不多
官方自定义view教学的视频: 2021 Google 开发者大会，加入我们 Develop as One!
end
作者：李小白lt
链接：https://juejin.cn/post/7122654587793719309
