一、前言
偶然间想到小时候顺着那白色开关垂下来的灯绳,拉一下“咔哒”一声,再拉一下又是“咔哒”一声。当时年龄小感觉新奇总是把灯开了关又关了开的拉着玩,以至于好几次拉坏了开关灯绳。
今天我们在手机上做一个拉不坏的灯绳😄,怀念一下童年🤣。

二、材料准备
- 在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
@Composable
fun LightButton(

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

被折叠的 条评论
为什么被折叠?



