Y.A.M の雑記帳: Jetpack Compose : Modifier.toggleable() で独自チェックボックスを作る

Modifier.toggleable() を使います。


var checked by remember { mutableStateOf(false) }

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .toggleable(
            value = checked,
            onValueChange = { checked = it }
        )
        .size(48.dp)
) {
    Icon(
        imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
        contentDescription = if (checked) "favorite on" else "favorite off",
    )
}

Box + Modifier.toggleable() 部分は IconToggleButton として用意されているので、それを使うこともできます。


var checked by remember { mutableStateOf(false) }

IconToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
) {
    Icon(
        imageVector = if (checked) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
        contentDescription = if (checked) "favorite on" else "favorite off",
    )
}

Y.A.M の雑記帳

2021年5月9日日曜日

Jetpack Compose : Modifier.toggleable() で独自チェックボックスを作る

0 件のコメント:

コメントを投稿