Jetpack Compose : 超简单实现滚轮控件(WheelPicker)

前言

滚轮应该是咱们很经常用到一个控件了，比如日期挑选，时刻挑选，地区挑选等都习惯用滚轮来展现。

滚轮控件的识点

上图是由三个滚轮控件组成的日期挑选器，以此咱们分析所需求的知识点：

1. 手势（滑动，惯性翻滚）
2. 内容循环翻滚
3. 完成滚轮款式

手势（滑动，惯性翻滚）

我首先想到的是 Compose 的 翻滚修饰符 作用如下：

接下来便是处理惯性问题了，我很天然想到列表组件 LazyColumn 就预备去看它的源码是怎样完成时。

好吧，就决议是你了 LazyColumn

内容循环翻滚

既然决议使用 LazyColumn 那内容循环也变的简略，这儿直接贴代码：

val size = data.size
val count = Int.MAX_VALUE
val startIndex = count / 2
val listState = rememberPagerState(initialPage = startIndex - startIndex % size)
LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                ......
            }
        }

完成滚轮款式

如何通过调整 LazyColumn 的 Item 项款式完成滚轮作用呢，这儿放一张我画的草图：

由上面的草图咱们发现关键点在 Item 项的旋转视点和平移间隔。

原理居然比草图还简略。

既然如此咱们先拿到 Item 项的滑动时的偏移间隔，直接贴代码：

val listState = rememberPagerState(initialPage = startIndex - startIndex % size)
val layoutInfo by remember { derivedStateOf { listState.layoutInfo } }
LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                val item = layoutInfo.visibleItemsInfo.find { it.index == index }
				if (item != null) {
					val itemCenterY = item.offset + item.size / 2 //获取Item项的偏移间隔
				}
            }
        }

通过偏离间隔计算调整系数。

/**
* pickerCenterLinePx 滚轮控件中线
* itemCenterY < pickerCenterLinePx 说明Item项在上半部，逐步缩小，反之则逐步扩大
**/
currentsAdjust = 0.75f + 0.25f * if (itemCenterY < pickerCenterLinePx) {
    itemCenterY / pickerCenterLinePx
} else {
    1 - (itemCenterY - pickerCenterLinePx) / pickerCenterLinePx
}

最后按照惯例贴上完好代码。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun <T> WheelPicker(
    data: List<T>,
    selectIndex: Int,
    visibleCount: Int,
    modifier: Modifier = Modifier,
    onSelect: (index: Int, item: T) -> Unit,
    content: @Composable (item: T) -> Unit,
) {
    BoxWithConstraints(modifier = modifier, propagateMinConstraints = true) {
        val density = LocalDensity.current
        val size = data.size
        val count = size * 10000
        val pickerHeight = maxHeight
        val pickerHeightPx = density.run { pickerHeight.toPx() }
        val pickerCenterLinePx = pickerHeightPx / 2
        val itemHeight = pickerHeight / visibleCount
        val itemHeightPx = pickerHeightPx / visibleCount
        val startIndex = count / 2
        val listState = rememberLazyListState(
            initialFirstVisibleItemIndex = startIndex - startIndex.floorMod(size) + selectIndex,
            initialFirstVisibleItemScrollOffset = ((itemHeightPx - pickerHeightPx) / 2).roundToInt(),
        )
        val layoutInfo by remember { derivedStateOf { listState.layoutInfo } }
        LazyColumn(
            modifier = Modifier,
            state = listState,
            flingBehavior = rememberSnapFlingBehavior(listState),
        ) {
            items(count) { index ->
                val currIndex = (index - startIndex).floorMod(size)
                val item = layoutInfo.visibleItemsInfo.find { it.index == index }
                var currentsAdjust = 1f
                if (item != null) {
                    val itemCenterY = item.offset + item.size / 2
                    currentsAdjust = 0.75f + 0.25f * if (itemCenterY < pickerCenterLinePx) {
                        itemCenterY / pickerCenterLinePx
                    } else {
                        1 - (itemCenterY - pickerCenterLinePx) / pickerCenterLinePx
                    }
                    if (!listState.isScrollInProgress
                        && item.offset < pickerCenterLinePx
                        && item.offset + item.size > pickerCenterLinePx
                    ) {
                        onSelect(currIndex, data[currIndex])
                    }
                }
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(itemHeight)
                        .graphicsLayer {
                            alpha = currentsAdjust
                            scaleX = currentsAdjust
                            scaleY = currentsAdjust
                            rotationX = (1 + currentsAdjust) * 180
                        },
                    contentAlignment = Alignment.Center,
                ) {
                    content(data[currIndex])
                }
            }
        }
    }
}
private fun Int.floorMod(other: Int): Int = when (other) {
    0 -> this
    else -> this - floorDiv(other) * other
}

Thanks

以上便是本篇文章的全部内容，如有问题欢迎指出，咱们一起前进。
如果觉得本篇文章对您有帮助的话请点个赞让更多人看到吧，您的鼓励是我前进的动力。
谢谢~~

源代码地址

• WheelPicker.kt miaowmiaow/fragmject