如何在 Android Compose 中应用缩放修改器后删除剩余的 space

Question

在此应用中，我打算放置一个可滚动的可组合列表，每个列表的大小都相对于设备屏幕，但随后会缩小到几个像素。而且我发现保持布局不变并与全屏时一致的最佳方法是使可组合项的大小与设备屏幕完全相同，然后使用 scale 修饰符

调整其大小

        Row(
            modifier = Modifier.horizontalScroll(rememberScrollState())
        ) {
            Surface(
                shape = RoundedCornerShape(8.dp),
                color = MaterialTheme.colors.primary.copy(alpha = .2f),
            ) {
                ScreenVisual(
                    modifier = Modifier
                        .size(screenWidth, screenHeight)
                        .scale(.7F)
                )
            }
            Surface(
                shape = RoundedCornerShape(8.dp),
                color = MaterialTheme.colors.primary.copy(alpha = .2f),
            ) {
                OtherScreenVisual(
                    modifier = Modifier
                        .size(screenWidth, screenHeight)
                        .scale(.7F)
                )
            }
        }

但是如上图所示，在缩放修改器之后可组合项中有剩余空间，问题是如何移除这些空间并强制每个表面相互粘连

Answer 1

您可以通过组合 size、requiredSize 和 scale 修饰符来实现它。

Content(
    modifier = Modifier
        .size(width = screenWidth * scale, height = screenHeight * scale)
        .requiredSize(width = screenWidth, height = screenHeight)
        .scale(scale)
)

size(screenWidth * scale, screenHeight * scale) 意味着您将只保留等于缩放屏幕尺寸的 space 数量。
requiredSize(screenWidth, screenHeight) 强制使用真实屏幕尺寸测量和布局内容，因此它将以正常比例呈现并在先前定义的框架内居中。当然在那个阶段渲染的内容对于那个帧来说太大了。
scale(scale) 将缩放内部内容以适应用 .size

您可以看到整个内容已正确缩放。在这种情况下，Texts 和 30.sp 与顶部的 Text 相比缩小了（没有以任何方式缩放）。

整个示例如下所示：

Column {
    Text("Text 30sp (for comparison)", fontSize = 30.sp, modifier = Modifier.weight(1f))

    Row(Modifier.horizontalScroll(state = rememberScrollState())) {

        Content1(
            modifier = Modifier
                .size(width = screenWidth * scale, height = screenHeight * scale)
                .requiredSize(width = screenWidth, height = screenHeight)
                .scale(scale)
        )

        Content2(
            modifier = Modifier
                .size(width = screenWidth * scale, height = screenHeight * scale)
                .requiredSize(width = screenWidth, height = screenHeight)
                .scale(scale)
        )
    }
}

以及示例 Content1 的示例：

@Composable
private fun Content1(modifier: Modifier = Modifier) {
    Text(
        "Text 30sp",
        fontSize = 30.sp,
        modifier = modifier
            .fillMaxSize()
            .background(Color.Blue)
    )
}

...

如何在 Android Compose 中应用缩放修改器后删除剩余的 space

How to remove leftover space after applying scale modifier in Android Compose

android

android-jetpack

android-jetpack-compose