android-jetpack-compose - 剪辑文本可组合

Question

我正在尝试在 Jetpack Compose 中复制 Eclipse Google Home 屏幕保护程序。
但是，我完全不知道如何实现示例中的剪辑效果。

目前我尝试使用 aRow和一些加权Text组合。

@Composable
fun Eclipse() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(IntrinsicSize.Min)
            .background(Color.Black)
    ) {
        EclipseIntTile(0, modifier = Modifier.weight(1F))
        EclipseIntTile(4, modifier = Modifier.weight(1F))
        EclipseIntTile(5, modifier = Modifier.weight(1F))
        EclipseIntTile(2, modifier = Modifier.weight(1F))
    }
}
@Composable
fun EclipseIntTile(i: Int, modifier: Modifier = Modifier) {
    Text("$i", modifier = modifier, style = TextStyle(fontSize = 140.sp, color = Color.White))
}

产生以下

如何配置以Row停止包装Text's？
是否可以在不硬编码大小的情况下做到这一点Row？

Answer 1

一个不错的解决方案是使用 aBoxWithConstraints暴露一个size值。现在，您可以将您的代码片段放在此 Box 中，然后使用 size 值设置Texts 的宽度，将空间平均分配给子项。然后，您也可以使用相同的size值来设置字体大小。现在您看到这并不是真正的硬编码，因为尺寸会根据不同的屏幕尺寸进行调整。因此，这可能是一种解决方法。

在不同的版本上，您可以使用Layout可组合的，它公开constraints. 布局是构建像这样的自定义小部件的官方 Compose 方式，所以......祝你好运