Переключатель Switch

Компонент Switch представляет переключатель, который может находиться в двух состояниях: отмеченном и неотмеченном. Он имеет следующие параметры:

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Параметры функции компонента:

• checked: указывает, отмечен ли переключатель. Если равно true, то отмечен

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

• modifier: объект типа Modifier, который задает модификаторы компонента

• thumbContent: содержимое для отрисовки переключателя

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

• colors: объект SwitchColors, который задает цвета для поля ввода. Значение по умолчанию - SwitchDefaults.colors()

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

Простейший Switch:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Switch
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) }
            Switch(
                checked = checkedState.value,
                onCheckedChange = { checkedState.value = it }
            )
        }
    }
}

В данном случае состояние компонента Switch привязано к значению переменной checkedState. В функции параметра onCheckedChange изменяем значение этой переменной, передавая ей новое значение.

Обычно рядом со Switch идет текстовая метка, которая говорит о предназначении переключателя:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Switch
import androidx.compose.material3.Text

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
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(false) }
            val textColor = remember { mutableStateOf(Color.Unspecified) }
            Column{
                Row (verticalAlignment = Alignment.CenterVertically){
                    Text("Цвет Purple40", fontSize = 22.sp, color = textColor.value, modifier = Modifier.padding(8.dp, 0.dp))
                    Switch(
                        checked = checkedState.value,
                        onCheckedChange = {
                            checkedState.value = it
                            if(checkedState.value) textColor.value = Color(0xFF6650a4)
                            else textColor.value = Color.Unspecified
                        }
                    )
                }
            }
        }
    }
}

В данном случае мы переключаем значение переменной textColor - если Switch находится в отмеченном состоянии, то она получает цвет Purple40. Для отображения изменения этой переменной ее значение привязано к параметру color компонента Text:

Цветовая гамма

По умолчанию Switch использует цвета, устанавливаемые функцией SwitchDefaults.colors. Она имеет много параметров, поэтому отмечу лишь некоторые:

• checkedThumbColor: цвет бегунка в отмеченном состоянии

• checkedTrackColor: цвет переключателя в отмеченном состоянии

• checkedBorderColor: цвет границы переключателя при отмеченном состоянии

• uncheckedThumbColor: цвет бегунка в неотмеченном состоянии

• uncheckedTrackColor: цвет переключателя в неотмеченном состоянии

• uncheckedBorderColor: цвет границы переключателя при неотмеченном состоянии

• disabledCheckedTrackColor: цвет переключателя в отмеченном состоянии, когда он недоступен для взаимодействия

• disabledUncheckedTrackColor: цвет переключателя в неотмеченном состоянии, когда он недоступен для взаимодействия

• disabledCheckedThumbColor: цвет бегунка в отмеченном состоянии, когда переключатель недоступен для взаимодействия

• disabledUncheckedThumbColor: цвет бегунка в неотмеченном состоянии, когда переключатель недоступен для взаимодействия

Изменим цветовую гамму переключателя:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.material3.Text

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
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(false) }
            val textColor = remember { mutableStateOf(Color.Unspecified) }
            Column{
                Row (verticalAlignment = Alignment.CenterVertically ){
                    Text("Красный цвет", fontSize = 22.sp, color = textColor.value, modifier = Modifier.padding(8.dp, 0.dp))
                    Switch(
                        checked = checkedState.value,
                        onCheckedChange = {
                            checkedState.value = it
                            if(checkedState.value) textColor.value = Color(0xFFC62828)
                            else textColor.value = Color.Unspecified
                        },
                        colors = SwitchDefaults.colors(
                            checkedThumbColor = Color(0xFFC62828),
                            checkedTrackColor = Color(0xFFE57373),
                            uncheckedThumbColor = Color(0xFFEF9A9A),
                            uncheckedTrackColor = Color(0xFFFFEBEE)
                        )
                    )
                }
            }
        }
    }
}