Margin-like 增加外部空間
padding 通常是用來「內部」增加空間，但Card跟Button，使用padding是「外部」增空間，是margin的效果。
Compose沒有margin，使用Margin-like，假裝是margin。
Card 與 padding
Column 與 Card padding
以下程式碼，在Column父元件，包住三個Card子元件。
每一個Card，定義padding bottom，向「外部底部」增加8dp的空間大小，注意！這邊不是內部。
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
28
@Composable
fun testCard() {
Column (modifier = Modifier.fillMaxWidth()) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
) {
Text("Hello1")
}
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
) {
Text("Hello2")
}
Card(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp)
) {
Text("Hello3")
}
}
}
Row與 Card padding
以下程式碼，在Row父元件，包住二個Card子元件。
每一個Card，定義padding horizontal，向「外部左邊與右邊」增加8dp的空間大小，注意！這邊不是內部。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Composable
fun testCard() {
Row(
modifier = Modifier
.fillMaxWidth()
) {
Card(
modifier = Modifier
.weight(1f)
.padding(horizontal = 8.dp)
) {
Text("Hello1")
}
Card(
modifier = Modifier
.weight(1f)
.padding(horizontal = 8.dp)
) {
Text("Hello2")
}
}
}
Button與padding
以下尚未有padding，Button是貼近父元件邊緣。
showBackground = true ，要把背景顏色打開，才看的出效果。
1
2
3
4
5
6
7
8
9
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Button(
onClick = {}
) {
Text(text = "Hello !")
}
}
加了top padding，與父元件有上方top距離20dp。
1
2
3
4
5
6
7
8
9
10
11
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Button(
onClick = {},
modifier = Modifier
.padding(top = 20.dp)
) {
Text(text = "Hello !")
}
}
Button內部的元件 padding
Button內部的Text，Text的padding是屬於內增空間。
下面的例子，Text加上top padding。
Text元件增加padding是「內部」增加上方20dp的空間，跟Button不一樣，Button是「外部」增加空間。
1
2
3
4
5
6
7
8
9
10
11
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Button(
onClick = {},
modifier = Modifier.padding(top = 20.dp)
) {
Text(text = "Hello !",
modifier = Modifier.padding(top = 20.dp))
}
}