I need to add a scroll to a page. but i get this error: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

I do have Lazy Column inside a big column.. and I think that is the problem. but i need the whole page to scroll.

here is my code:

@Composable
  fun ContactDetails(contactViewModel: ContactViewModel, contactId: String?) {
val contact = contactViewModel.getContactById(contactId)
val optionsScrollState = rememberScrollState()
Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(state = optionsScrollState),
    horizontalAlignment = Alignment.Start
) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp)
    ) {
        Card(modifier = Modifier.fillMaxWidth()) {
            if (contact[0].image != null) {
                Image(
                    painter = rememberImagePainter(data = contact[0].image),
                    contentDescription = "Image",
                    modifier = Modifier.fillMaxWidth(),
                    contentScale = ContentScale.Crop
                )
            } else {
                Box(
                    modifier = Modifier
                        .fillMaxHeight()
                        .fillMaxWidth()
                        .background(color = Color.Magenta),
                    contentAlignment = Alignment.Center,

                    ) {
                    Text(
                        text = contact[0].first_name[0].toString(),
                        fontSize = 26.sp,
                        fontWeight = FontWeight.Bold
                    )
                }
            }
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = "${contact.first().first_name} ${contact.first().last_name}",
                    modifier = Modifier,
                    color = Color.White,
                    style = MaterialTheme.typography.h4,
                    fontWeight = FontWeight.Bold

                )

            }
        }

    }

    Divider(
        color = Color.LightGray,
        thickness = 2.dp,
    )

    phoneCard(contact = contact.first(), contactViewModel)
    emailCard(contact = contact.first(), contactViewModel)

}

}

@Composable
fun phoneCard(contact: Contact, contactViewModel: ContactViewModel) {

val phoneList = contactViewModel.getPhoneListByContactId(contact.id)
Row(modifier = Modifier.padding(10.dp)) {
    Icon(imageVector = Icons.Default.Phone, contentDescription = "Phone Icon")
    Text(
        text = "Phone:",
        modifier = Modifier.padding(start = 10.dp),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.h6,
        fontWeight = FontWeight.Bold
    )
}
LazyColumn {

    items(items = phoneList) {

        Row(modifier = Modifier.padding(10.dp)) {
            Text(text = it.type   ": ", fontWeight = FontWeight.Bold)
            Text(text = it.number)
        }

    }
}

}

@Composable
fun emailCard(contact: Contact, contactViewModel: ContactViewModel) {

val emailList = contactViewModel.getEmailListByContactId(contact.id)
Row(modifier = Modifier.padding(10.dp)) {
    Icon(imageVector = Icons.Default.Email, contentDescription = "Email Icon")
    Text(
        text = "Email:",
        modifier = Modifier.padding(start = 10.dp),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.h6,
        fontWeight = FontWeight.Bold
    )
}
LazyColumn {
    items(items = emailList) {
        Row(modifier = Modifier.padding(10.dp)) {

            Text(text = it.type   ": ", fontWeight = FontWeight.Bold)
            Text(text = it.address)
        }
    }
}

}

here is my emulator:

my description page

CodePudding user response：

Specify a height in your LazyColumns for example:

LazyColumn(
    modifier = Modifier
          .fillMaxWidth()
          .height(50.dp)
) {