技術標籤：Jetpack-ComposeJetpackComposeLazyVerticalVerticalGrid

Jetpack Compose - LazyVerticalGrid

• • 0、介紹
  • 1、屬性一覽
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

可以實現網格列表佈局。（注意此API暫時還不穩定，有可能更改！）

在alpha 10的版本中，官方提供了該API，目前基於alpha 11版本進行演示。

1、屬性一覽

【目前基於alpha 11版本】請看該函式：

@Composable fun LazyVerticalGrid(
    cells: GridCells, 
    modifier: Modifier = Modifier, 
    state: LazyListState = rememberLazyListState(), 
    contentPadding: PaddingValues = PaddingValues(0.dp), 
    content: LazyGridScope.() -> Unit
): Unit
 

屬性引數含義：

2、使用示例

因為該API還處於試驗模式，所以注意註解：@ExperimentalFoundationApi，程式碼如下：

@ExperimentalFoundationApi
@Composable
fun LazyVerticalGridDemo() {
    val listData = (0..4).toList()

    LazyVerticalGrid(
        cells = GridCells.Fixed(2)
    ) {
        items(listData) {

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(24.dp)
                    .background(
                        color = when {
                            it % 2 == 0 -> {
                                myBlue
                            }
                            else -> {
                                myRed
                            }
                        }
                    ),
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    text = "列表項：$it"
                )
            }
        }
    }
}
 

預覽效果如下所示

3、版本更新

• 暫無

4、未解決問題

暫無，目前該API還處於試驗模式，暫時不做過多研究，後期需要了解功能如下：

• 將某一item項填充滿整個寬度，而不進行均分處理
• 類似原來RecyclerView中的ItemDecoration相關處理