[移动开发]Android Compose笔记

目录

1.点击事件

2.图像

1.渐变色

1.点击事件

????????传统的View点击事件，我们可以通过继承View，重写OnTouchEvent事件来处理，实现一些效果。

????????Compose里要怎么实现？官方文档关于手势的介绍里已经介绍了一些基本方法。

????????当前我要实现一个功能，点击控件不松手，控件缩小，松手以后控件恢复原状。

? ? ? ? 官方文档的PointerInputScope.detectTapGestures无法实现这个效果。需要通过Modifier.clickable()方法实现。最终代码如下：

@Composable
fun ClickAniText(text:String){
    //控件的缩放大小
    val scale = remember {
        Animatable(1f)
    }
    
    //交互事件源，即之前的touch事件，通过收集交互事件的Flow来处理touch事件
    val interactionSource = remember { MutableInteractionSource() }
    //Flow的收集需要在协程中，使用LaunchedEffect来执行
    LaunchedEffect(key1 = null, block = {
        interactionSource.interactions.collect {
            when (it) {
                is PressInteraction.Press -> {
                    scale.animateTo(0.8f)
                }
                is PressInteraction.Release,
                is PressInteraction.Cancel -> {
                    scale.animateTo(1f)
                }
            }
        }
    })
    
    //绘制文本控件
    Text(
        text = text,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .size(320.dp, 64.dp)
            .clickable(
                interactionSource = interactionSource,
                indication = null,
                onClick = {}
            )
            .scale(scaleX = scale.value, scaleY = scale.value)
            .background(Color.Yellow, shape = RoundedCornerShape(35.dp))
    )
}

代码中用到了Compose的动画，可以去里面看看用法。

2.图像

1.渐变色

如何用Compose实现一个控件的渐变色效果？

通过Canvas来实现渐变色。实现代码如下：

//绘制渐变色
Canvas(
    //Modifier来控制Canvas的绘制范围，这里是充满父控件
    modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight(),
    onDraw = {
        drawRoundRect(
            brush = Brush.verticalGradient(
                colors = listOf(
                    startColor,
                    endColor
                )
            ),
            cornerRadius = CornerRadius(4.dp.value)
        )
    }
)