kotlin Compose：基于measuredWidth在Layout中放置可测量对象

waxmsbnn 于 2022-11-16 发布在 Kotlin

关注(0)|答案(1)|浏览(130)

我试图实现一个 SegmentedControl 可组合函数，但是如果其中一个段需要更多的空间，则允许段具有不同的大小。到目前为止，我已经实现了基本的实现，其中所有段的宽度都是相等的：

但是，正如您所看到的， Foo 和 Bar 段可以轻松地占用较少的空间，以便为 Some very long string 腾出空间。
所以我的要求是：

当每个子项的所需宽度之和小于传入约束的宽度时，均匀分布子项
否则，收缩可以收缩的子项，直到所有子项都可见
如果不可能，请找到一个可以显示最大内容量的配置。

在尝试实现第一个要求时，我很快想起，使用默认的 Layout 组合是不可能的，因为每个布局通道只允许一个测量，这是有充分理由的。

Layout(
    content = {
        // Segments
    }
) { segmentsMeasurables, constraints ->
    var placeables = segmentsMeasurables.map {
        it.measure(constraints)
    }
    // In case every placeable has enough space in the layout,
    // we divide the space evenly between them
    if (placeables.sumOf { it.measuredWidth } <= constraints.maxWidth) {
        placeables = segmentsMeasurables.map { 
            it.measure( // <- NOT ALLOWED!
                Constraints.fixed(
                    width = constraints.maxWidth / state.segmentCount,
                    height = placeables[0].height
                )
            )
        }
    }

    layout(
        width = placeables.sumOf { it.width },
        height = placeables[0].height
    ) {
        var xOffset = 0
        placeables.forEachIndexed { index, placeable ->
            xOffset += placeables.getOrNull(index - 1)?.width ?: 0
            placeable.placeRelative(
                x = xOffset,
                y = 0
            )
        }
    }
}

中的每一个
我还研究了 SubcomposeLayout ，但它似乎没有做我需要的事情（我的用例不需要子组合）。
我可以想象一个笨拙的解决方案，其中我强制至少两个布局通道来收集孩子的大小，然后才执行布局逻辑，但它将是不稳定的，没有性能，并将产生一个框架与布局不良的孩子。
那怎么做才合适呢？我错过什么了吗？

kotlin

来源：https://stackoverflow.com/questions/74353005/compose-placement-of-measurables-in-layout-based-on-measuredwidth

1条答案

按热度按时间

hwamh0ep1#

你必须使用内在的度量

@Composable
fun Tiles(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(
        modifier = modifier,
        content = content,
    ) { measurables, constraints ->
        val widths = measurables.map { measurable -> measurable.maxIntrinsicWidth(constraints.maxHeight) }
        val totalWidth = widths.sum()
        val placeables: List<Placeable>
        if (totalWidth > constraints.maxWidth) {
            // do not fit, set all to same width
            val width = constraints.maxWidth / measurables.size
            val itemConstraints = constraints.copy(
                minWidth = width,
                maxWidth = width,
            )
            placeables = measurables.map { measurable -> measurable.measure(itemConstraints) }
        } else {
            // set each to its required width, and split the remainder evenly
            val remainder = (constraints.maxWidth - totalWidth) / measurables.size
            placeables = measurables.mapIndexed { index, measurable ->
                val width = widths[index] + remainder
                measurable.measure(
                    constraints = constraints.copy(
                        minWidth = width,
                        maxWidth = width,
                    )
                )
            }
        }
        layout(
            width = constraints.maxWidth,
            height = constraints.maxHeight,
        ) {
            var x = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(
                    x = x,
                    y = 0
                )
                x += placeable.width
            }
        }
    }
}

@Preview(widthDp = 360)
@Composable
fun PreviewTiles() {
    PlaygroundTheme {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(all = 16.dp),
            ) {
                Tiles(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                ) {
                    Text(
                        text = "Foo",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Red.copy(alpha = .3f))
                    )
                    Text(
                        text = "Bar",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
                    )
                }
                Tiles(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 16.dp)
                        .height(40.dp)
                ) {
                    Text(
                        text = "Foo",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Red.copy(alpha = .3f))
                    )
                    Text(
                        text = "Bar",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
                    )
                    Text(
                        text = "Some very long text",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Red.copy(alpha = .3f))
                    )
                }
                Tiles(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 16.dp)
                        .height(40.dp)
                ) {
                    Text(
                        text = "Foo",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Red.copy(alpha = .3f))
                    )
                    Text(
                        text = "Bar",
                        textAlign = TextAlign.Center,
                        modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
                    )
                    Text(
                        text = "Some even much longer text that doesn't fit",
                        textAlign = TextAlign.Center,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        modifier = Modifier.background(
                            Color.Red.copy(alpha = .3f)
                        )
                    )
                }
            }
        }
    }
}

赞(0）回复(0）举报 2022-11-16

我来回答

kotlin Compose：基于measuredWidth在Layout中放置可测量对象

1条答案

相关问题

热门标签

最新问答