Android 可组合的 fillMaxSize 和旋转不起作用

修改器.旋转是

@Stable
fun Modifier.rotate(degrees: Float) =
    if (degrees != 0f) graphicsLayer(rotationZ = degrees) else this

修改器.graphicsLayer{}不会更改可组合对象的尺寸和物理位置，也不会触发重新组合，这对于设置动画或更改视觉表示非常有用.

你们也可以在我的问题here中看到，即使我改变了比例和绿色矩形的位置，在父对象中的位置也并没有改变.

• 使内容绘制到绘制层的[Modifier.Element].这个

但是，修改器之后的任何修改器.graphicsLayer基于新的比例、平移或旋转apply.最容易看到的是在graphicsLayer之前和之后绘制边框.

Column(modifier = Modifier.fillMaxSize()) {
    val context = LocalContext.current
    Row(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .size(100.dp, 200.dp)
                .border(2.dp, Color.Red)
                .zIndex(1f)
                .clickable {
                    Toast
                        .makeText(context, "Before Layer", Toast.LENGTH_SHORT)
                        .show()
                }
                .graphicsLayer {
                    translationX = 300f
                    rotationZ = 90f
                }
                .border(2.dp, Color.Green)
                .clickable {
                    Toast
                        .makeText(context, "After Layer", Toast.LENGTH_SHORT)
                        .show()
                }
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.Yellow)
        )
    }
}

若你们勾选这个例子，你们会看到，即使我们旋转了黄色背景框左侧的可组合性，也并没有改变，因为我们并没有改变左侧可组合性的实际形式.

@Composable
private fun MyComposable() {
    Column(modifier = Modifier.fillMaxSize()) {

        Spacer(modifier = Modifier.height(300.dp))


            Column(modifier = Modifier.fillMaxSize()) {

                var angle by remember { mutableStateOf(0f) }

                LaunchedEffect(key1 = Unit) {
                    delay(2000)
                    angle = 90f
                }


                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f)
                        .background(Color.Red)
                        .rotate(angle),
                    contentAlignment = Alignment.Center
                ) {
                    Text("1", fontSize = 100.sp)
                }

                Spacer(modifier =Modifier.height(8.dp))

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .weight(1f)
                        .background(Color.Blue)
                        .rotate(angle),
                    contentAlignment = Alignment.Center
                ) {
                    Text("2", fontSize = 100.sp)
                }
            }
        }
}

增加垫片，使箱子的宽度和高度不均匀，以供演示.

正如我在示例中所发布的，gif旋转顺序决定了我们旋转的内容.

修饰符=修饰符

这设置了大小，它从不旋转父对象，而是旋转内容或子对象，因为我们在旋转之前设置了大小和背景.若子对象的宽度不大于父对象的高度，则该答案有效.

如果子对象具有修饰符.当我们旋转时，fillSize()或子对象的宽度大于父对象的高度，如下图所示.所以我们需要在旋转后将其zoom 回父对象，因为我们没有更改父对象的维度.

@Composable
private fun MyComposable2() {
    var angle by remember { mutableStateOf(0f) }

    LaunchedEffect(key1 = Unit) {
        delay(2000)
        angle = 90f
    }

    

    Column(modifier = Modifier.fillMaxSize()) {

        Spacer(modifier = Modifier.height(100.dp))

        BoxWithConstraints(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        ) {

            val width = maxWidth
            val height = maxHeight / 2

            val newWidth = if (angle == 0f) width else height
            val newHeight = if (angle == 0f) height else width


            Column(modifier = Modifier.fillMaxSize()) {

                Box(
                    modifier = Modifier
                        .border(3.dp, Color.Red)
                        .size(width, height)
                        .graphicsLayer {
                            rotationZ = angle
                            scaleX = newWidth/width
                            scaleY = newHeight/height
                        }
                        .border(5.dp, Color.Yellow),
                    contentAlignment = Alignment.Center
                ) {

                    Image(
                        modifier = Modifier
                            .border(4.dp, getRandomColor())
                            .fillMaxSize(),
                        painter = painterResource(id = R.drawable.landscape1),
                        contentDescription = "",
                        contentScale = ContentScale.FillBounds
                    )
                }

                Box(
                    modifier = Modifier
                        .border(3.dp, Color.Red)
                        .graphicsLayer {
                            rotationZ = angle
                            scaleX = newWidth/width
                            scaleY = newHeight/height
                        }
                        .size(width, height)
                        .border(5.dp, Color.Yellow),
                    contentAlignment = Alignment.Center
                ) {

                    Image(
                        modifier = Modifier
                            .border(4.dp, getRandomColor())
                            .fillMaxSize(),
                        painter = painterResource(id = R.drawable.landscape1),
                        contentDescription = "",
                        contentScale = ContentScale.FillBounds
                    )
                }

            }
        }
    }
}

在左边，我们不zoom ，只旋转