rotate
語法
Modifier.rotate(浮點數.f)
Modifier.rotate(45.f)
參數是旋轉的角度。
旋轉角度
- 0f: 無旋轉
- 45f: 向右旋轉45度
- -45f: 向左旋轉45度
- 90f: 向右旋轉90度
- -90f: 向左旋轉90度
- 180f: 上下顛倒(upside down)
- 270f: 向右旋轉270度
負數是向左旋轉，正數是向右旋轉。
45f
1
2
3
4
5
6
7
8
9
10
@Composable
fun Rotate() {
Box(modifier = Modifier
.size(100.dp)
.rotate(45f)
.background(Color.Blue)
) {
Text("Rotated", color = Color.White)
}
}
-45f
1
2
3
4
5
6
7
8
9
10
@Composable
fun Rotate() {
Box(modifier = Modifier
.size(100.dp)
.rotate(-45f)
.background(Color.Blue)
) {
Text("Rotated", color = Color.White)
}
}
180f
1
2
3
4
5
6
7
8
9
10
@Composable
fun Rotate() {
Box(modifier = Modifier
.size(100.dp)
.rotate(180f)
.background(Color.Blue)
) {
Text("Rotated", color = Color.White)
}
}
rotate Icon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@Composable
fun RotateIconTest() {
Column {
RotateIcon("up")
RotateIcon("right")
RotateIcon("down")
RotateIcon("left")
}
}
@Composable
fun RotateIcon(direction: String) {
val rotationAngle = when(direction) {
"up" -> 0f
"right" -> 90f
"down" -> 180f
"left" -> 270f
else -> 0f
}
Icon(
imageVector = Icons.Default.ArrowUpward,
contentDescription = null,
modifier = Modifier
.size(48.dp)
.rotate(rotationAngle)
)
}