Modifier.toggleable

Модификатор Modifier.toggleable устанавливает для компонента два состояния и позволяет переключаться между этими состояниями. Подобные компоненты в этом плане похожи на флажки (checkbox), в которых можно поставить отметку, а можно ее снять, тем самым изменив состояние флажка. Функция модификатора принимает следующие параметры:

fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
): Modifier

• value хранит состояние компонента в виде объекта Boolean, поэтому состояние может принимать только два значения: true и false

• enabled указывает, будет ли компонент доступен для выбора. Если он имеет значение true (значение по умолчанию), то компонент будет доступен

• role представляет объект Role, который представляет тип элемента интерфейса

• onValueChange представляет функцию типа (Boolean) -> Unit, которая вызывается при нажатии на компонент

Создадим переключаемый компонент на основе компонента Text:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.selection.toggleable
import androidx.compose.ui.unit.sp
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var checked = remember { mutableStateOf(false) }
            Text(
                modifier = Modifier.toggleable(value = checked.value, onValueChange = { checked.value = it }),
                text = checked.value.toString(),
                fontSize = 30.sp
            )
        }
    }
}

Для отслеживания состояния создается переменная checked, которая по умолчанию хранит значение false. Это значение передается в функцию модификатора toggleable параметру value. А с помощью другого параметра - onValueChange задаем функцию, которая получает новое состояние через параметр it и передает его переменной checked. Таким образом, при нажатии состояние компонента будет переключаться.

Мы можем пойти дальше и сделать с помощью модификатора что-то наподобие стандартного флажка или чекбокса:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.toggleable
import androidx.compose.ui.unit.sp
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var checked = remember { mutableStateOf(false) }
            Row{
                Box(modifier = Modifier.padding(10.dp).size(30.dp)
                    .background(Color.Black).padding(1.dp)
                    .background(
                        if(checked.value) Color.Black
                        else Color.White
                    ).toggleable(value = checked.value, onValueChange = { checked.value = it }))
                Text(checked.value.toString(),fontSize = 30.sp)
            }
        }
    }
}

В данном случае для изменения состояния применяется компонент Box. Для этого компонента устанавливаем отступ от границ контейнера и размер

Modifier.padding(10.dp).size(30.dp)

Далее устанавливаем границу черным цветом в 1 пиксель:

.background(Color.Black).padding(1.dp)

Затем устанавливаем фон компонента - он привязан к состоянию:

.background(
    if(checked.value) Color.Black
    else Color.White
)

То есть если состояние равно true, то Box получает черный цвет, иначе - белый цвет.

И далее с помощью модификатора toggable устанавливаем переключение состояния по нажатию на Box:

.toggleable(value = checked.value, onValueChange = { checked.value = it }))

Тектовое поле просто выводит значение состояния: