0
1.5K
VistasJetpack Compose: ¿Cómo poner un LazyVerticalGrid dentro de una columna desplazable?
Cuando intento poner un LazyVerticalGrid dentro de una Column desplazable , aparece el siguiente error:
java.lang.IllegalStateException: no se permite anidar diseños desplazables en la misma dirección como LazyColumn y Column(Modifier.verticalScroll()). Si desea agregar un encabezado antes de la lista de elementos, eche un vistazo al componente LazyColumn que tiene una API DSL que permite agregar primero un encabezado a través de la función item() y luego la lista de elementos a través de items().
No estoy haciendo una lista tradicional, solo tengo muchos elementos que son demasiado grandes para caber en la pantalla. Por lo tanto, quiero que la columna se desplace para poder ver todos los elementos. Aquí está mi código:
@ExperimentalFoundationApi @Composable fun ProfileComposable(id: String?) { val viewModel: ProfileViewModel = viewModel() if (id != null) { viewModel.getProfile(id) val profile = viewModel.profile.value val scrollState = rememberScrollState() if (profile != null) { Column(modifier = Modifier .fillMaxWidth() .fillMaxHeight() .verticalScroll(scrollState)) { Row() { ProfilePic(profile.getImgUrl(), profile.name) Column(Modifier.padding(16.dp)) { ProfileName(profile.name) Stats(profile.stats) // <--------------- the offending composable } } Sprites(sprites = profile.sprites) TextStat(profile.id.toString(), "Pokemon Number") TextStat(profile.species.name, "Species") TextStat(profile.types.joinToString { it.type.name }, "Types") TextStat(profile.weight.toString(), "Weight") TextStat(profile.forms.joinToString { it.name }, "Forms") } } else { Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { CircularProgressIndicator() } } } else { Text("Error") } } El componible Stats() contiene LazyVerticalGrid que causa el error:
@ExperimentalFoundationApi @Composable fun Stats(stats: List<Stat>) { LazyVerticalGrid(cells = GridCells.Fixed(2)) { itemsIndexed(stats) { index, item -> StatBox(stat = item) } } }No quiero que la cuadrícula se desplace, solo quiero mostrar una cuadrícula dentro de una columna desplazable.
3 Respuestas
Responde la pregunta0
Acabo de encontrarme con este problema. Como dijo @gaohomway, su mejor apuesta es usar el FlowRow() experimental de la biblioteca Accompanist de Google.
Aquí hay un fragmento de código de trabajo como ejemplo:
@Composable fun ProfileScreen2() { LazyColumn( modifier = Modifier .fillMaxSize() ) { item { Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(color = Red)) } item { Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(color = Gray)) } item { FlowRow() { SampleContent() } } } } @Composable internal fun SampleContent() { repeat(60) { Box( modifier = Modifier .size(64.dp) .background(Blue) .border(width = 1.dp, color = DarkGray), contentAlignment = Alignment.Center, ) { Text(it.toString()) } } }Muestra esta página desplazable (no se preocupe por la barra de navegación en la parte inferior):
0
Razón
No se permite anidar diseños desplazables en la misma dirección como LazyColumn y Column(Modifier.verticalScroll()).
No se puede encontrar el desplazamiento prohibido LazyVerticalGrid temporalmente
Alternativas
Biblioteca alternativa de Jetpack Compose Flow Layouts oficial de Android
FlowRow { // row contents } FlowColumn { // column contents }0
Tuve un caso de uso similar, el objetivo era diseñar una pantalla de perfil que tuviera un montón de información y estadísticas en la parte superior, y luego llegara a las publicaciones como una cuadrícula en la parte inferior de la pantalla.
Terminé usando LazyVerticalGrid para toda la lista y configurando el rango completo para los elementos que necesitan llenar toda la pantalla:
LazyVerticalGrid(cells = GridCells.Fixed(3)) { item(span = { GridItemSpan(3) }) { TopInfo() } item(span = { GridItemSpan(3) }) { SomeOtherInfo() } item(span = { GridItemSpan(3) }) { BottomInfo() } items(gridItems) { GridItemView(it) } }