【compose学习】compose中tab和HorizontalPager实现联动

阿猹在路上

于 2024-05-25 10:56:39 发布

阅读量261

点赞数 3

分类专栏： kotlin其它文章标签： kotlin

本文链接：https://blog.csdn.net/qq_39317095/article/details/139194200

版权

kotlin其它专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、需要建立一个扩展函数、或者自己建立一个类或者函数，这个需要自己实现相关的内容

//做一个扩展函数
@Composable
//fun PagerTabIndicator(
fun Modifier.Addindication(
    tabPositions: List<TabPosition>,
    pagerState: PagerState,
    color: Color = Color.Yellow,
    @FloatRange(from = 0.0, to = 1.0) percent: Float =0.7f,
    height: Dp = 5.dp,
) {
    val currentPage by rememberUpdatedState(newValue = pagerState.currentPage)
    val fraction by rememberUpdatedState(newValue = pagerState.currentPageOffsetFraction)
    val currentTab = tabPositions[currentPage]
    val previousTab = tabPositions.getOrNull(currentPage - 1)
    val nextTab = tabPositions.getOrNull(currentPage + 1)
    Canvas(
        modifier = Modifier.fillMaxSize(),
        onDraw = {
            val indicatorWidth = currentTab.width.toPx() * percent
            val indicatorOffset = if (fraction > 0 && nextTab != null) {
                    lerp(currentTab.left, nextTab.left, fraction).toPx()
            } else if (fraction < 0 && previousTab != null) {
                lerp(currentTab.left, previousTab.left, -fraction).toPx()
            } else {
                currentTab.left.toPx()
            }
            val canvasHeight = size.height
            drawRoundRect(
                color = color,
                topLeft = Offset(
                    indicatorOffset + (currentTab.width.toPx() * (1 - percent) / 2),
                    canvasHeight - height.toPx()
                ),
                //这个可能会自动增加长度
//                size = Size(indicatorWidth + indicatorWidth * abs(fraction), height.toPx()),
                size = Size(indicatorWidth, height.toPx()),
                cornerRadius = CornerRadius(50f)
            )
        }
    )
}

实现了上面的内容之后，就可以直接使用了

        TabRow(
            selectedTabIndex = pagerState.currentPage,
            divider = {},
            indicator = { tabPositions ->
                Modifier.Addindication(
                    tabPositions = tabPositions,
                    pagerState = pagerState
                )
            }
        ) {