是否可以“缩放”jetpack compose 中任何小部件的宽度和高度？

Question

我有一个 Stack 小部件，其中托管一个 Box 和一个图像。随着状态的变化，我想按状态的任何值来缩放 Box 小部件，例如 2 倍。

我找不到任何有关缩放 Modifier 或 Box 属性上的小部件的信息，因此我决定通过使用“Modifier.size”操纵大小来对状态变化做出反应，这对我来说并不理想。

那么是否支持缩放小部件，或者我应该手动使用大小属性？

-谢谢

@Composable
fun Pointer(modifier: Modifier = Modifier, state: TransitionState, onClick: () -> Unit) {
    Stack(modifier) {
        Box(
            shape = CircleShape, backgroundColor = Color.Gray.copy(alpha = .3f),
            modifier = Modifier.size(state[width])
        )
        Image(
            asset = imageResource(id = R.drawable.ic_pointer),
            modifier = Modifier
                .clickable(onClick = onClick)
        )
    }
}

Answer 1

撰写 1.0.0-alpha08

随着时间的推移，出现了一个新的 compose 版本，它将“drawLayer”重命名为“graphicsLayer”，并添加了新的比例修改器（在下面使用“graphicsLayer”）。

因此可组合项将如下所示：

@Composable
fun Pointer(scale: Float, modifier: Modifier = Modifier) {
    Box(modifier) {
        Box(
            modifier = Modifier
                .matchParentSize()
                .scale(scale)
                .background(Color.Cyan, CircleShape)
        )
        Image(
            imageVector = Icons.Filled.Done,
            modifier = Modifier
                .align(Alignment.Center)
        )
    }
}

Compose 1.0.0-alpha07（原始答案）

我相信您可以使用drawLayer修饰符实现所需的行为。例如，一个简单的可组合项，它在其顶部显示一个可缩放的圆圈和一个不可缩放的图标：

@Composable
fun Pointer(scale: Float, modifier: Modifier = Modifier) {
    Box(modifier) {
        Box(
            modifier = Modifier
                .matchParentSize()
                .drawLayer(scaleX = scale, scaleY = scale)
                .background(Color.Cyan, CircleShape)
        )
        Image(
            asset = Icons.Filled.Done,
            modifier = Modifier
                .align(Alignment.Center)
        )
    }
}

及用法：

Pointer(
    scale = 1f,
    modifier = Modifier
        .background(Color.Magenta)
        .padding(25.dp)
        .preferredSize(50.dp)
        .align(Alignment.CenterHorizontally)
)

当比例 = 1f 时

当比例 = 2f 时

Answer 2

\n

我不想关心盒子的大小或明确保留对它的引用

\n

\n

这将是一个问题。在 Compose 中，诸如此类的小部件Box()都是无状态函数。您不能询问Box()它有多大 \xe2\x80\x94 相反，您需要使用合适Box()的Modifier.

\n

通常，“它有多大”是在代码中设置的固定值或规则（例如，Modifier.size(200.dp)）。您应该能够让大小取决于您自己跟踪的某个状态，只要该状态是 a State，这样 Compose 就知道在状态发生变化时进行重组（再次调用您的函数）State。如果您走这条路，那么缩放就是检查当前State值、应用缩放因子并将结果用于新State值。

\n