Search code examples
androidandroid-jetpack-composejetpack-compose-accompanist

Compose Horizontal Pager always filling max size, verticalAligment not working


I'm using Google's Accompanist Horizontal Pager, and I need the pager to wrap content size. For some reason it fills max size. Currently it's a child of constraint layout, however I tried putting it inside column with another having Modifier.weight(1f) - same result. Also verticalAlignment doesn't work, child is centered.

Screenshot; Green - pager, red - it's child.

Compose version : 1.0.5 ; Pager version : 0.21.3-beta

HorizontalPager(
            state = stickerBookState.pagerState,
            modifier = Modifier
                .constrainAs(pager) {
                    top.linkTo(pagerNavigator.bottom, 16.dp)
                    linkTo(parent.start, parent.end)
                    height = Dimension.wrapContent // for whatever reason it's actual size if fillConstraints / fillMaxSize
                    width = Dimension.fillToConstraints
                }.background(PmColors.CompletedGreen),
            verticalAlignment = Alignment.Top, // this one also doesn't seem to work
            count = model.pages.size,
        ) { pageIndex ->
            val pageData = model.pages[pageIndex]
            @OptIn(ExperimentalFoundationApi::class)
            LazyVerticalGrid(
                modifier = Modifier
                    .wrapContentSize()
                    .background(PmColors.AlertRed),
                cells = GridCells.Fixed(2)
            ) {
                items(pageData) { holderData ->
                    Box(
                        modifier = Modifier
                            .padding(bottom = 24.dp)
                            .fillMaxWidth()
                            .wrapContentHeight(),
                        contentAlignment = Alignment.Center
                    ) {
                        // some composable
                    }
                }
            }
        }

Solution

  • It's bug that has been fixed in version 0.21.4:

    [Pager] Allow HorizontalPager to wrap content height and VerticalPager to wrap content width...

    Modifying the code from their sample accomplishes the desired effect:

    private fun Sample() {
    Scaffold(
        ...
    ) {
        Column(Modifier.fillMaxSize()) {
                ...
             HorizontalPager(
                ...
                verticalAlignment = Alignment.Top, //add this
                modifier = Modifier
                    .wrapContentHeight() //and this
                    .fillMaxWidth()
            ) { page ->
                ...
            }
    
            ...
        }
    }
    

    }

    enter image description here