Compose TabRow 属性重新设置 满足需求

609 阅读1分钟
TabRow(selectedTabIndex = currentSelectedIndex,
    backgroundColor = Color.Transparent,
    divider = @Composable {
        TabRowDefaults.Divider(color = Color.Transparent)
    },
    indicator = @Composable { tabPositions ->
        val currentTabPosition = tabPositions[currentSelectedIndex]
        TabRowDefaults.Indicator(
            Modifier.composed {
                val percent = 0.3f
                val currentTabWidth by animateDpAsState(
                    targetValue = currentTabPosition.width,
                    animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
                )
                val indicatorOffset by animateDpAsState(
                    targetValue = currentTabPosition.left + currentTabWidth/2 - (currentTabWidth * percent)/2 ,
                    animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
                )
                fillMaxWidth()
                    .wrapContentSize(Alignment.BottomStart)
                    .offset(x = indicatorOffset)
                    .width(currentTabWidth * percent)
            }
        )
    }
) {
    Box(modifier = Modifier.padding(5.dp),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Scenery",
            style = TextStyle(
                fontSize = if(currentSelectedIndex == 0) 16.sp else 14.sp,
                color = if(currentSelectedIndex == 0) Color(0xFF242424) else Color(0xFFAEAEAE),
                textAlign = TextAlign.Center
            ),
            modifier = Modifier.clickable {
                currentSelectedIndex = 0
            }
        )
    }
    Box(modifier = Modifier.padding(5.dp),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Car",
            style = TextStyle(
                fontSize = if(currentSelectedIndex == 1) 16.sp else 14.sp,
                color = if(currentSelectedIndex == 1) Color(0xFF242424) else Color(0xFFAEAEAE),
                textAlign = TextAlign.Center
            ),
            modifier = Modifier.clickable {
                currentSelectedIndex = 1
            }
        )
    }
    Box(modifier = Modifier.padding(5.dp),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Animal",
            style = TextStyle(
                fontSize = if(currentSelectedIndex == 2) 16.sp else 14.sp,
                color = if(currentSelectedIndex == 2) Color(0xFF242424) else Color(0xFFAEAEAE),
                textAlign = TextAlign.Center
            ),
            modifier = Modifier.clickable {
                currentSelectedIndex = 2
            }
        )
    }
    Box(modifier = Modifier.padding(5.dp),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Cartoon",
            style = TextStyle(
                fontSize = if(currentSelectedIndex == 3) 16.sp else 14.sp,
                color = if(currentSelectedIndex == 3) Color(0xFF242424) else Color(0xFFAEAEAE),
                textAlign = TextAlign.Center
            ),
            modifier = Modifier.clickable {
                currentSelectedIndex = 3
            }
        )
    }
}