可组合的剪辑文本

Question

我正在尝试在 Jetpack Compose 中复制 Eclipse Google Home Screensaver。
但是，我完全不知道如何实现示例中所见的剪辑效果。

目前我尝试使用 Row 和一些加权的 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？
是否可以在 Row 上不硬编码大小的情况下执行此操作？

Answer 1

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

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