Jetpack Compose – 无法创建嵌套的LazyColumns

huangapple
go评论89阅读模式
英文:

Jetpack Compose - No possibilit to create a nested LazyColumns

问题

以下问题：我创建了一个Compose视图，应该显示一个项目列表（在将来的开发中还应该显示更多内容）。

我创建了以下视图：

  1. data class ItemHolder(
  2.     val header: String,
  3.     val subItems: List<String>,
  4.     val footer: String
  5. )
  7. class MainActivity : ComponentActivity() {
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  11.         // 创建项目
  12.         val items = (1..20).map { itemIndex ->
  13.             ItemHolder(
  14.                 header = "第$itemIndex个标题",
  15.                 subItems =  (1..30).map { subItemIndex ->
  16.                     "第$itemIndex个子项目的子项目 $subItemIndex"
  17.                 },
  18.                 footer = "第$itemIndex个页脚"
  19.             )
  20.         }
  22.         setContent {
  23.             Column(
  24.                 modifier = Modifier.verticalScroll(rememberScrollState())
  25.             ) {
  26.                 Text(text = "项目：")
  27.                 ItemList(items = items)
  28.             }
  29.         }
  30.     }
  31. }
  33. // 显示项目列表
  34. @Composable
  35. fun ItemList(items: List<ItemHolder>) {
  36.     LazyColumn {
  37.         items(items = items) {
  38.             Item(item = it)
  39.         }
  40.     }
  41. }
  43. // 显示单个项目
  44. @Composable
  45. fun Item(item: ItemHolder) {
  46.     var subItemsVisible by remember { mutableStateOf(false) }
  48.     // 显示项目的标题
  49.     Row {
  50.         Text(text = item.header)
  51.         Button(
  52.             onClick = { subItemsVisible = !subItemsVisible },
  53.             content = {
  54.                 Text(text = if (subItemsVisible) "隐藏" else "显示")
  55.             }
  56.         )
  57.     }
  59.     // 显示项目的子项目
  60.     AnimatedVisibility(visible = subItemsVisible) {
  61.         Column {
  62.             for (subItem in item.subItems) {
  63.                 Text(text = subItem)
  64.             }
  65.         }
  66.     }
  68.     // 显示项目的页脚
  69.     Text(text = item.footer)
  70. }

我发现问题是外部的Column（可以滚动）包含了包含实际项目的LazyColumn。

我得到以下错误：

  1. java.lang.IllegalStateException: 垂直滚动组件的最大高度约束被测量为无穷大，这是不允许的。

我搜索了好几个小时，但没有找到适合我的问题的解决方案。
我该如何修复这个问题？

英文:

Following problem: I created a Compose View which should display a item list (it also should display more things in future development).

I created following view:

  1. data class ItemHolder(
  2.     val header: String,
  3.     val subItems: List&lt;String&gt;,
  4.     val footer: String
  5. )
  7. class MainActivity : ComponentActivity() {
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  11.         // Create items
  12.         val items = (1..20).map { itemIndex -&gt;
  13.             ItemHolder(
  14.                 header = &quot;Header of $itemIndex&quot;,
  15.                 subItems =  (1..30).map { subItemIndex -&gt;
  16.                     &quot;Sub item $subItemIndex of $itemIndex&quot;
  17.                 },
  18.                 footer = &quot;Footer of $itemIndex&quot;
  19.             )
  20.         }
  22.         setContent {
  23.             Column(
  24.                 modifier = Modifier.verticalScroll(rememberScrollState())
  25.             ) {
  26.                 Text(text = &quot;Items:&quot;)
  27.                 ItemList(items = items)
  28.             }
  29.         }
  30.     }
  31. }
  33. // Displays the list of items
  34. @Composable
  35. fun ItemList(items: List&lt;ItemHolder&gt;) {
  36.     LazyColumn {
  37.         items(items = items) {
  38.             Item(item = it)
  39.         }
  40.     }
  41. }
  43. // Displays a single item
  44. @Composable
  45. fun Item(item: ItemHolder) {
  46.     var subItemsVisible by remember { mutableStateOf(false) }
  48.     // Displays the header of the item
  49.     Row {
  50.         Text(text = item.header)
  51.         Button(
  52.             onClick = { subItemsVisible = !subItemsVisible },
  53.             content = {
  54.                 Text(text = if (subItemsVisible) &quot;Hide&quot; else &quot;Show&quot;)
  55.             }
  56.         )
  57.     }
  59.     // Displays the sub items of the item
  60.     AnimatedVisibility(visible = subItemsVisible) {
  61.         Column {
  62.             for (subItem in item.subItems) {
  63.                 Text(text = subItem)
  64.             }
  65.         }
  66.     }
  68.     // Displays the footer of the item
  69.     Text(text = item.footer)
  70. }

I found out that the problem is, that the outer Column (which is scrollable) contains the LazyColumn which contains the actual items.

I get following error:

  1. java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.

I was searching around for hours, but didn't find any suitable solution for my problem.
How can I fix this?

答案1

得分: 1

I think you have to remove modifier = Modifier.verticalScroll(rememberScrollState()) it will not work with nested lazy column

refer this link may be help you :https://proandroiddev.com/nested-scroll-with-jetpack-compose-9c3b054d2e12

