一、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())}