6
votes

Comment créer GridView à l'aide de Jetpack Compose

Comment créer Gridview dans Jetpack compose sans utiliser recycler view ou android.widget.gridview?

android android-jetpack-compose

1 commentaires

@Gabriele Matiotti, je voulais dire comment créer une vue en grille sans utiliser android.widget.GridView, et j'ai édité mon message

4 Réponses :

4
votes

Vous pouvez utiliser la disposition Table qui organise ses enfants en lignes et en colonnes

Quelque chose comme:

@Composable
fun table(){

    Padding(2.dp) {
        Table(columns = 8) {

            for (i in 0 until 8) {
                tableRow {
                    for (j in 0 until 8) {
                        Padding(2.dp) {
                            //Cell
                            Text("TX")
                        }
                    }
                }
            }
        }
    }
}

2 commentaires

Il convient de noter que cela est fortement gonflé et donc pas bien adapté aux énormes ensembles de données - il n'y a actuellement pas de solution qui gonfle paresseusement (mais il y en aura dans le futur).

Cette réponse n'est plus valide car la Table n'est plus dans Compose. Même la page n'existe pas

0
votes

J'ai créé une grille personnalisée pour utiliser Android jetpack compose jusqu'à ce qu'ils ne prennent pas en charge la vue de recyclage officielle pour Gridlayout dans Compose.

@Composable
fun Item(t: T) {
....
}

UTILISATION

 GridView(cols = 4, list = model.list,child = { Item( it) })

Déclaration d'article

@Composable
fun <T> GridView(
cols: Int = 0,
list: List<T>,
child: @Composable() (dataModal: T) -> Unit
) {

val rows = (list.size / cols) + (if (list.size % cols > 0) 1 else 0)
VerticalScroller(modifier = 
Modifier.fillMaxHeight().fillMaxHeight().drawBackground(color = colorResource(
    id = R.color.color_bg_application
))) {
    Table(columns = cols) {
        for (r in 0 until rows) {
            tableRow {
                for (c in 0 until cols) {
                    //Cell
                    val i = (r * cols) + c
                    if (i < list.size) {
                        child(list[i])
                    } else {
                        break
                    }
                }
            }
        }

    }
}
}

0 commentaires

0
votes

J'ai apporté quelques modifications à la réponse de @Madhav (en utilisant compose v1.0.0-alpha01 ):

GridView(cols = 2, list = listOf("1", "2", "3", "4",)) {
     Text(text = it)
}

Utilisation :

@Composable
fun <T> GridView(
        cols: Int = 1,
        list: List<T>,
        rowModifier: Modifier = Modifier,
        colModifier: Modifier = Modifier,
        child: @Composable (dataModal: T) -> Unit
) {

    val rows = (list.size / cols) + (if (list.size % cols > 0) 1 else 0)
    
    ScrollableColumn(modifier = colModifier) {
        
        for (r in 0 until rows) {
            Row(modifier = rowModifier, horizontalArrangement = Arrangement.SpaceAround) {
                for (cell in 0 until cols) {
                    val i = (r * cols) + cell
                    if (i < list.size) { child(list[i]) } else { break }
                }
            }
        }
    }

}

0 commentaires

7
votes

Encore une autre solution basée sur LazyColumnFor (Jetpack Compose version 1.0.0-alpha04)

@Composable
fun <T> LazyGridFor(
    items: List<T>,
    rowSize: Int = 1,
    itemContent: @Composable BoxScope.(T) -> Unit,
) {
    val rows = items.chunked(rowSize)
    LazyColumnFor(rows) { row ->
        Row(Modifier.fillParentMaxWidth()) {
            for ((index, item) in row.withIndex()) {
                Box(Modifier.fillMaxWidth(1f / (rowSize - index))) {
                    itemContent(item)
                }
            }
        }
    }
}
    
@Preview("LazyGridFor: example")
@Composable()
fun LazyGridForPreview() {
    val data = (1..100).map(Integer::toString)
    LazyGridFor(data, 3) { item ->
        Text(item)
    }
}

0 commentaires