Skip to content

Instantly share code, notes, and snippets.

@nglauber
Last active March 8, 2024 20:59
Show Gist options
  • Save nglauber/64df9091c2e76bde648ce48d585ed3e1 to your computer and use it in GitHub Desktop.
Save nglauber/64df9091c2e76bde648ce48d585ed3e1 to your computer and use it in GitHub Desktop.
package br.com.nglauber.jetpackcomposeplayground.screens
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
val books = (1..10).map { "Book $it" }.toList()
val wishlisted = (1..50).map { "Wishlisted Book $it" }
@Composable
fun NestedScrollScreen() {
LazyColumn(
modifier = Modifier.fillMaxSize(),
) {
// My Books section
item {
Column(modifier = Modifier.fillMaxWidth()) {
Text("My Books", style = MaterialTheme.typography.h4)
LazyRow(
modifier = Modifier
.fillMaxWidth()
) {
items(books) { item ->
Box(
modifier = Modifier
.padding(4.dp)
.height(120.dp)
.width(90.dp)
.background(color = Color.Gray, shape = RoundedCornerShape(8.dp))
) {
Text(item, modifier = Modifier.align(Alignment.Center))
}
}
}
}
}
item {
Text("Whishlisted Books", style = MaterialTheme.typography.h4)
}
// Turning the list in a list of lists of two elements each
items(wishlisted.windowed(2, 2, true)) { sublist ->
Row(Modifier.fillMaxWidth()) {
sublist.forEach { item ->
Text(
item, modifier = Modifier
.height(120.dp)
.padding(4.dp)
.background(Color.Yellow)
.fillParentMaxWidth(.5f)
)
}
}
}
}
}
@murattuzel
Copy link

Thanks for sharing, great solution! I think padding should be specified after fillParentMaxWidth attribute to get equal horizontal spacing.

@ma-za-kpe
Copy link

This is what i get when i scroll to the bottom

java.lang.IllegalArgumentException: Inconsistency between the count of nodes tracked by the state (0) and the children count on the SubcomposeLayout (1). Are you trying to use the state of the disposed SubcomposeLayout?

@nglauber
Copy link
Author

nglauber commented May 7, 2022

@ma-za-kpe I copied and pasted the code above and worked fine for me... Did you make any change on it?

@ma-za-kpe
Copy link

ma-za-kpe commented May 7, 2022

Hello, so I'm trying to load this https://raw.githubusercontent.com/DevTides/DogsApi/master/dogs.json data into the row. And that's the error I got.

It scrolls fine till the bottom, but at the very end crashes

@ma-za-kpe
Copy link

Ive revereted to using this, val wishlisted = (1..50).map { "Wishlisted Book $it" }
, in the second grid view ... It crushes every time... with the same error

@nglauber
Copy link
Author

nglauber commented May 7, 2022

It's not happening here... Which compose version you're using? I'm using 1.2.0-alpha07, but I don't think it's related to the version...

@ma-za-kpe
Copy link

Oh man!

@ma-za-kpe
Copy link

Thank you for this...let me give it a go.

@nglauber
Copy link
Author

FYI: I was able to reproduce your issue when I tried to update my project to the latest version of compose and accompanist (1.2.0-alpha08 and 0.24.7-alpha respectively)
Check here: google/accompanist#1140
I reverted this change and it worked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment