Jetpack Compose : disabled のとき Image や Text の色を薄くしたい

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) ) }