Compose 列表

Changing Lin

关注

发布于: 1 小时前

1.延迟可组合项

Column 布局：系统会对所有列表项进行组合和布局，无论它们是否可见
LazyColumn 和 LazyRow：只会对在组件视口中可见的列表项进行组合和布局（延迟组件）
延迟组件不是接受 @Composable 内容块参数，而是提供了一个 LazyListScope.() 块。此 LazyListScope 块提供一个 DSL，允许应用描述列表项内容。

2.LazyListScope DSL

DSL 的全称是“domain-specific language”，即领域专用语言

LazyListScope 的 DSL 提供了多种函数来描述布局中的列表项。最基本的函数包括，item() 用于添加单个列表项，items(Int) 用于添加多个列表项：

LazyColumn {    // Add a single item    item {        Text(text = "First item")    }
    // Add 5 items    items(5) { index ->        Text(text = "Item: $index")    }
    // Add another single item    item {        Text(text = "Last item")    }}

复制代码

3.内容内边距

有时，您需要围绕内容边缘添加内边距。借助延迟组件，您可以将一些 PaddingValues 传递给 contentPadding 参数以支持此功能：

LazyColumn(    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),) {    // ...}

复制代码

请注意，此内边距会应用于内容，而不是 LazyColumn 本身。

4.内容间距

如需在列表项之间添加间距，可以使用 Arrangement.spacedBy()。

5.项动画

延迟布局尚未提供该功能

6.粘性标题（实验性）

“粘性标题”模式在显示分组数据列表时非常有用

如需使用 LazyColumn 实现粘性标题，可以使用实验性 stickyHeader() 函数

@OptIn(ExperimentalFoundationApi::class)@Composablefun ListWithHeader(items: List<Item>) {    LazyColumn {        stickyHeader {            Header()        }
        items(items) { item ->            ItemRow(item)        }    }}

复制代码

7.网格（实验性）

LazyVerticalGrid 可组合项为在网格中显示内容提供实验性支持。

@OptIn(ExperimentalFoundationApi::class)@Composablefun PhotoGrid(photos: List<Photo>) {    LazyVerticalGrid(        cells = GridCells.Adaptive(minSize = 128.dp)    ) {        items(photos) { photo ->            PhotoItem(photo)        }    }}

复制代码

如果您知道要使用的确切列数，则可以改为提供包含所需列数的 GridCells.Fixed 实例。

8.响应滚动位置

9.控制滚动位置

LazyListState 通过以下函数支持此操作：scrollToItem() 函数，用于“立即”捕捉滚动位置；animateScrollToItem() 使用动画进行滚动（也称为平滑滚动）：两者都是挂起函数，这意味着我们需要在协程中调用这些函数。

10.大型数据集（分页）

Paging 3.0 及更高版本通过 androidx.paging:paging-compose 库提供 Compose 支持。

11.项键

为避免出现此情况，您可以为每个列表项提供一个稳定的唯一键，为 key 参数提供一个块。提供稳定的键可使项状态在发生数据集更改后保持一致：

@Composablefun MessageList(messages: List<Message>) {    LazyColumn {        items(            items = messages,            key = { message ->                // Return a stable + unique key for the item                message.id            }        ) { message ->            MessageRow(message)        }    }}

复制代码

发布于: 1 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/fb632c08d1c97b2320507a457】。文章转载请联系作者。

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的，就是调整好自己的精神状态，以最佳的面貌去面对那些未曾经历过得事情，对生活充满热情和希望。

发布

暂无评论

创作场景

Compose 列表

1.延迟可组合项

2.LazyListScope DSL

3.内容内边距

4.内容间距

5.项动画

6.粘性标题（实验性）

7.网格（实验性）

8.响应滚动位置

9.控制滚动位置

10.大型数据集（分页）

11.项键

Changing Lin

评论