android - 撰写 LazyList 部分背景

Question

我很难确定我的问题是 Jetpack Compose 缺少功能还是我找不到它是如何完成的。

假设我想做这个页面

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

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

问题是您不能在垂直可滚动布局中使用 LazyColumn，所以我想我只需将整个页面设置为 LazyColumn。现在还有另一个问题，我希望用户列表周围有一个带有背景颜色和圆形边框的框，如图所示，但是您不能在 LazyListScope.items() 周围放置一个框，并且如果您将列表加载为像 item { UserList() } 这样的单个可组合然后它只是使它成为一个列，失去了惰性部分。

如何做到这一点？

Answer 1

这假设您知道要装在盒子中的特定项目的索引。

val list = ... //Contains all the items
val lowerBound = ... // Start of User List
val upperBound = ...//"
LazyColumn{
    list.forEachIndexed{index, item ->
          if(lowerBound == index){
              item{
                Text(Modifier.clip(RoundedCornerShape(topStartPercent = 50, topEndPercent = 50)) //User
.background (color)
)
              }
else if(upperBound == index){
Text(Modifier.clip(RoundedCornerShape(bottomStartPercent = 50, bottomEndPercent = 50)) //User
.background (color)
}
else if(lowerBound < index < upperBound){
Text(Modifier.background(color)
else{
//Regular List Items
}
          }
    }
}

这只是一种解决方法。这将给出确切的效果，但不是真正的盒子。

一个更清洁的解决方案是实际构建一个自定义 Composable，并在检测到 lowerBound 后，将该 Composable 作为一个整体添加，因为虽然您不能在盒子内使用项目，但反之亦然。

就是这样：-

val list = ... //Contains all the items
val lowerBound = ... // Start of User List
val upperBound = ...//"
LazyColumn{
var x = 0
while(x++ != list.size()){
   if(index == lowerBound){
       item{
         UserList(list.subList(lowerBound, upperBound))
       }
   }
   else if(lowerBound < index < upperBound){
   continue
   }
   else{
     item{
        User()
     }
    }
}
}

@Composable
fun UserList(list){
  LazyColumn{
    //Display List
  }
}

这使列保持惰性。无性能影响

Answer 2

如果要在一组项目上设置背景，则可以仅在该组的项目上设置背景。

诀窍是在其他修饰符之前设置背景，因此在设置样式之前应用它，如下所示：

ListItem(modifier = Modifier
    .background(GrayBackground)
    .padding(horizontal = 20.dp)
)

Answer 3

如果我正确理解了问题，您需要做的是分别定义您在 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
    }
}