VerticalScrolling content (lazyColumn) nested with...

# compose

[Pardeep Sharma]

VerticalScrolling content (lazyColumn) nested with HorizontalPager is not working. I tried nestedScroll(connection), setting weight and fixing the height of the Vertical Lazy Column but none of them helped. Please check if anyone can help:

[Pardeep Sharma]

HorizontalPager(
modifier = Modifier
.padding(top = Dimens.SpacingNormal)
.fillMaxHeight()
.fillMaxWidth(),
state = pagerState,
pageSize = FillPageSize(PAGE_WIDTH),
contentPadding = PaddingValues(horizontal = Dimens.SpacingXNormal),
pageSpacing = Dimens.SpacingSmall,
) { page ->
// Our page content

items[page]?.let {
Column(
modifier = Modifier
.fillMaxHeight()
) {
BenefitComponent(
it,
onBuyNowClick,
onComparePassesClick,
)
}
}
}

[Pardeep Sharma]

@Composable
fun BenefitComponent(
items: ProductHighlightsUIModel,
onBuyNowClick: (String) -> Unit,
onComparePassesClick: () -> Unit,
) {
Box(
modifier = Modifier
.padding(bottom = SpacingExtraLarge)
.fillMaxWidth()
.fillMaxHeight()
) {
Box {
ElevatedCard(
modifier = Modifier.padding(top = SpacingExtraLarge),
colors = CardDefaults.cardColors(containerColor = Theme.colorScheme.background),
shape = Theme.shapes.medium,
elevation = CardDefaults.cardElevation(DefaultCardElevation),
) {
Column(
modifier = Modifier
.padding(
top = SpacingExtraLarge,
start = SpacingMedium, end = SpacingMedium,
)
.fillMaxWidth()
.fillMaxHeight()
) {
Column(
Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
modifier = Modifier
.wrapContentWidth(),
text = items.strippedTitle,
style = Theme.typography.displayMedium,
color = tertiaryLight,
)
VerticalSpacer(size = SpacingMini)
Text(
modifier = Modifier
.wrapContentWidth(),
text = items.prices.firstOrNull()?.pricePoint ?: "",
style = Theme.typography.headlineLarge,
color = Theme.colorScheme.onSurface,
)
}
VerticalSpacer(size = SpacingNormal)

val listState = rememberLazyListState()
Box(modifier = Modifier.weight(1f)) { // Wrap LazyColumn inside Box
LazyColumn(
state = listState,
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
) {
items(items.productFeatureList) { item ->
AllBenefitItem(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = SpacingSmall),
item,
)
}
}
}

VerticalSpacer(size = SpacingSmall)

Box(
modifier = Modifier
.fillMaxWidth(),
) {
Row(
modifier = Modifier
.align(Alignment.Center)
.wrapContentWidth()
.background(
color = ColorRed,
shape = RoundedCornerShape(size = IconLarge),
)
.clickable { }
.padding(vertical = SpacingMedium),
horizontalArrangement = Arrangement.End, // Center horizontally within this row
) {
Text(
modifier = Modifier
.wrapContentWidth()
.padding(horizontal = Dimens.SpacingXXXL),
text = stringResource(com.android.core.ui.R.string.Purchases_Screen_BuyNow),
style = Theme.typography.bodyLarge,
color = Theme.colorScheme.onPrimary,
)
}
}

VerticalSpacer(size = Dimens.ScreenPadding)
}
}
Box(
modifier = Modifier
.padding(horizontal = Dimens.SpacingXXXL)
.aspectRatio(ratio = 16 / 9f)
.clip(Theme.shapes.medium)
.background(Color.White),
) {
RemoteImage(
imageUrl = items.mobileImage,
modifier = Modifier.fillMaxSize(),
scale = ContentScale.Crop,
)
}
}
}
}

@Composable
fun AllBenefitItem(modifier: Modifier = Modifier, item: ProductFeatureListUIModel) {
Column {
HorizontalDivider(
modifier = Modifier
.fillMaxWidth(),
thickness = 0.5.dp,
color = Theme.colorScheme.outline,
)
Row(
modifier = modifier,
verticalAlignment = Alignment.CenterVertically,
) {
Box(
modifier = Modifier
.wrapContentHeight()
.width(IconMini),
) {
Image(
modifier = Modifier
.size(
if (item.included.equals(UiConstants.BENEFIT_YES, true)) {
IconMini
} else {
IconMicro
},
)
.align(Alignment.Center),
painter = if (item.included.equals(UiConstants.BENEFIT_YES, true)) {
painterResource(com.android.core.ui.R.drawable.ic_benefit_yes)
} else {
painterResource(com.android.core.ui.R.drawable.ic_benefit_no)
},
contentDescription = "Benefit",
)
}
HorizontalSpacer(SpacingMedium)
Text(
text = item.featureText,
style = Theme.typography.labelLarge,
color = Theme.colorScheme.onSurface,
)
}
}
}

[Zach Klippenstein (he/him) [MOD]]

I think i know what the issue is, but you have a lot of boxes around things that don't seem to need to be there. I would try to simplify this code a lot before trying to understand what's broken. It'll probably be more apparent after simplifying