I edit your code I hope it will help you

  1. data class ItemHolder(
  2.     val header: String,
  3.     val subItems: List<String>,
  4.     val footer: String
  5. )
  7. class MainActivity : ComponentActivity() {
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  10.         val items = (1..4).map { itemIndex ->
  11.             ItemHolder(
  12.                 header = "Header of $itemIndex",
  13.                 subItems = (1..30).map { subItemIndex ->
  14.                     "Sub item $subItemIndex of $itemIndex"
  15.                 },
  16.                 footer = "Footer of $itemIndex"
  17.             )
  18.         }
  20.         setContent {
  21.             LazyColumn(
  22.                 modifier = Modifier.padding(10.dp)
  23.             ) {
  24.                 item {
  25.                     Text(text = "Items: Header", color = Color.Red, fontSize = 20.sp)
  26.                     Spacer(modifier = Modifier.height(20.dp))
  27.                 }
  28.                 items(items = items) {
  29.                     Item(item = it)
  30.                 }
  31.                 item {
  32.                     Spacer(modifier = Modifier.height(20.dp))
  33.                     Text(text = "Items: Footer", color = Color.Red, fontSize = 20.sp)
  34.                     Spacer(modifier = Modifier.height(20.dp))
  35.                 }
  36.                 items(items = items) {
  37.                     Item(item = it)
  38.                 }
  39.             }
  40.         }
  41.     }
  42. }
  44. // Displays a single item
  45. @Composable
  46. fun Item(item: ItemHolder) {
  47.     var subItemsVisible by remember { mutableStateOf(false) }
  49.     // Displays the header of the item
  50.     Row {
  51.         Text(text = item.header)
  52.         Button(
  53.             onClick = { subItemsVisible = !subItemsVisible },
  54.             content = {
  55.                 Text(text = if (subItemsVisible) "Hide" else "Show")
  56.             }
  57.         )
  58.     }
  60.     // Displays the sub items of the item
  61.     AnimatedVisibility(visible = subItemsVisible) {
  62.         Column {
  63.             for (subItem in item.subItems) {
  64.                 Text(text = subItem)
  65.             }
  66.         }
  67.     }
  69.     // Displays the footer of the item
  70.     Text(text = item.footer)
  71. }

Jetpack Compose – 无法创建嵌套的LazyColumns

英文:

I think you have to remove modifier = Modifier.verticalScroll(rememberScrollState()) it will not work with nested lazy column

refer this link may be help you :https://proandroiddev.com/nested-scroll-with-jetpack-compose-9c3b054d2e12

I edit your code I hope it will help you

  1. data class ItemHolder(
  2.     val header: String,
  3.     val subItems: List&lt;String&gt;,
  4.     val footer: String
  5. )
  7. class MainActivity : ComponentActivity() {
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  10.         val items = (1..4).map { itemIndex -&gt;
  11.             ItemHolder(
  12.                 header = &quot;Header of $itemIndex&quot;,
  13.                 subItems = (1..30).map { subItemIndex -&gt;
  14.                     &quot;Sub item $subItemIndex of $itemIndex&quot;
  15.                 },
  16.                 footer = &quot;Footer of $itemIndex&quot;
  17.             )
  18.         }
  20.         setContent {
  21.             LazyColumn(
  22.                 modifier = Modifier.padding(10.dp)
  23.             ) {
  24.                 item {
  25.                     Text(text = &quot;Items: Header&quot;, color = Color.Red, fontSize = 20.sp)
  26.                     Spacer(modifier = Modifier.height(20.dp))
  27.                 }
  28.                 items(items = items) {
  29.                     Item(item = it)
  30.                 }
  31.                 item {
  32.                     Spacer(modifier = Modifier.height(20.dp))
  33.                     Text(text = &quot;Items: Footer&quot;, color = Color.Red, fontSize = 20.sp)
  34.                     Spacer(modifier = Modifier.height(20.dp))
  35.                 }
  36.                 items(items = items) {
  37.                     Item(item = it)
  38.                 }
  39.             }
  40.         }
  41.     }
  42. }
  45. // Displays a single item
  46. @Composable
  47. fun Item(item: ItemHolder) {
  48.     var subItemsVisible by remember { mutableStateOf(false) }
  50.     // Displays the header of the item
  51.     Row {
  52.         Text(text = item.header)
  53.         Button(
  54.             onClick = { subItemsVisible = !subItemsVisible },
  55.             content = {
  56.                 Text(text = if (subItemsVisible) &quot;Hide&quot; else &quot;Show&quot;)
  57.             }
  58.         )
  59.     }
  61.     // Displays the sub items of the item
  62.     AnimatedVisibility(visible = subItemsVisible) {
  63.         Column {
  64.             for (subItem in item.subItems) {
  65.                 Text(text = subItem)
  66.             }
  67.         }
  68.     }
  70.     // Displays the footer of the item
  71.     Text(text = item.footer)
  72. }

Jetpack Compose – 无法创建嵌套的LazyColumns

答案2

得分: 1

你可以简单地将LazyColumn替换为Column，如下所示：

  1. // 显示项目列表
  2. @Composable
  3. fun ItemList(items: List<ItemHolder>) {
  4.     Column {
  5.         items.indices.forEach { i ->
  6.             Item(item = items[i])
  7.         }
  8.     }
  9. }
英文:

Simply you can replace LazyColumn by Column as follows:

  1. // Displays the list of items
  2. @Composable
  3. fun ItemList(items: List&lt;ItemHolder&gt;) {
  4.     Column {
  5.         items.indices.forEach { i -&gt;
  6.             Item(item = items[i])
  7.         }
  8.     }
  9. }

huangapple
  • 本文由 发表于 2023年2月6日 19:11:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75360553.html
  • android
  • android-jetpack-compose
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定