挑选器是啥
挑选器主要是指Checkbox复选框,单选开关Switch,滑杆组件Slider等用于提供给用户挑选一些值和程序交互的组件,比方像复选框Checkbox,能够让用户挑选一个或许多个选项,它能够将一个选项翻开或许是封闭,通常用来做线上查询问卷或许是模拟考试的场景程序中,再比方滑杆组件能够用来作为调理音量和亮度的数值调整,或许是做进展条。
实例解析
1.Checkbox复选框
Checkbox允许用户从一个集合中挑选一个或许多个选项,并且它能够将一个选项翻开或许是封闭,下列是Checkbox的参数列表
@Composable
fun Checkbox(
checked: Boolean, // 是否被选中
onCheckedChange: ((Boolean) -> Unit)?, // 当复选框被点击时的回调
modifier: Modifier = Modifier,
enabled: Boolean = true, // 是否启用复选框
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors() // 复选框的演示组
)
咱们能够经过下面的代码了解Checkbox的运用方法
@Composable
fun CheckBoxDemo()
{
val checkedState = remember {
mutableStateOf(true)
}
Checkbox(checked = checkedState.value, onCheckedChange = {
checkedState.value = it
},
colors = CheckboxDefaults.colors(checkedColor = Color(0xFF0079D3)))
}
运转成果:
2.TriStateCheckbox 三状况挑选框
当咱们的复选框有许多个的时候,往往希望能够统一挑选或许时取消,这种场景下咱们就能够运用TriStateCheckbox ,代码如下:
@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)
}
}
运转成果如下。
当复选框全选中时,TriStateCheckbox显现已完成的状况,而假如只有部分复选框被选中时,TriStateCheckbox则显现不确定状况,当咱们在这个时候点击它时,则会将剩余没有选中的复选框设置为选中状况,当咱们去掉一切选中状况时,TriStateCheckbox的状况也被置成了未选中的状况。
3.Switch单选开关
Switch组件能够操控单个项封闭或许是开启,参数列表如下
@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() // 开关组的色彩。
)
Switch组件的运用也特别简单,代码如下:
@Composable
fun SwitchDemo()
{
val checkedState = remember {
mutableStateOf(true)
}
Switch(checked = checkedState.value, onCheckedChange = {
checkedState.value = it
})
}
运转成果:
4.Slider滑杆组件
slider组件类似于传统视图的SeekBar,能够用来做音量,亮度之类的数值调整或许是进展条,咱们先看看它的参数列表
@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
)
其间,colors参数是用于设置滑杆各部位的色彩。滑杆组件中可设置色彩的区域许多,例如滑杆小圆球的色彩,滑杆进展条色彩,滑杆底色等,step参数将进展条平分为(step+1) 段,比方当分红两段时,进展条在榜首段之间拉动,超越榜首段的一半就自动到榜首段,没超越就退回到本来的位置,Sliderbar的运用代码如下。
@Composable
fun SliderDemo()
{
var sliderPosition by remember {
mutableStateOf(0f)
}
Text(text = "%.1f".format(sliderPosition*100) + "%")
Slider(value = sliderPosition, onValueChange = {sliderPosition = it})
}
运转成果如下
总结
本文主要介绍了复选框,三状况挑选框,单选开关和滑杆组件,读者应该自己手敲一遍,记忆会愈加牢靠。在写测试demo的时候,建议读者也尽量运用这些组件,一是能够了解他们的运用,二是让自己写的demo愈加异乎寻常