主页 / 问题 / 1371250
Accepted
Noname guy
Asked:2022-06-14 02:51:09 +0000 UTC2022-06-14 02:51:09 +0000 UTC

如何在寻呼机中跟踪滑动（伴奏）

  • 772

我正在使用带有 ScrollableTabRow 的 Pager，并且由于 ScrollableTabRow 的选项卡离开屏幕，当 Pager 滑动时它的指示器也会离开屏幕，我如何跟踪到另一个页面的移动以导致选项卡本身翻转和其他一些逻辑？

在此处输入图像描述

    val selectedTabIndex = remember { mutableStateOf(currentDay) }
    val selectedTabTitle = remember { mutableStateOf(tabTitles[currentDay].title) }
    val pagerState = rememberPagerState(currentDay)

    //нужно вызвать этот метод
    fun selectTab(index: Int){
        selectedTabIndex.value = index
        selectedTabTitle.value = tabTitles[index].title
    }



                ScrollableTabRow(
                    modifier = Modifier
                        .padding(bottom = 10.dp, top = 15.dp),
                    contentColor = light_shaded,
                    selectedTabIndex = selectedTabIndex.value,
                    edgePadding = 0.dp,
                    indicator = { tabPositions ->
                        TabRowDefaults.Indicator(
                            Modifier.pagerTabIndicatorOffset(
                                pagerState,
                                tabPositions
                            )
                        )
                    },
                    ) {
                    tabTitles.forEachIndexed { index, s ->
                        Tab(
                            text = {
                                Text(
                                    text = s.title.uppercase(Locale.getDefault()),
                                    fontSize = 18.sp
                                )
                            },
                            selected = selectedTabIndex.value == index,
                            onClick = { selectTab(index) },
                            modifier = Modifier.height(50.dp),
                        )
                    }

                }


                //текст привязан к selectedTabTitle
                Text(
                    modifier = Modifier
                        .padding(top = 20.dp, start = 35.dp),
                    text =  "${selectedTabTitle.value}, " +
                            "${TimeManager.getWeekDates()[0][selectedTabIndex.value]} " +
                               TimeManager.getWeekDates()[1][selectedTabIndex.value].capitalize(),
                    fontSize = 23.sp,
                    color = primary_color,
                    maxLines = 1,
                )


                    
                    HorizontalPager(
                        modifier = Modifier
                            .wrapContentHeight()
                            .fillMaxWidth()
                            .padding(top = 70.dp),
                        count = tabTitles.size,
                        state = pagerState,
                        contentPadding = PaddingValues(start = 15.dp),
                        verticalAlignment = Alignment.Top,
                    ){ tabIndex ->
                        LazyColumn(
                            modifier = Modifier
                                .padding( end = 15.dp, )//start = 15.dp, top = 70.dp
                            ,
                        ){
                            items(
                                state.schedule[tabIndex]//tabIndex selectedTabIndex.value
                                    .filter { it.dayDate != viewModel.weekParity.oppositeShortName }
                            ){ subject ->
                                SubjectItem(subject)
                            }
                        }
                    }
kotlin

1 个回答

  1. Best Answer

    好吧，从技术上讲，您拥有，tabIndex->并且当您更改页面时，您可以跟踪块内的更改并调用selectTab()它，并防止重新组合，即围栏拐杖......

    但是 jetpack compose 使用状态。状态改变 - 发生重组。您只需要监视状态。我会做这样的事情。

    @ExperimentalPagerApi
@Composable
fun Greeting() {
    val pagerState = rememberPagerState()
    val scope = rememberCoroutineScope()

    //чтобы вылезло за экран
    val tabs = listOf(
        "aaaaaaaaaaaaaa",
        "bbbbbbbbbbbbbbbbbb",
        "cccccccccccccccccc",
        "dddddddddddddd",
        "eeeeeeeeeeeeeee",
        "fffffffffffffff",
        "gggggggggggggg"
    )
    Column() {
        ScrollableTabRow(
            selectedTabIndex = pagerState.currentPage
        ) {
            tabs.forEachIndexed { index, textVal ->
                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = {
                        scope.launch { pagerState.scrollToPage(index) }
                    }) {
                    Text(
                        text = textVal,
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
        HorizontalPager(state = pagerState, count = tabs.size) { page ->
            Text(
                text = tabs[page],
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}
    • 2

相关问题