美文网首页
Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏

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

作者: 我爱田Hebe | 来源:发表于2022-08-10 14:12 被阅读0次

    前言

    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

    相关文章

      网友评论

          本文标题:Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏

          本文链接:https://www.haomeiwen.com/subject/jthawrtx.html