Compose实现倾斜列表

2023-09-21 01:00:16

前言

继上一篇文章《Android-倾斜列表》之后，笔者思考着如何使用Compose来实现这一效果，于是很快地动手实践了一番。

效果对比

实现方式	效果
RecyclerView自定义item	左右滑动时，item倾斜
Compose	上下滑动时，item倾斜

实现思路

起初，笔者打算沿用RecyclerView自定义item的思路来实现。但后来发现，由于绘制item的职责由Compose接管，因此这种思路并不适用于Compose。

经过一番探索，笔者最终采用了以下思路：

创建一个自定义的可组合项，负责绘制单个item。
在列表可组合项中使用LazyColumn，并将自定义项作为其子项。
在自定义项中使用Modifier.rotate()来控制item的倾斜角度。

代码实现

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun SlantedListItem(text: String) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .height(60.dp)
            .background(Color.LightGray)
            .rotate(30f)
    ) {
        Text(
            text = text,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

@Composable
fun SlantedList() {
    LazyColumn {
        items(100) { index ->
            SlantedListItem("Item $index")
        }
    }
}