Compose LazyList 部分背景

Question

我无法确定我的问题是否是 Jetpack Compose 缺少功能，或者我是否无法找到它是如何完成的。

\n

假设我想制作此页面

\n

\n

它需要可滚动，因为内容很长。

\n

我还想使用惰性列来加载图像中显示的用户列表。

\n

问题是你不能在垂直可滚动布局中使用 LazyColumn，所以我想我只需将整个页面设置为 LazyColumn。\n现在还有另一个问题，我希望用户列表周围有一个框如图所示的背景颜色和圆形边框，但是您不能在 LazyListScope.items() 周围放置一个框，如果您将列表加载为单个可组合项（如 item { UserList()\xc2\xa0} ），那么它只会使它是一列，失去了懒惰的部分。

\n

一个人会怎样做呢？

\n

Answer 1

如果我正确理解了这个问题，那么您需要做的是单独定义您在 LazyColumn 中表示的“项目”的布局。举例来说，您的列表中有一些讲座要展示。定义它的方法是：

LazyColumn(
   //modifiers etc
) {
    items(
        items = **lectures** -> your list of items,
        itemContent = {
            **LectureListItem**(it) -> your specified layout
        }
    )
}

在下面创建具有LectureListItem您想要的布局的可组合项（无论它是框、列、行以及其中的所有内容）。例子：

@Composable
fun LectureListItem(
    lecture: Lecture
) {
    Box(
        modifier = Modifier
            .padding(8.dp)
            .background(//exampleColor)
    ) {
        //Other elements of your layout
    }
}