Checkbox

Компонент Checkbox представляет флажок, который может быть в отмеченном и неотмеченном состоянии. Его функция принимает следующие параметры:

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

• checked: указывает, будет ли отмечен флажок. Представляет значение Boolean. Если равен true, то флажок отмечен.

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

• modifier: объект Modifier, который устанавливает для флажка модификаторы

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

• interactionSource: объект MutableInteractionSource, который задает поток взаимодействий для флажка. По умолчанию равен remember { MutableInteractionSource() }.

• colors: объект CheckboxColors, который задает цвета для флажка. По умолчанию равен CheckboxDefaults.colors().

Простейший флажок:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Checkbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checkedState = remember { mutableStateOf(true) }
            Checkbox(
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it }
            )
        }
    }
}

Здесь надо отметить два момента. Прежде всего для компонента Checkbox необходимо задать как минимум два параметра: checked и onCheckedChange. Для этого в примере выше определена переменная checkedState, которая представляет состояние флажка (отмечен или нет). Эта переменная представляет объект типа MutableState<Boolean>, который создается функцией mutableStateOf(). В эту функцию передается собственно хранимое значение - в данном случае значение true, которое затем можно получить с помощью свойства value объекта MutableState<T>. А функция remember позволяет сохранить это значение.

В коде с помощью свойства value мы привязываем значение переменной к свойству checked:

checked = checkedState.value

А в функции обработки изменения состояния флажка с помощью параметра it передаем в переменную новое состояние флажка (если отмечен - true, если отметка отсутвует - false):

onCheckedChange = { checkedState.value = it }

Второй момент, который надо отметить, флажок не предоставляет встроенных возможностей по установке текстовой метки. Однако, как правило, при флажке идет некоторый текст, который некоторым образом объясняет назначение флажка. Но в Jetpack Compose подобную текстовую метку нам надо устанавливать дополнительно:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checkedState = remember { mutableStateOf(true) }
            Row{
                Checkbox(
                    checked = checkedState.value,
                    onCheckedChange = { checkedState.value = it }
                )
                Text("Выбрано", fontSize = 28.sp, modifier = Modifier.padding(4.dp))
            }
        }
    }
}

Из параметров следует отметить параметр colors, который представляет тип CheckboxColors и устанавливает цветовую гамму флажка. По умолчанию он хранит компонент CheckboxDefaults.colors

@Composable
fun colors(
    checkedColor: Color = MaterialTheme.colorScheme.fromToken(CheckboxTokens.SelectedContainerColor),
    uncheckedColor: Color = MaterialTheme.colorScheme.fromToken(CheckboxTokens.UnselectedOutlineColor),
    checkmarkColor: Color = MaterialTheme.colorScheme.fromToken(CheckboxTokens.SelectedIconColor),
    disabledCheckedColor: Color = MaterialTheme.colorScheme                 
        .fromToken(CheckboxTokens.SelectedDisabledContainerColor)                 
        .copy(alpha = CheckboxTokens.SelectedDisabledContainerOpacity),
    disabledUncheckedColor: Color = MaterialTheme.colorScheme                 
        .fromToken(CheckboxTokens.UnselectedDisabledOutlineColor)                 
        .copy(alpha = CheckboxTokens.UnselectedDisabledContainerOpacity),
    disabledIndeterminateColor: Color = disabledCheckedColor
): @Composable CheckboxColors

Его параметры:

• checkedColor: цвет флажка, когда он находится в отмеченном состоянии

• uncheckedColor: цвет флажка, когда он неотмечен

• checkmarkColor: цвет отметки флажка

• disabledCheckedColor: цвет флажка, когда он отмечен, но не доступен для нажатия

• disabledUncheckedColor: цвет флажка, когда он не отмечен и не доступен для нажатия

• disabledIndeterminateColor: цвет флажка типа TriStateCheckbox, когда он не доступен и одновременно находится в состоянии ToggleableState.Indeterminate

Используем данный параметр для настройки цветов:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
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
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checkedState = remember { mutableStateOf(true) }
            Row{
                Checkbox(
                    checked = checkedState.value,
                    onCheckedChange = { checkedState.value = it },
                    colors  = CheckboxDefaults.colors(checkedColor = Color(0xffffb6c1), checkmarkColor = Color.Red)
                )
                Text("Выбрано", fontSize = 28.sp, modifier = Modifier.padding(4.dp))
            }
        }
    }
}

TriStateCheckbox

Компонент TriStateCheckbox расширяет Checkbox, добавляя возможность установить флажок в третье - неопределенное состояние

@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Он принимает почти те же параметры, что и Checkbox, за исключением двух параметров. Так, параметр state представляет тип ToggleableState и устанавливает состояние флажка с помощью следующих значений:

• ToggleableState.Indeterminate: неопределенное состояние

• ToggleableState.Off: отметка снята

• ToggleableState.On: флажок отмечен

Второй отличающийся параметр - onClick задает функцию изменения состояния флажка.

Определим простейший компонент TriStateCheckbox:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.material3.TriStateCheckbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checkedState = remember { mutableStateOf(ToggleableState.Indeterminate) }
            Row{
                TriStateCheckbox(
                    state = checkedState.value,
                    onClick = {
                        if (checkedState.value == ToggleableState.Indeterminate || checkedState.value == ToggleableState.Off)
                            checkedState.value = ToggleableState.On
                        else checkedState.value = ToggleableState.Off
                    }
                )
                Text("Выбрано", fontSize = 28.sp, modifier = Modifier.padding(4.dp))
            }
        }
    }
}