LazyColumn with ConstraintLayout in android jetpack compose

Question

I'm going to put a label on the top for each column and a LazyСolumn on the bottom. As follows.

However, when I filled it out, the screen other than I expected appeared:

Is there anything else I need to set up? Here is my code

@Composable
fun MenuDetailList(
    loading: Boolean,
    type: String,
    items: List<Any>,
    page: Int,
    onChangeScrollPosition: (Int) -> Unit,
    onTriggerNextPage: () -> Unit,
    onCallCacheDialog: (Int) -> Unit
) {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp

    Box(
        modifier = Modifier
            .background(color = MaterialTheme.colors.surface)
    ) {
        if (loading && items.isEmpty()) {
            LoadingShimmer(imageHeight = screenHeight)
        }else if (items.isEmpty()) {
            NothingHere()
        }else {
            ConstraintLayout(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.White)
            ) {
                val (label, list) = createRefs()
                TopAppBar(
                    modifier = Modifier
                        .constrainAs(label) {
                            top.linkTo(parent.top)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                ) {
                    MenuDetailLabel()
                }
                LazyColumn(
                    modifier = Modifier
                        .background(color = Color.Blue)
                ) {
                    itemsIndexed(
                        items = items
                    ) { index, detail ->
                        onChangeScrollPosition(index)
                        if ((index + 1) >= (page * PAGE_SIZE) && !loading) {
                            onTriggerNextPage()
                        }
                        when(type) {
                            "purchase" -> {
                                PurchaseCard(
                                    purchase = detail as Purchase,
                                    onClick = onCallCacheDialog
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

`ConstraintLayout` is redundant here. Just use `Column`, and add `weight(1f)` modifier to `LazyColumn`. — Phil Dukhov, Nov 18 '21 at 05:59
@PhilipDukhov Thanks, I just use constraint layout, it makes screen what I need — Polaris Nation, Nov 18 '21 at 06:59

MohammadBaqer · Answer 1 · 2023-06-19T14:20:56.437

5

modifier = Modifier.constrainAs(list) {
            top.linkTo(label.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
width = Dimension.fillToConstraints
height = Dimension.fillToConstraints
}

edited Jun 19 '23 at 14:20

answered Apr 20 '22 at 07:11

MohammadBaqer

766
6
32

5

height give as `Dimension.preferredWrapContent` – Muthukrishnan Rajendran Sep 19 '22 at 13:20
@MuthukrishnanRajendran (preferredWrapContent) worked for me. thanks – A.R.B.N Jul 05 '23 at 08:29

score 0 · Answer 2 · answered Nov 18 '21 at 05:28

0

You forgot the constrainAs for the LazyColumn:

LazyColumn(
    modifier = Modifier
        .background(color = Color.Blue)
        .constrainAs(list) {
            top.linkTo(label.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
        }
)

answered Nov 18 '21 at 05:28

Johann

27,536
39
165
279

Thanks you for your answer, but it couldn't solve my problem. lazycolumn fill all screen – Polaris Nation Nov 18 '21 at 07:00
Well the fact that you were missing the constrainAs and adding it didn't help indicates that you have some even more issues. You should post a small demo app that shows everything. – Johann Nov 18 '21 at 07:05

LazyColumn with ConstraintLayout in android jetpack compose

2 Answers2