前言

继上篇 Android-倾斜列表之后, 想着用 Compose 也实现一下.所以很快就来了~

效果

不同

开始是以使用RecyclerView自定义item的思路来实现的, 最后发现, 由于绘制原理的不同, 导致了很多问题.

问题一

Compose 的 padding 不能设置负边距值. 想设置的话要用到 offset(y = -item.marginTop.dp)

问题二

即使是用 offset 设置负间距, Compose 也不会把整个 Box 上移, 也就是 Y 轴的最低值没有变化, 导致不仅每个item需要上移的值不一样, 而且整体上移后, 列表底部会有一片空出部分(item填充后列表的Y坐标).

解决

用了一个取巧的方式, 绘制平行四边形的 Composable 用 Box 包住的. Canvas 的绘制能超出 Box 的大小范围.

@Composable
private fun DrawParallel(item: ThemeItemInfo) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = 120.dp.toPx() //固定120
        val path = Path().apply {
            moveTo(0f, 90f)
            lineTo(canvasWidth, 4f)
            lineTo(canvasWidth, (canvasHeight - 90))
            lineTo(0f, (canvasHeight - 4))
        }
        drawPath(path = path, color = item.bgColor)
    }
}

Box(modifier = Modifier
    .fillMaxWidth()
    .height(90.dp) //固定90
    )

所以把 Box 的大小设置 小于 平行四边形的大小.就能根据列表的排列方式形成一定的间距.

总结

Compose 和 View 由于原理不同, 实现方式有一定的差别. 但整体的思路是相同的.

Compose 很棒, 但需要完善和优化的地方还有很多!