Question

我在确定我的问题是缺少 Jetpack Compose 功能还是找不到它是如何完成的时遇到了一些麻烦。

假设我想制作这个页面

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

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

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

如何做到这一点？

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

Answer 2

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

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，并在检测到下限时，将该 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 3

如果您想在一组项目上设置背景，您可以只在该组项目上设置背景。

技巧是在你的其他修饰符之前设置背景，所以它在项目设置样式之前应用，如下所示：

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

撰写 LazyList 部分背景

3 个答案: