Compose回忆童年 - 手拉灯绳-开灯/关灯

原创

已于 2022-12-18 11:51:40 修改 · 871 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许禁止转载。如有问题，欢迎指正。

文章标签：

#android #android jetpack #compose #kotlin #前端

于 2022-12-18 09:31:33 首次发布

本文通过Jetpack Compose创建了一个模拟拉绳开关的互动效果，包括使用Animatable实现拖拽动画，以及结合PointerInput检测触摸操作。在回忆童年乐趣的同时，展示了Compose在UI交互上的灵活性。

一、前言

偶然间想到小时候顺着那白色开关垂下来的灯绳，拉一下“咔哒”一声，再拉一下又是“咔哒”一声。当时年龄小感觉新奇总是把灯开了关又关了开的拉着玩，以至于好几次拉坏了开关灯绳。

今天我们在手机上做一个拉不坏的灯绳😄，怀念一下童年🤣。

82年钨丝灯.png

二、材料准备

在App里面准备一个弹簧绳😄，我们想奢侈一下，躺在床上拉灯绳。
绳末尾底部的疙瘩，替换成：夜光球 ，毕竟现在2022年了，夜晚总不能黑灯瞎火摸着找灯绳吧，你们觉得呢？
准备一个82年的钨丝灯泡💡，拉菲也得配个82年的，才有氛围感。

三、安装82年的钨丝灯和灯绳

我们要知道材料所需要占用最大的宽度和最小宽度，可以用BoxWithConstraints做容器，里面放我们的灯泡和灯绳以及我们的“夜光球”。

我们知道BoxWidthConstraints可以获得屏幕上Composable的最小/最大可用宽度和高度，可以根据可用空间使用它来显示不同的内容。

1. 使用Image来显示我们的钨丝灯:

Image(
   alpha = state.wsdAlpha,
   modifier = Modifier.align(Alignment.TopCenter).size(100.dp),
   painter = painterResource(id = R.drawable.ic_wsd),
   contentDescription = null
)

2. 穿好我们的弹簧灯绳，绘制一条线🧵，我们这里还需要用到Modifier.matchParentSize 填充可用空间

Box(
    modifier = Modifier
        .matchParentSize()
        .ropeLine(ropeHandleState)
)

// 绘制我们的弹簧绳
fun Modifier.ropeLine(
    state: RopeHandleState
): Modifier {
    return drawBehind {
        val bulbPosition = state.ropeHandleOffset
        drawLine(
            Color.DarkGray,
            start = Offset(x= size.width * 0.8F,y = 0f),
            end = bulbPosition,
            ROPE_LINE_WIDTH.toPx()
        )
    }
}

这里我们使用Modifier的drawBehind修饰符，大家可以去看一下Compose性能优化篇，仅在绘制阶段读取“绳子”拉动的距离，因此，Compose 可以完全跳过组合阶段和布局阶段，当距离发生变化时，Compose 会直接进入绘制阶段。

3. 我们需要给“夜光球”增加2个功能，“点击开/关灯”，“借力拉绳”

点击功能：我们可以通过PointerInputScope#detectTapGestures来实现点击功能。

借力拉伸功能：就是我们的拖拽功能，我们可以通过PointerInputScope#detectDragGestures来实现拖拽的功能。

通过Modifier的offset修饰符，更新x轴和y轴的位置。

大家先看看我们的“夜光球”的全部代码，下面我们会介绍RopeHandleState