Jetpack Compose LazyRow - 如何使第一个和最后一个项目不可滚动，但只有中间部分？

Question

我需要在 LazyRow 中显示数字列表（我选择了lazyrow，因为可能有 200 个数字）。第一个数字和最后一个数字应始终在左侧和右侧可见。其余数字需要能够水平滚动。 我怎样才能实现这个目标？

参见附图：黑色边框粘性/固定，灰色边框可滚动。

我尝试将 LazyRow 放入 Row 中，但除非我预定义 LazyRow 的项目宽度（我不知道，因为数字是动态的，可能是 5 位或更多），否则它不起作用。

我也尝试过使用 StickyHeader，但它不允许我在左侧和右侧都使用它，特别是如果第一个和最后一个之间只有 1 或 2 个数字。

Answer 1

在 Row 中使用 LazyRow 是一个很好的方法，唯一缺少的是 LazyRow 上的

weight

修饰符。

该修改器根据给定的权重在其兄弟姐妹之间分配空间。所有不有weight修饰符的兄弟姐妹都会占用所需的空间。如果只有 LazyRow 有权重修饰符，则意味着首先测量周围 Row 的其他元素，然后 LazyRow 将占用所有“剩余”空间。这样第一个和最后一个元素将始终留有足够的空间，以便可以显示它们。 你可以使用这样的东西：

Row {
    val first = list.firstOrNull() ?: return@Row
    MyItem(first)

    val middleList = list.subList(1, list.lastIndex)
    if (middleList.isNotEmpty())
        LazyRow(
            modifier = Modifier.weight(1f),
        ) {
            items(middleList) { MyItem(it) }
        }

    val last = list.subList(1, list.size).lastOrNull() ?: return@Row
    MyItem(last)
}

list

是要显示的项目列表，

MyItem

是用于显示此类项目的可组合项。