Android Jetpack Compose - Switch（切换）、Slider（滑块）、RangeSlider（范围滑块）-深圳市維司達科技有限公司

一、Switch（切换）

1、基本介绍

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

参数	说明
checked	当前开关状态
onCheckedChange	状态变化时的回调
modifier	布局修饰符
thumbContent	自定义滑块内容
enabled	是否启用
colors	自定义颜色，通过`SwitchDefaults.colors()`配置
interactionSource	自定义交互状态反馈

2、演示

varcheckedbyremember{mutableStateOf(true)}Box(modifier=Modifier.fillMaxSize()){Switch(modifier=Modifier.align(Alignment.Center),checked=checked,onCheckedChange={checked=it})}

varcheckedbyremember{mutableStateOf(true)}Box(modifier=Modifier.fillMaxSize()){Switch(modifier=Modifier.align(Alignment.Center),checked=checked,onCheckedChange={checked=it},thumbContent=if(checked){{Icon(imageVector=Icons.Filled.Check,contentDescription=null,modifier=Modifier.size(SwitchDefaults.IconSize),)}}else{null})}

varcheckedbyremember{mutableStateOf(true)}Box(modifier=Modifier.fillMaxSize()){Switch(modifier=Modifier.align(Alignment.Center),checked=checked,onCheckedChange={checked=it},colors=SwitchDefaults.colors(checkedThumbColor=MaterialTheme.colorScheme.primary,checkedTrackColor=MaterialTheme.colorScheme.primaryContainer,uncheckedThumbColor=MaterialTheme.colorScheme.secondary,uncheckedTrackColor=MaterialTheme.colorScheme.secondaryContainer,))}

二、Slider（滑块）

1、基本介绍

funSlider(value:Float,onValueChange:(Float)->Unit,modifier:Modifier=Modifier,enabled:Boolean=true,valueRange:ClosedFloatingPointRange<Float>=0f..1f,@IntRange(from=0)steps:Int=0,onValueChangeFinished:(()->Unit)?=null,colors:SliderColors=SliderDefaults.colors(),interactionSource:MutableInteractionSource=remember{MutableInteractionSource()}){}

参数	说明
value	当前滑块的值
onValueChange	值变化时的回调
modifier	布局修饰符
enabled	是否启用
valueRange	值范围
steps	`steps = 0`（默认）：滑块在 valueRange 内连续滑动 `steps = 3`：将范围分成 4 个等距档位，`档位数 = steps + 1`
onValueChangeFinished	松开手指结束滑动时的回调
colors	自定义颜色，通过`SliderDefaults.colors()`配置
interactionSource	自定义交互状态反馈

2、演示

varsliderPositionbyremember{mutableFloatStateOf(0f)}Column(modifier=Modifier.fillMaxSize().padding(16.dp),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){Slider(value=sliderPosition,onValueChange={sliderPosition=it})Text(text=sliderPosition.toString())}

varsliderPositionbyremember{mutableFloatStateOf(0f)}Column(modifier=Modifier.fillMaxSize().padding(16.dp),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){Slider(value=sliderPosition,onValueChange={sliderPosition=it},colors=SliderDefaults.colors(thumbColor=MaterialTheme.colorScheme.secondary,activeTrackColor=MaterialTheme.colorScheme.secondary,inactiveTrackColor=MaterialTheme.colorScheme.secondaryContainer,),steps=3,)Text(text=sliderPosition.toString())}

varsliderPositionbyremember{mutableFloatStateOf(0f)}Column(modifier=Modifier.fillMaxSize().padding(16.dp),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){Slider(value=sliderPosition,onValueChange={sliderPosition=it},colors=SliderDefaults.colors(thumbColor=MaterialTheme.colorScheme.secondary,activeTrackColor=MaterialTheme.colorScheme.secondary,inactiveTrackColor=MaterialTheme.colorScheme.secondaryContainer,),steps=3,valueRange=0f..50f)Text(text=sliderPosition.toString())}

三、RangeSlider（范围滑块）

1、基本介绍

funRangeSlider(value:ClosedFloatingPointRange<Float>,onValueChange:(ClosedFloatingPointRange<Float>)->Unit,modifier:Modifier=Modifier,enabled:Boolean=true,valueRange:ClosedFloatingPointRange<Float>=0f..1f,@IntRange(from=0)steps:Int=0,onValueChangeFinished:(()->Unit)?=null,colors:SliderColors=SliderDefaults.colors()){}

参数	说明
value	当前滑块的值
onValueChange	值变化时的回调
modifier	布局修饰符
enabled	是否启用
valueRange	值范围
steps	`steps = 0`（默认）：滑块在 valueRange 内连续滑动 `steps = 3`：将范围分成 4 个等距档位，`档位数 = steps + 1`
onValueChangeFinished	松开手指结束滑动时的回调
colors	自定义颜色，通过`SliderDefaults.colors()`配置

2、演示

varsliderPositionbyremember{mutableStateOf(0f..100f)}Column(modifier=Modifier.fillMaxSize().padding(16.dp),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){RangeSlider(value=sliderPosition,onValueChange={sliderPosition=it},onValueChangeFinished={Log.i(TAG,"松开手指结束滑动了")},valueRange=0f..100f)Text(sliderPosition.start.toString()+" - "+sliderPosition.endInclusive.toString())}

varsliderPositionbyremember{mutableStateOf(0f..100f)}Column(modifier=Modifier.fillMaxSize().padding(16.dp),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){RangeSlider(value=sliderPosition,onValueChange={sliderPosition=it},valueRange=0f..100f,steps=3,)Text(sliderPosition.start.toString()+" - "+sliderPosition.endInclusive.toString())}