Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LazyVerticalGridに学ぶ
非スクローラブルなグリッドの作り方

aosa4054
November 17, 2021

 LazyVerticalGridに学ぶ
非スクローラブルなグリッドの作り方

aosa4054

November 17, 2021
Tweet

More Decks by aosa4054

Other Decks in Programming

Transcript

  1. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /

    nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
  2. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /

    nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ౉͞ΕͨΞΠςϜͷαΠζͱΧϥϜ਺͔Β 
 ߦ਺Λܭࢉ͢Δ
  3. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /

    nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ಺෦ͰLazyColumnΛ͍࣋ͬͯΔ 
 ʹ εΫϩʔϧͰ͖Δਖ਼ମ
  4. LazyVerticalGridͷ಺෦ॲཧ val rows = (scope.totalSize + nColumns - 1) /

    nColumns LazyColumn( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } } ҰߦҰߦΛRowʹͯ͠itemsͰ 
 ͦΕΛॎʹੵΜͰߦ͘ॲཧ
  5. LazyVerticalGridΛࢀߟʹͨ͠ඇεΫϩʔϧ൛ val rows = (items.size + columns - 1) /

    columns Column( /* modifier΍paddingͳͲ֎෦͔Β౉͖ͯͨ͠΋ͷΛόέπϦϨʔ */ ) { for (rowIndex in 0..rows) { Row { for (columnIndex in 0 until nColumns) { /* ֤ΞΠςϜͷComposableΛݺͼग़͠ */ } } } }
  6. αϯϓϧ࣮૷ LazyColumn { item { NonScrollableGrid( column = 3, items

    = myItems ) { /* ֤ΞΠςϜͷComposable */ } } }
  7. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items

    = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } }
  8. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items

    = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } 0…1000😇
  9. ໰୊఺ LazyColumn { item { NonScrollableGrid( column = 3, items

    = (0..1000).toList() ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } } item͕composableؔ਺ 
 ݺͼग़͠ͷ୯Ґ
  10. fun <T> LazyListScope.gridItems( columns: Int, items: List<T>, gridItem: @Composable (T)

    -> Unit ) { val rows = (items.size + columns - 1) / columns items(rows) { rowIndex -> Row { for (columnIndex in 0 until nColumns) { val itemIndex = rowIndex * columns + columnIndex if (itemIndex < items.size) { Box( modifier = Modifier.weight(1f, fill = true), propagateMinConstraints = true ) { gridItem.invoke(items[itemIndex]) } } else { Spacer(Modifier.weight(1f, fill = true)) } } } } }
  11. ໰୊఺ LazyColumn { gridItems( column = 3, items = (0..1000).toList()

    ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } }
  12. ໰୊఺ LazyColumn { gridItems( column = 3, items = (0..1000).toList()

    ) { /* ֤ΞΠςϜͷComposable */ Log.d(“@@@”, “$it”) } } 0…24