03-10 07:32 阅读 145

译文----- JetpackCompose List列表(实验API)

前言

这部分内容在原文中, 是Sticky Header 和 Grids 两部分, 原文官方标注了 experimental(实验阶段), 这意味着这部分API随时会修改,甚至是删除, 所以慎用

Item animations

If you’ve used the RecyclerView widget, you’ll know that it animates item changes automatically. The Lazy layouts do not yet provide that functionality, which means that item changes cause an instant ‘snap’. You can follow this bug to track any changes for this feature.

如果你用过RecyclerView组件, 那么你肯定知道它能自动设置item改变的动画. 但是懒加载布局(基本上就是LazyColumn和LazyRow) 还没有提供相关函数, 这意味着item像是闪烁一样改变内容(此处翻译读着不顺), 你可以持续关注这个bug在将来的修复情况

Sticky headers(experimental)

Caution: Experimental APIs can change in the future or may be removed entirely.

此功能为实验性质, 在将来API可能会改变或者完全删除

The ‘sticky header’ pattern is helpful when displaying lists of grouped data. Below you can see an example of a ‘contacts list’, grouped by each contact’s initial:

‘粘性头部‘样式有助于实现分组列表数据的展示, 如下所示是‘联系人列表‘的示例, 按照联系人的首字母进行分组

To achieve a sticky header with LazyColumn, you can use the experimental stickyHeader() function, providing the header content

要使用LazyColumn实现一个粘性头，可以使用实验性的stickyHeader()函数，提供头内容

 1 @OptIn(ExperimentalFoundationApi::class)
 2 @Composable
 3 fun ListWithHeader(items: List) {
 4     LazyColumn {
 5         stickyHeader {
 6             Header()
 7         }
 8 
 9         items(items) { item ->
10             ItemRow(item)
11         }
12     }
13 }

To achieve a list with multiple headers, like the ‘contacts list’ example above, you could do:

要实现具有多个标题的列表，如上面的“联系人列表”示例，可以执行以下操作：

 1 // TODO: This ideally would be done in the ViewModel
 2 val grouped = contacts.groupBy { it.firstName[0] }
 3 
 4 @OptIn(ExperimentalFoundationApi::class)
 5 @Composable
 6 fun ContactsList(grouped: Map>) {
 7     LazyColumn {
 8         grouped.forEach { (initial, contactsForInitial) ->
 9             stickyHeader {
10                 CharacterHeader(initial)
11             }
12 
13             items(contactsForInitial) { contact ->
14                 ContactListItem(contact)
15             }
16         }
17     }
18 }

Grids(experimental)

Caution: Experimental APIs can change in the future or may be removed entirely.

此功能为实验性质, 在将来API可能会改变或者完全删除

The LazyVerticalGrid composable provides experimental support for displaying items in a grid.

目前LazyVerticalGrid这个还在实验性质的组件可以展示 "grid"样式的items

The cells parameter controls how cells are formed into columns. The following example displays items in a grid, using GridCells.Adaptive to set each column to be at least 128.dp wide:

cells参数控制每列样式. 下面的示例，使用网格GridCells.Adaptive将每列设置为最小宽度为128.dp

 1 @OptIn(ExperimentalFoundationApi::class)
 2 @Composable
 3 fun PhotoGrid(photos: List) {
 4     LazyVerticalGrid(
 5         cells = GridCells.Adaptive(minSize = 128.dp)
 6     ) {
 7         items(photos) { photo ->
 8             PhotoItem(photo)
 9         }
10     }
11 }

If you know the exact amount of columns to be used, you can instead provide an instance of GridCells.Fixed containing the number of required columns

如果您知道要使用的列的确切数量，则可以直接通过GridCells.Fixed设置列的数目

 1 // 原文没有 我加的
 2 
 3 @OptIn(ExperimentalFoundationApi::class)
 4 @Composable
 5 fun PhotoGrid(photos: List) {
 6     LazyVerticalGrid(
 7         cells = GridCells.Fixed(count = 3)
 8     ) {
 9         items(photos) { photo ->
10             
11         }
12     }
13 }

原文：https://www.cnblogs.com/sweep/p/14497625.html