neobie
neobie

Reputation: 2910

WearOS: add scrollbar to VerticalPager?

Is it possible to add scroll bar to VerticalPager ? I can add scrollbar easily with ScalingLazyColumn, but not VerticalPager. There is no documentation given by Google, but app get rejected if no scroll bar added.

Here is the sample code (not working):

@Composable
fun TestVerticalPagerWithRightPositionIndicator() {
    // Simulate the pager state
    val pagerState = rememberPagerState(
        pageCount = { 10 }, // Total pages = 10
        initialPage = 5     // Start at page 5
    )

    // Create the ScalingLazyListState for PositionIndicator
    val listState = rememberScalingLazyListState(
        initialCenterItemIndex = pagerState.currentPage
    )

    LaunchedEffect(pagerState.currentPage) {
        listState.scrollToItem(pagerState.currentPage)
    }

    Box(modifier = Modifier.fillMaxSize()) {
        // Main pager content
        VerticalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxSize()
                .padding(end = 32.dp) // Leave space for the scrollbar
        ) { page ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(if (page % 2 == 0) Color.Cyan else Color.Yellow),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Page $page", style = MaterialTheme.typography.title3)
            }
        }

        // PositionIndicator on the right
        PositionIndicator(
            scalingLazyListState = listState
        )
    }
}

The scroll bar I wish to add to VerticalPager: enter image description here

Upvotes: 0

Views: 33

Answers (0)

Related Questions