Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘

前言

JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于有机会写一点(将原有项目的简单页面用compose重写),发现了一些compose的优势和劣势:

优势:

1.超容易封装和组合,相对于原生自定义组合view,compose组合一个view简直不要太简单,只需要一个方法就能搞定,封装也更简便好用(组合vs继承)

2.跨平台,目前kotlin的跨平台,compose ui是其中重大的一步,虽然目前跨平台还不是正式版,平台支持的也不全,但未来可期

3.响应式ui,响应式是未来的ui范式,如果吃透的话不管是开发效率还是bug出现几率都可以大幅减少

4.互操作性,compose和kotlin一样,都保持了优良的互操作性,这样不管是推广还是项目过度都能更平滑,这样不仅新项目可以用,老项目也可以在某个页面或某个布局位置使用compose,这么菜大佬的文章很好的讲了这一点: Jetpack Compose和View的互操作性 - 圣骑士wind - 博客园 (cnblogs.com)

5.代码即时预览,虽然目前不是很完善,只支持String之类的修改即时预览,但是未来应该会有长足的进步.(即时预览:不止是在Preview处,另一个地方是如果你跑在设备上,你在代码处修改,设备上也会即时修改)

6.动态内容,比如你可以在compose中使用 if 或者 for 等进行流程控制,这在xml view体系中基本是不可能的

7.理论性能更好,因为compose使用了部分内容重组和并行执行,并且没有xml加载和解析,所以性能理论上会更好,但目前大部分还是不如原生,但现在才1.0.1,有很多优化空间

8.如果你使用flutter可以很轻松的学会,并且比flutter更简洁,语言更好用

劣势:

1.学习成本高,学习曲线稍微陡峭,需要颠覆之前的view体系的view,动画,手势和三方库之类的,需要一定勇气

2.代码要求较高,需要以函数式的要求来写compose代码,要求compose代码幂等,无副作用,保持方法快速

3.嵌套地狱,可以通过抽方法解决(当然比flutter好点)

4.目前view组件比较基础,很多需要自行封装

5.现存资料较少,不过以后应该会慢慢多起来

正文

我就懒得写各种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!

compose->kotlin版本对照: Compose 与 Kotlin 的兼容性对应关系  |  Android 开发者  |  Android Developers

jetpack库最新版本查看: 最新版本说明  |  Android 开发者  |  Android Developers 

end

对Kotlin或KMP感兴趣的同学可以进Q群 101786950

如果这篇文章对您有帮助的话

可以扫码请我喝瓶饮料或咖啡(如果对什么比较感兴趣可以在备注里写出来)