Android Jetpack Compose 在 LazyRow 中定位子項

Question

我有一系列項目，我想在 Track 中顯示為項目列表。 唯一的問題是，一開始，項目必須從軌道中間開始排列。 之后，項目可以正常滾動。

例如在開始時：
MyTrack : [----blankSpace 50%------[動態項目1[[動態項目2][動態項目3]--]

當所有項目都可見時滾動后，例如： MyTrack[[item1][item2][item3][item4][item5]]

此行必須是可滾動的，並且每個項目都可以具有不同的寬度。

這是軌道上的項目：

    data class MyItem(val widthFactor: Long, val color: Color)

問：有嗎。 一種給出 LazyRow 中項目起始位置的方法？ 或者我應該在 Jetpack Compose 中使用更好的布局嗎？ 像 LazyRow() 這樣的布局將不起作用，因為沒有辦法告訴從它的中間開始排列項目。

我可以在其中使用 Canvas 和 drawRect 之類的項目，但隨后我需要實現 LazyRow 中的滑動和滾動功能。

提前致謝。

Answer 1

您可以將間隔項目與.fillParentMaxWidth一起使用，該項目可用於 LazyList 項目：

LazyRow(
    modifier = Modifier.fillMaxWidth(),
) {
    item { 
        Spacer(modifier = Modifier.fillParentMaxWidth(0.5f))
    }
    // Your other items
}

這比提供的其他兩個解決方案要好 - Configuration.screenWidthDp僅在您的 LazyRow 填充整個屏幕寬度時才可用，但情況並非總是如此， BoxWithConstraints增加了此處不需要的復雜性。

Answer 2

使用它來獲取屏幕寬度

val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp

來源- https://stackoverflow.com/a/68919901/9636037

代碼

@Composable
fun ScrollableRowWithSpace() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp

    val list = Array(10) {
        "Item ${it + 1}"
    }

    LazyRow(
        modifier = Modifier
            .background(LightGray)
            .fillMaxWidth(),
    ) {
        item {
            Spacer(modifier = Modifier
                .background(White)
                .width(screenWidth / 2))
        }
        items(list) {
            Text(
                text = it,
                modifier = Modifier
                    .padding(16.dp)
                    .background(White),
            )
        }
    }
}

Answer 3

我會推薦以下解決方案，您可以在任何地方使用它並獲得一半的寬度。

data class MyItem(val widthFactor: Long, val color: Color)

@Composable
fun LazyRowWithPadding() {

    val myItemList = mutableListOf(
        MyItem(12345, Color.Blue),
        MyItem(12345, Color.Cyan),
        MyItem(12345, Color.Green),
        MyItem(12345, Color.Gray),
        MyItem(12345, Color.Magenta),
    )

    BoxWithConstraints(Modifier.fillMaxSize()) {
        LazyRow(
            modifier = Modifier.fillMaxWidth(),
            contentPadding = PaddingValues(start = maxWidth / 2)
        ) {
            items(myItemList) {
                Box(
                    Modifier
                        .padding(end = 8.dp)
                        .background(it.color)
                        .padding(24.dp)) {
                    Text(text = it.widthFactor.toString())
                }
            }
        }
    }
}

Example