alpha
透明度
- 0.0f是完全透明
- 1.0f是沒有透明度
- 0.5f是50%透明度
- 0.25f是75%透明度
Box與 alpha
透明度影嚮的是Box的Children子元件。
以下的程式碼，是讓Box的「子元件」有透明度。
不是讓Box背景顏色有透明度，雖然alpha是定義在Parent父元件上。
1
2
3
4
5
6
7
8
9
10
@Composable
fun testAlpha() {
Box(modifier = Modifier
.size(200.dp)
.background(Color.Blue)
.alpha(0.2f)
) {
Text("Alpha Test")
}
}
background 與 alpha
以下程式碼，建立3個box，分別是完全沒有透明度、設定透明度、background使用copy透明度。
可以發現，Box設定透明度，影嚮的是子元件的透明度，背景顏色不影嚮。
background使用copy的方式把複製出一個透明度80%(0.2f)的顏色，只有背景顏色有變，內容的Child子元件顏色不影嚮。
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 testAlpha() {
Row {
Box(
modifier = Modifier
.size(50.dp)
.background(Color.Blue)
) {
Text("Test1")
}
Box(
modifier = Modifier
.size(50.dp)
.background(Color.Blue)
.alpha(0.2f)
) {
Text("Test1")
}
Box(
modifier = Modifier
.size(50.dp)
.background(Color.Blue.copy(alpha = 0.2f))
) {
Text("Test1")
}
}
}
Button與alpha
未加alpha前的程式碼
1
2
3
4
5
6
7
@Composable
fun testAlpha() {
Button(onClick = {},
enabled = false) {
Text("disable click button")
}
}
加了alpha後，會影嚮Button的背景透明度顏色，跟文字透明度的顏色。
1
2
3
4
5
6
7
8
@Composable
fun testAlpha() {
Button(onClick = {},
modifier = Modifier.alpha(0.5f),
enabled = false) {
Text("disable click button")
}
}