自定义布局 Android Compose 可测量宽度

Question

我正在尝试在 Android 中实现自定义“行”布局，如​​下所示：

@Composable
fun CustomLayout(modifier: Modifier, content: @Composable () -> Unit){
    Layout(
        modifier = modifier,
        content = content,
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
          measurable.measure(constraints)
        }
        var xPos = 0

        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(x = xPos, y = 0)
                xPos += placeable.width
            }
        }
    }

}

以下是此可组合项的预览：

@Preview(name = "Preview")
@Composable
fun customLayoutPreview() {
    CustomLayout(Modifier.size(1080.dp,100.dp)){
        Box(
            Modifier
                .size(32.dp, 64.dp)
                .background(Color.Red)) {

        }
        Box(
            Modifier
                .size(100.dp, 64.dp)
                .background(Color.Green)) {

        }
        Box(
            Modifier
                .size(32.dp, 64.dp)
                .background(Color.Yellow)) {

        }
    }
}

这里的问题是，每个measurable(Box) 在测量后获得父级宽度，因此为 1080dp，而不是传递给框的所需宽度，这导致第一个子级占据所有空间。

请参阅： 预览

理论上的预期值：(Box 32dp)(Box 100dp)(Box 32dp)

我在这里缺少什么？

我尝试了文档，但我无法理解实现类似普通 android Custom 之类的方法，ViewGroup.onMeasure例如 : view.measure(MeasureSpec.makeMeasureSpec(wantedSize, AT_MOST or EXACT))，wantedSize可以从 LayoutParams 或策略中获取WRAP_CONTENT。

环境：Android Studio 北极狐。撰写：1.0.0。科特林：1.5.10。AGP 和 Gradle：7.0.0。

Answer 1

您必须复制约束并将 min 更改为 0。如下更改：

@Composable
fun CustomLayout(modifier: Modifier, content: @Composable () -> Unit) {
    Layout(
        modifier = modifier,
        content = content,
    ) { measurables, constraints ->
        // MAKE A COPY WITH 0 FOR MIN
        val looseConstraints = constraints.copy(
            minWidth = 0,
            minHeight = 0
        )
        val placeables = measurables.map { measurable ->
            measurable.measure(looseConstraints)
        }
        var xPos = 0

        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEach { placeable ->
                placeable.placeRelative(x = xPos, y = 0)
                xPos += placeable.width
            }
        }
    }
}