たくさんの自由帳

Jetpack Compose でテキストを押してもスイッチを押せるようにするやつ

投稿日 : | 0 日前

文字数(だいたい) : 905

目次

どうもこんばんわ。

先に答え

スイッチとラベルのText()を並べてる親にModifier.toggleable()をつければ良いです。

val isEnable = remember { mutableStateOf(false) }
 
// Switch
Row(
    modifier = Modifier
        .toggleable(
            value = isEnable.value,
            onValueChange = { isEnable.value = it },
            role = Role.Switch // 他にもチェックボックスとかあります
        )
        .padding(10.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
    Icon(
        painter = painterResource(id = R.drawable.akari_droid_color_icon),
        contentDescription = null
    )
    Text(
        modifier = Modifier.weight(1f),
        text = "ラベルも押せるようにしたい"
    )
    Switch(
        checked = isEnable.value,
        onCheckedChange = null // null に
    )
}
 
// Checkbox
Row(
    modifier = Modifier
        .toggleable(
            value = isEnable.value,
            onValueChange = { isEnable.value = it },
            role = Role.Checkbox // 他にもチェックボックスとかあります
        )
        .padding(10.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
    Icon(
        painter = painterResource(id = R.drawable.akari_droid_color_icon),
        contentDescription = null
    )
    Text(
        modifier = Modifier.weight(1f),
        text = "ラベルも押せるようにしたい"
    )
    Checkbox(
        checked = isEnable.value,
        onCheckedChange = null // null に
    )
}

Imgur

ちゃんとキーボード入力でも操作ができます！！

Imgur

本題

Jetpack ComposeのSwitch()、本当にスイッチだけなので隣にText()を置いてラベルも一緒に表示するかなと思いますが

val isEnable = remember { mutableStateOf(false) }
 
Row(
    modifier = Modifier.padding(10.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
    Icon(
        painter = painterResource(id = R.drawable.akari_droid_color_icon),
        contentDescription = null
    )
    Text(
        modifier = Modifier.weight(1f),
        text = "ラベルも押せるようにしたい"
    )
    Switch(
        checked = isEnable.value,
        onCheckedChange = { isEnable.value = it }
    )
}

ラベルの部分も押したい

これだとスイッチの部分だけで、ラベルの部分を押してもスイッチが反映されません。

Imgur

Imgur

ブッブー
これではいけませんね

https://www.nicovideo.jp/watch/sm9476405?from=30

なので、この例だと親のRow()にModifier.clickable { isEnable.value = !isEnable.value }をつけるといいのかなって思いますが、これじゃない方法があったはず、、、、思い出せないけど

val isEnable = remember { mutableStateOf(false) }
 
Row(
    modifier = Modifier
        .clickable { isEnable.value = !isEnable.value }
        .padding(10.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
    Icon(
        painter = painterResource(id = R.drawable.akari_droid_color_icon),
        contentDescription = null
    )
    Text(
        modifier = Modifier.weight(1f),
        text = "ラベルも押せるようにしたい"
    )
    Switch(
        checked = isEnable.value,
        onCheckedChange = { isEnable.value = it }
    )
}

Imgur

というわけで答えが冒頭のあれです。これだけです。