译文----- JetpackCompose List列表(上)

原文

Jetpack Compose Lists列表 原文链接

Jetpack Compose 目前官方文档关于lists列表效果 还没汉化, 学习时就记录了一下自己的翻译, 如果直译很多句子读起来比较别扭, 所以有不少意译的内容(若他人阅读, 仅可作参考)

Lists

Many apps need to display collections of items. This document explains how you can efficiently do this in Jetpack Compose.

大多数app需要展示 items集合, 这份文档讲解了怎样高效的通过Jetpack Compose来实现

If you know that your use case does not require any scrolling, you may wish to use a simple Column or Row (depending on the direction), and emit(发射,发出; 我意译成了"展现") each item’s content by iterating over a list like so:

如果你确信 你的应用场景不需要任何滑动, 你也许可以使用一个简单的 Column 或者 Row (取决于方向)组件, 并且像示例所示的那样, 通过迭代一个列表来展现出每一个item的内容

@Composable
fun MessageList(messages: List<Message>) {
    Column {
        messages.forEach { message ->
            MessageRow(message)
        }
    }
}

 

We can make the Column scrollable by using the verticalScroll() modifier. See the Gestures documentation for more information.

你能够通过使用 modifer 属性的verticalScroll() 来使Column 组件滑动. 阅读这份 Gestures(手势) 文档来获取更多的信息(使用方式)

Lazy Composables

If you need to display a large number of items (or a list of an unknown length), using a layout such as Column can cause performance issues, since all the items will be composed and laid out whether or not they are visible.

如果你需要展示大量的items(或者一个未知长度的list列表), 那么使用如Column这样的布局 (我觉得翻译为如上所示更好) 可能会造成性能问题, 因为无论是否可见, 所有的items都将会被加载出来(be composed and laid out 翻译为 被组合和布置, 但我读着不顺, 就意译成了 被加载出来)

Compose provides a set of components which only compose and lay out items which are visible in the component’s viewport. These components include LazyColumn and LazyRow.

Jetpack Compose提供了一系列组件, 能够只加载和布局可见的items. 这些组件包括LazyColumn 和 LazyRow

Note: If you've used the RecyclerView widget, these components follow the same set of principles.

如果你使用过RecyclerView组件, 这些组件遵循同样 ( 和RecyclerView 一样) 的规则.

(个人注释: 其实就是懒加载机制, 内部实现方式和android原生views组件的区别没研究, 但是表现其是一样的, 都是只加载可见区域内容, 不可见就不加载, 至于是否会回收, 也没看源码, 原文也没详细提到, 只提到了和RecyclerView一样的规则, 如果完全一样, 那么也应该会回收)

As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list.

顾名思义，LazyColumn和LazyRow的区别在于它们排列项目和滚动的方向. LazyColumn生成垂直滚动列表，LazyRow生成水平滚动列表。(来自百度翻译, 觉得翻译的比较贴切, 就全文复制了)

Key Term: DSL stands for domain-specific language. See the Kotlin for Compose documentation for more information on how Compose defines DSLs for some APIs.

关键术语：DSL代表领域特定语言。有关Compose如何为某些api定义dsl的更多信息，请参阅Kotlin for Compose文档。

LazyListScope DSL

The DSL of LazyListScope provides a number of functions for describing items in the layout. At the most basic, item() adds a single item, and items(Int) adds multiple items:

LazyListScope的DSL, 提供了一些函数 用来在布局中描述items. 最基本的, item()(注意这个是item, 没s) 添加单个item, items(Int)(注意这个是items, 有s) 用来添加多个item

(这种应用最多的场景, 就是 listview或recyclerview那种 header 和 footer 了)

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")
    }
}

 

There are also a number of extension functions which allow you to add collections of items, such as a List. These extensions allow us to easily migrate our Column example from above:

这些扩展函数也能添加像list列表一样的items 集合. 这些扩展函数能够让你更方便的将代码从 Column组件迁移迁移到LazyColumn上来 (原文没提LazyColumn, 但我觉得这样翻译更容易理解)

// 注意这里导包
import androidx.compose.foundation.lazy.items

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageRow(message)
        }
    }
}

 

There is also a variant of the items() extension function called itemsIndexed(), which provides the index. Please see the LazyListScope reference for more details.

items() 还有一个能够提供索引的形式 itemsIndexed() (variant:变体, 加上感觉读着不顺,遂删), 详情请阅读LazyListScope的相关资料文档

Content Padding

Sometimes you'll need to add padding around the edges of the content. The lazy components allow you to pass some PaddingValues to the contentPadding parameter to support this

有时候你需要在内容的四周(edges: 边缘, 我意译为四周)添加一些padding. 这些懒加载的组件允许你 通过给contentPadding参数设置PaddingValues来实现该功能

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

 

In this example, we add 16.dp of padding to the horizontal edges (left and right), and then 8.dp to the top and bottom of the content.

在上面那个示例中, 内容的横向(horizontal)和纵向(vertical) 分别添加了大小为 16dp 和 8dp 的 padding值

Content spacing

To add spacing in-between items, you can use Arrangement.spacedBy(). The example below adds 4.dp of space in-between each item

如果要在item和item之间添加间距, 你可以使用Arrangement.spaceBy(). 如下例子所示,在每个item之间添加了4dp的间距

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}

 

同理, LazyRow也是如此

LazyRow(
    // 注意这里, Column使用的是vertical, 这里是horizontal
    horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
    // ...
}