添加滚动条 - Jetpack Compose答案

【问题标题】：add scroll - jetpack compose添加滚动条 - Jetpack Compose
【发布时间】：2023-01-07 19:26:52
【问题描述】：

我需要在页面上添加滚动条。但我得到这个错误：垂直滚动组件是用无限最大高度限制测量的，这是不允许的。

我在一个大专栏中确实有惰性专栏..我认为这就是问题所在。但我需要整个页面滚动。

这是我的代码：

@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)
        }
    }
}

}

这是我的模拟器：

my description page

【问题讨论】：

标签： kotlin scroll android-jetpack-compose scrollview

【解决方案1】：

在您的LazyColumns 中指定一个高度，例如：

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

【讨论】：