que es seleccionador
El selector se refiere principalmente a la casilla de verificación Checkbox, el interruptor de radio Switch, el componente deslizante Slider y otros componentes utilizados para proporcionar a los usuarios algunos valores e interacción del programa, como Checkbox, que permite a los usuarios seleccionar una o más opciones, puede activar o desactivar una opción. Por lo general, se usa en el programa de escena del cuestionario en línea o el examen simulado. Por ejemplo, el componente deslizante se puede usar para ajustar el valor del volumen y el brillo, o para hacer una barra de progreso. .
Ejemplo de análisis
1. Casilla de verificación Casilla de verificación
Checkbox permite a los usuarios seleccionar una o más opciones de una colección, y puede activar o desactivar una opción. La siguiente es la lista de parámetros de Checkbox
@Composable
fun Checkbox(
checked: Boolean, // 是否被选中
onCheckedChange: ((Boolean) -> Unit)?, // 当复选框被点击时的回调
modifier: Modifier = Modifier,
enabled: Boolean = true, // 是否启用复选框
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors() // 复选框的演示组
)
Podemos entender cómo usar Checkbox a través del siguiente código
@Composable
fun CheckBoxDemo()
{
val checkedState = remember {
mutableStateOf(true)
}
Checkbox(checked = checkedState.value, onCheckedChange = {
checkedState.value = it
},
colors = CheckboxDefaults.colors(checkedColor = Color(0xFF0079D3)))
}
resultado de la operación:
2.TriStateCheckbox cuadro de selección de tres estados
Cuando tenemos muchas casillas de verificación, a menudo queremos poder seleccionarlas o cancelarlas de manera uniforme. En este escenario, podemos usar TriStateCheckbox. El código es el siguiente:
@Composable
fun TriStateCheckBoxDemo()
{
val(state,onStateChange) = remember {
mutableStateOf(true)
}
val(state2,onStateChange2) = remember {
mutableStateOf(true)
}
val parentState = remember(state, state2) {
if(state && state2) ToggleableState.On
else if(!state && !state2) ToggleableState.Off
else ToggleableState.Indeterminate
}
val onParentClick = {
val s = parentState != ToggleableState.On
onStateChange(s)
onStateChange2(s)
}
Column(modifier = Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {
TriStateCheckbox(state = parentState, onClick = onParentClick,
colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colors.primary)
)
Checkbox(checked = state, onCheckedChange = onStateChange)
Checkbox(checked = state2, onCheckedChange = onStateChange2)
}
}
Los resultados de ejecución son los siguientes.
Cuando todas las casillas de verificación están seleccionadas, TriStateCheckbox muestra el estado completado, y si solo algunas de las casillas de verificación están seleccionadas, TriStateCheckbox muestra un estado indeterminado. Cuando hacemos clic en él en este momento, el complejo restante no seleccionado La casilla de verificación se establece en el seleccionado estado Cuando eliminamos todos los estados seleccionados, el estado de TriStateCheckbox también se establece en el estado no seleccionado.
3. Interruptor de radio
El componente Switch puede controlar el cierre o la apertura de un solo elemento, la lista de parámetros es la siguiente
@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
checked: Boolean, // 开关的状态
onCheckedChange: ((Boolean) -> Unit)?, 点击开关的回调，会获得最新的开关状态
modifier: Modifier = Modifier,
enabled: Boolean = true, // 是否启用
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource() },
colors: SwitchColors = SwitchDefaults.colors() // 开关组的颜色。
)
El uso del componente Switch también es muy sencillo, el código es el siguiente:
@Composable
fun SwitchDemo()
{
val checkedState = remember {
mutableStateOf(true)
}
Switch(checked = checkedState.value, onCheckedChange = {
checkedState.value = it
})
}
resultado de la operación:
4. Componente deslizante deslizante
El componente deslizante es similar a la SeekBar de la vista tradicional. Se puede usar para ajustar el volumen, el brillo y otros valores numéricos o barras de progreso. Echemos un vistazo a su lista de parámetros primero.
@Composable
fun Slider(
value: Float, // 进度值
onValueChange: (Float) -> Unit, // 进度改变的监听
modifier: Modifier = Modifier, // 修饰符
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f, // 进度值的范围默认是0到1
/*@IntRange(from = 0)*/
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource() },
colors: SliderColors = SliderDefaults.colors() // 滑杆颜色设置，默认值是SliderDefaults.colors
)
Entre ellos, el parámetro de colores se usa para establecer el color de cada parte del control deslizante. Hay muchas áreas en las que se pueden establecer colores en el componente del control deslizante, como el color de la bola pequeña del control deslizante, el color de la barra de progreso del control deslizante, el color de fondo del control deslizante, etc. El parámetro de paso divide el barra de progreso en (paso + 1) segmentos, por ejemplo, cuando se divide en dos Durante el primer párrafo, la barra de progreso se tira entre el primer párrafo, y automáticamente irá al primer párrafo si excede la mitad del primer párrafo, y volverá a la posición original si no se excede El código de uso de Sliderbar es el siguiente.
@Composable
fun SliderDemo()
{
var sliderPosition by remember {
mutableStateOf(0f)
}
Text(text = "%.1f".format(sliderPosition*100) + "%")
Slider(value = sliderPosition, onValueChange = {
sliderPosition = it})
}
El resultado de la operación es el siguiente
Resumir
Este artículo presenta principalmente la casilla de verificación, la casilla de selección de tres estados, el interruptor de radio y los componentes deslizantes. Los lectores deben escribirlo por sí mismos y la memoria será más confiable. Al escribir demostraciones de prueba, se recomienda a los lectores que utilicen estos componentes tanto como sea posible. Uno es familiarizarse con su uso y el otro es hacer que las demostraciones que escriben sean más únicas.