Checkbox とか Switch とか enabled 設定が用意されている Composable では enabled に false を設定すると色が薄くなるよう実装されています。
@Composable
fun Checkbox(
...
enabled: Boolean = true,
...
) {
...
}
Text とか Image には enabled 設定は用意されていないので自分でがんばる必要があります。
方法としては
- Modifier.alpha() を使う
- LocalContentAlpha を指定する
- Text の color に指定する色の alpha を変える
- Image の alpha パラメータを指定する
などがあります。
Modifier.alpha() を使う
val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
Column(
modifier = Modifier.padding(16.dp).alpha(alpha)
) {
Image(Icons.Default.Android, contentDescription = null)
Icon(Icons.Default.Home, contentDescription = null)
Text("Android")
}
LocalContentAlpha を指定する
LocalContentAlpha はデフォルトのときの文字色と Icon の tint color に使われていますが、Image では使われていません。
val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
CompositionLocalProvider(LocalContentAlpha provides alpha) {
Column(
modifier = Modifier.padding(16.dp)
) {
Image(Icons.Default.Android, contentDescription = null)
Icon(Icons.Default.Home, contentDescription = null)
Text("Android")
}
}
Text, Icon の color, tint に指定する色の alpha を変える & Image の alpha パラメータを指定する
val alpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
Column(
modifier = Modifier.padding(16.dp)
) {
Image(
Icons.Default.Android,
contentDescription = null,
alpha = alpha
)
Icon(
Icons.Default.Home,
contentDescription = null,
tint = MaterialTheme.colors.primary.copy(alpha = alpha)
)
Text(
"Android",
color = MaterialTheme.colors.primary.copy(alpha = alpha)
)
}
0 件のコメント:
コメントを投稿