vertical scroll in viewpager jetpack compose is not working

Question

Facing issue with a vertical scroll in Horizontal View Pager using Accompanist. Can't scroll the column vertically inside HorizontalViewPager. So take a look at code and make corrections on how can fix it or any other solution. If possible will be appreciated.

                HorizontalPager(
                count = 10,
                modifier = Modifier.fillMaxSize()
            ) { page ->



                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(),
                ){
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                }
            }

can't scroll vertically while using Column. If Try to use LazyColumn It produces an error. Here is Accompanist ViewPager Link Accompanist Library

score 1 · Answer 1 · answered Dec 09 '21 at 14:04

check using LazyColumn

           LazyColumn(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxSize()
             ) {
                 item {
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                    Spacer(modifier = Modifier.height(16.dp))
                    ScoreCardListItem()
                   }
                }

Thanks, it worked. Actually, I was using Column inside Composable function. That's why It was generating error, removed Colum, and place in item{}. Then it worked. The solution is LazyColumn. — Abdul Mateen, Dec 10 '21 at 12:22

score 0 · Answer 2 · answered Jan 13 '23 at 10:21

0

Another possible solution is to use the vertical scroll property of the Modifier. Like in the below code

modifier = Modifier
            .verticalScroll(rememberScrollState())

answered Jan 13 '23 at 10:21

Abdul Mateen

1,139
1
14
21

vertical scroll in viewpager jetpack compose is not working

2 Answers2