offset
語法
原點是左上角，座標是(x = 0, y= 0)。
使用螢幕作標系統，不是迪卡爾數學x、y座標，二者不同。
單位是dp。
| 正負數 | x | y |
|---|---|---|
| 正 | 向右 | 向下 |
| 負 | 向左 | 向上 |
Modifier.offset(x = 正數向右移動, y = 正數向下移動)
Modifier.offset(x = 20.dp, y = 10.dp)
Modifier.offset(x = (負數)向左移動, y = (負數)向上移動)
Modifier.offset(x = (-20).dp, y = (-10).dp)
負數要用圓括號包住。
以下的例子，Box仍是在原本位置，但Box裡面的子元素Text，x向右移動20dp，y向下移動10dp。
offset，不會影嚮父元素的位置。
x與y都為正數。
1
2
3
4
5
6
7
8
9
10
11
@Composable
fun testOffset() {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
.offset(x = 20.dp, y = 10.dp)
) {
Text("Offset Box")
}
}
x與y都為負數。
1
2
3
4
5
6
7
8
9
10
fun testOffset() {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
.offset(x = (-20).dp, y = (-10).dp)
) {
Text("Offset Box")
}
}
offset 與 background 順序
先後順序不同，效果就會不同。
offset先，background後。
可以發現會針對offset的區域塗滿顏色。
1
2
3
4
5
6
7
8
9
10
11
@Composable
fun testOffset() {
Box(
modifier = Modifier
.size(100.dp)
.offset(x = 10.dp, y = 30.dp)
.background(Color.Blue)
) {
Text("Test")
}
}
background先，offset後。
background會先把box塗滿顏色，不會管後面有沒有位移。
1
2
3
4
5
6
7
8
9
10
11
@Composable
fun testOffset() {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
.offset(x = 10.dp, y = 30.dp)
) {
Text("Test")
}
}