Modifier 修飾子
預設
每一個元件都會有修飾子，以下二種方式都是預設修飾子。
注意！代入的Modifier，前面的M為大寫。
kotlin函式指定參數寫法:
Text("Hello", 參數名 = 參數值)
Text("Hello", modifier = Modifier)
Java的方法，沒辦法指定參數名稱，呼叫的時候一定要按照參數順序呼叫，但Kotlin可以宣告參數名，不用按照順序呼叫方法。
方法(參數1, 參數2, 參數3);
1
2
3
4
// 方法1: 沒有代入modifier = Modifier
Text("Hello")
// 方法2: 代入modifier = Modifier
Text("Hello", modifier = Modifier)
Modifier Chain 鏈式呼叫
無法個別指定，大小、顏色、padding(產生空間間距)。
1
2
3
Modifier.size(100.dp, 200.dp)
Modifier.background(color = Color.Red)
Modifier.padding(8.dp)
使用Chain 鏈式呼叫。
1
2
3
4
5
6
7
8
9
10
@Preview
@Composable
fun GreetingPreview() {
Text(
"Hello", modifier = Modifier
.size(200.dp, 300.dp)
.background(Color.Blue)
.padding(8.dp)
)
}
寬高設定
width() height()
width()是寬，height()是高度。
建立寬100dp，高150dp的盒子。
1
2
3
4
5
6
7
8
9
10
@Preview
@Composable
fun GreetingPreview() {
Box(
modifier = Modifier
.width(100.dp)
.height(150.dp)
.background(color = Color.Red)
)
}
如果高度不設，會根據箱子裡面裝的元件，自動調整高度，同理，若只設定height，不設定width，會根據箱子裡面的元件，自動調整寬度。
1
2
3
4
5
6
7
Box(
modifier = Modifier
.width(100.dp)
.background(color = Color.Red)
) {
Text("Hello", modifier = Modifier.height(20.dp))
}
size()
size也是調整寬高，代入參數名width寬，或參數名height高，就可以設定寬高。
1
2
3
4
5
Box(
modifier = Modifier
.size(width = 100.dp, height = 150.dp)
.background(color = Color.Red)
)
若只代入一個數值，沒有參數名，代表要建立一個正方形，寬高都是相同。
1
2
3
4
5
Box(
modifier = Modifier
.size(100.dp)
.background(color = Color.Red)
)
background()
設定顏色
1
Modifier.background(color = Color.Red)
根據父元件 決定大小
fillMaxSize()
等同constraint layout中，寬高都是 match parent。
若沒有父元件包住，fillMaxSize()意思就是跟手機螢幕大小一樣。
fillMaxWidth
寬度根據父元件的寬度，若沒有父元件，就是螢幕的寬度。
高度根據內容物(content)的高度，自適應高度。
下面的例子，Box包住Text，Text就是Box的子元件，也是內容物(content)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Preview
@Composable
fun GreetingPreview() {
Box(modifier =Modifier
.fillMaxWidth()
.background(color = Color.Blue)
) {
Text(
text = "Hello !",
modifier = Modifier
.background(Color.Red)
.padding(8.dp)
)
}
}
fillMaxHeight
高度根據父元件的高度，若沒有父元件，就是螢幕的高度。
寬度根據內容物(content)的寬度，自適應寬度。
Modifier 設定前後順序
設定前後順序如下: