Compose中实现原生TabView+ViewPager的效果

implementation "com.google.accompanist:accompanist-pager:0.18.0"
复制代码

val datas = remember {
        mutableStateListOf("香蕉", "苹果", "芒果", "萝卜", "咖啡")
    }
    val state = rememberPagerState(pageCount = datas.size,
        initialPage = 0,//初始页码
        infiniteLoop = true,//是否循环效果
        initialOffscreenLimit = 1//预加载页数
    )
    val scope = rememberCoroutineScope()
    Column {
        ScrollableTabRow(selectedTabIndex = state.currentPage,//展示的页码，和Pager的保持一致
            backgroundColor = Color.Green) {
            datas.forEachIndexed { index, data ->
                Box(
                    Modifier
                        .height(40.dp)
                        .width(100.dp)
                        .clickable {
                            scope.launch {
                                state.scrollToPage(index, 0f)//Tab被点击后让Pager中内容动画形式滑动到目标页
                            }
                        }, contentAlignment = Alignment.Center) {
                    Text(text = data)
                }
            }
        }
        HorizontalPager(state = state,//Pager当前所在页数
            modifier = Modifier.height(300.dp)) { pagePosition ->
            Log.e("tag", "加载页码$pagePosition")
            val color = (0..255)
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color(color.random(), color.random(), color.random())),
                contentAlignment = Alignment.Center) {
                Text(text = datas[pagePosition])
            }
        }
    }
复制代码