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))
}

对应的展示效果为：