Compose实现状态选择器(原生drawable select标签效果) InteractionSource

前言

在Compose中做drawable shape是很方便的,比如加个圆角,加个边框之类的,只需要如下:

shape:

            Surface(
                shape = MaterialTheme.shapes.large,
                color = Color.Gray,
                modifier = Modifier.size(50.dp)
            ) {
            }

shape+边框:

            Surface(
                shape = MaterialTheme.shapes.large,
                border = BorderStroke(
                    width = 3.dp,
                    color = Color.Yellow,
                ),
                color = Color.Gray,
                modifier = Modifier.size(50.dp)
            ) {
            }

但是却没有很直接的select状态选择器

正文

于是我们就找一下文档+问群友,发现了一个稍微简单点做状态选择器的东西:InteractionSource

 ps:由于isSelect,isCheck,isEnable状态我们可以使用State对象很容易来实现,所以就不赘述了

我们来实现一下按下控件改变颜色的状态选择器

            val interactionSource = remember { MutableInteractionSource() }
            val isPressed by interactionSource.collectIsPressedAsState()//按下的状态
            Text(
                text = "按下我试试试试试试试试试试试试",
                color = if (isPressed) Color.Blue else Color.Cyan,//监听状态设置颜色
                modifier = M.clickable(
                    interactionSource = interactionSource,//设置
                    indication = LocalIndication.current//按下的指示器效果,当前是水波纹,null就没有东西了
                ) {
                    "123".showToast()
                }
            )

正常状态: 

按下状态:

只是找不到什么好的封装方式,貌似就只能这样用

 结语

好了,又水了一篇

这个InteractionSource也可以监听拖动,焦点,悬停事件,具体请参考官方文档: InteractionSource  |  Android Developers (google.cn)

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

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

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