Jetpack Compose - 使 LazyRow 中的第一个元素与屏幕中心对齐

Question

我想获得看起来像这样的lazyrow：

| -aaa-b | bb-cccc | -dd ... ... | w-- x - x --- |

| ------- |是元素大小的一个屏幕宽度

各不相同，但它们之间的间距固定。 我以为我可以在lazyrow中添加一些开始内容填充，以便将“ AAA”组合对齐到屏幕中心，但我不知道其宽度。

如果您认为目前尚不清楚我要问什么，请发表评论。

更新

添加了一个GIF，以更好地理解

Answer 1

您可以使用boxwithConstraints获取屏幕宽度。然后，您可以使用布局将项目正确定位在列表中。

@Composable
fun BigCarousel() {
    val items = (0..10).map { "Item $it" }
    BoxWithConstraints {
        LazyRow {
            itemsIndexed(items) { index, item ->
                Layout(
                    content = {
                        // Here's the content of each list item.
                        Box(
                            Modifier
                                .size(200.dp)
                                .padding(8.dp)
                                .background(Color.Gray)
                        ) {
                            Text(text = item, Modifier.align(Alignment.Center))
                        }
                    },
                    measurePolicy = { measurables, constraints ->
                        // I'm assuming you'll declaring just one root 
                        // composable in the content function above
                        // so it's measuring just the Box
                        val placeable = measurables.first().measure(constraints)
                        // maxWidth is from the BoxWithConstraints
                        val maxWidthInPx = maxWidth.roundToPx()
                        // Box width
                        val itemWidth = placeable.width
                        // Calculating the space for the first and last item
                        val startSpace =
                            if (index == 0) (maxWidthInPx - itemWidth) / 2 else 0
                        val endSpace =
                            if (index == items.lastIndex) (maxWidthInPx - itemWidth) / 2 else 0
                        // The width of the box + extra space
                        val width = startSpace + placeable.width + endSpace
                        layout(width, placeable.height) {
                            // Placing the Box in the right X position
                            val x = if (index == 0) startSpace else 0
                            placeable.place(x, 0)
                        }
                    }
                )
            }
        }
    }
}

这是结果：

Answer 2

计算运行时间的设备宽度，然后除以2或您想要的任何比率。

检查此链接的运行时间宽度计算： https://stackoverflow.com/a/11755265/7248394

开始。

Lazycolumn（
contentpadding = paddingvalues（start =（device_width/2）.dp）
）

这将在所有设备中保持不变。