Jetpack之RadionBtton、Switch、Checkbox组件介绍

Jetpack Compose系列(9) - RadionBtton、Switch、Checkbox组件介绍

RadioButton

跟View体系一样，Compose也有RadioButton单选按钮组件，遵从Material Design风格。

其构造函数如下：

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: RadioButtonColors = RadioButtonDefaults.colors()
)

各参数含义如下：

· selected: Boolean ： 按钮是否选中。

· onClick: () -> Unit ：点击RadioButton的回调。

· modifier: Modifier = Modifier ： 其布局的修饰符，之前文章有详细解释，这里不做赘述。

· enabled: Boolean = true： 表示RadioButton是否可用。如果为false，则此按钮将不可选择，并以禁用的UI状态显示。

· interactionState: InteractionState = remember { InteractionState() } ：事件交互，自定义按钮显示的不同状态。

· colors: RadioButtonColors = RadioButtonDefaults.colors() ：RadioButton在不同状态下的颜色。

例如如下代码：

val selectState = remember {
    mutableStateOf(true)
}
val notSelectState = remember {
    mutableStateOf(false)
}
Column() {
    RadioButton(
        selected = selectState.value,
        onClick = { selectState.value = !selectState.value },
        colors = RadioButtonDefaults.colors(
            selectedColor = Color.Blue,
            unselectedColor = Color.Gray
        )
    )
    RadioButton(
        selected = notSelectState.value,
        onClick = { notSelectState.value = !notSelectState.value },
        colors = RadioButtonDefaults.colors(
            selectedColor = Color.Blue,
            unselectedColor = Color.Gray
        )
    )
}

对应的显示效果为：

用惯了View体系的RadioButton的同学可能会发现Compose的RadioButton就是一个Button，不会像XML中的还有text属性。除此之外其余差别不大，在此不再赘述。

Switch

专门表示选中状态的组件还有一个，Switch，其构造函数如下：

fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors()
)

其参数含义与RadioButton差不多，例如如下代码：

val checkState = remember {
    mutableStateOf(true)
}
val notCheckState = remember {
    mutableStateOf(false)
}
Column() {
    Switch(
        checked = checkState.value,
        onCheckedChange = { checkState.value = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.White,
            checkedTrackColor = Color.Red
        )
    )
    Switch(
        checked = notCheckState.value,
        onCheckedChange = { notCheckState.value = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.White,
            checkedTrackColor = Color.Red
        )
    )
}

对应的显示效果为：

CheckBox

同样作为选择状态组件checkbox的构造函数参数跟Switch几乎差不多：

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

各参数含义在此不做赘述。

val boxState = remember {
    mutableStateOf(true)
}
val notBoxtate = remember {
    mutableStateOf(false)
}
Column() {
    Checkbox(
        checked = boxState.value,
        onCheckedChange = { boxState.value = it },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Blue,
            uncheckedColor = Color.Gray
        )
    )
    Checkbox(
        checked = notBoxtate.value,
        onCheckedChange = { notBoxtate.value = it },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Blue,
            uncheckedColor = Color.Gray
        )
    )
}

对应的展示效果为：

最后，你会发现，这三个组件几乎是同样的参数和使用套路，这也从侧面说明掌握Jetpack Compose其实并不难。后续相关组件简单的我会一笔带过，开始Jetpack架构组件之旅。