I'd like to build the screen which is split vertically into 2 sections:

• vertical list at the top with fixed height (can't make it scrollable)
• horizontal list with button input at the bottom

The problem is, I can't set this list at the top of the screen as scrollable because I'm getting:

Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

My code:

Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(Color.Black)
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Column {
            LazyColumn(
                modifier = Modifier
                    .background(Color.Gray)
                    .heightIn(0.dp, 48.dp)
                    .verticalScroll(scrollState)
            ) {
                items(passwords.size) { password ->
                    Text(
                        modifier = Modifier.fillMaxSize(),
                        text = passwords[password]
                    )
                    Divider(color = Color.Black, thickness = 2.dp)
                }
            }
            Spacer(Modifier.height(124.dp))
            Row {
                Column {
                    Button({}) {
                        Text("Add")
                    }
                    Spacer(Modifier.width(16.dp))
                    Input()
                }
                Spacer(Modifier.width(16.dp))
                Column {
                    Button({}) {
                        Text("Remove")
                    }
                    Spacer(Modifier.width(16.dp))
                    Input()
                }
            }
        }
    }

CodePudding user response：

You are getting it because you set Modifier.erticalScroll(scrollState). LazyColumn is already scrollable if the total height of items are bigger than its height.