android - Jetpack compose 中的任何小部件是否可以 "Scale"宽度和高度？

Question

我有一个 Stack 小部件，它承载一个 Box 和一个 Image。
随着状态的变化，我想通过状态具有的任何值来缩放 Box 小部件，例如 2 倍。
我找不到任何关于在 Modifier 或 Box 属性上缩放小部件的信息，所以我决定通过使用“Modifier.size”来操纵大小来对状态变化使用react，这对我来说并不理想。
那么是否支持缩放小部件或者我应该手动使用 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
随着时间的流逝，有一个新的撰写版本renames 'drawLayer' 到 'graphicsLayer' 并添加一个新的 scale修饰符(在下面使用“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)
        )
    }
}

撰写 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)
)

When scale = 1f
When scale = 2f