Android Jetpack Compose - 进度指示器、SegmentedButton、Chip
一、进度指示器
1、基本介绍
- 进度指示器可以分为 2 种类型
| 类型 | 说明 |
|---|---|
| 确定型 | 准确显示已完成的进度 |
| 不确定型 | 持续动画显示，不考虑进度 |
- 进度指示器可以采用 2 种形式
| 类型 | 说明 |
|---|---|
| 线性 | 从左向右填充的水平条 |
| 圆形 | 笔画长度不断增加，直到覆盖整个圆周的圆 |
2、基本使用
varcurrentProgressbyremember{mutableFloatStateOf(0f)}varloadingbyremember{mutableStateOf(false)}valscope=rememberCoroutineScope()Column(verticalArrangement=Arrangement.spacedBy(12.dp),horizontalAlignment=Alignment.CenterHorizontally,modifier=Modifier.fillMaxWidth().padding(12.dp)){Button(onClick={scope.launch{loading=truefor(iin0..100){delay(100)currentProgress=i.toFloat()/100}loading=false}},enabled=!loading){Text("开始加载")}if(loading){LinearProgressIndicator(progress={currentProgress},modifier=Modifier.fillMaxWidth(),)}}varcurrentProgressbyremember{mutableFloatStateOf(0f)}varloadingbyremember{mutableStateOf(false)}valscope=rememberCoroutineScope()Column(verticalArrangement=Arrangement.spacedBy(12.dp),horizontalAlignment=Alignment.CenterHorizontally,modifier=Modifier.fillMaxWidth().padding(12.dp)){Button(onClick={scope.launch{loading=truefor(iin0..100){delay(100)currentProgress=i.toFloat()/100}loading=false}},enabled=!loading){Text("开始加载")}if(loading){CircularProgressIndicator(progress={currentProgress},)}}3、不确定型进度指示器
不确定型通过动画向用户指示正在进行处理，但不会指定任何完成程度
LinearProgressIndicator 或 CircularProgressIndicator 都可以创建为不确定指示器，但不传入 progress 参数
varloadingbyremember{mutableStateOf(false)}valscope=rememberCoroutineScope()Column(verticalArrangement=Arrangement.spacedBy(12.dp),horizontalAlignment=Alignment.CenterHorizontally,modifier=Modifier.fillMaxWidth().padding(12.dp)){Button(onClick={scope.launch{loading=truefor(iin0..100){delay(100)}loading=false}},enabled=!loading){Text("开始加载")}if(loading){LinearProgressIndicator(modifier=Modifier.fillMaxWidth(),)}}varloadingbyremember{mutableStateOf(false)}valscope=rememberCoroutineScope()Column(verticalArrangement=Arrangement.spacedBy(12.dp),horizontalAlignment=Alignment.CenterHorizontally,modifier=Modifier.fillMaxWidth().padding(12.dp)){Button(onClick={scope.launch{loading=truefor(iin0..100){delay(100)}loading=false}},enabled=!loading){Text("开始加载")}if(loading){CircularProgressIndicator()}}二、SegmentedButton
1、基本介绍
- SegmentedButton，即分段按钮，它可让用户从一组并排显示的选项中进行选择， SegmentedButton 有 2 种类型
单选按钮：可让用户选择一个选项
多选按钮：可让用户选择 2 到 5 个选项，对于更复杂的选择或超过 5 个选项，可以使用使用 Chip
2、演示
varselectedIndexbyremember{mutableIntStateOf(0)}valoptions=listOf("Day","Month","Week")Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center,){SingleChoiceSegmentedButtonRow{options.forEachIndexed{index,label->SegmentedButton(shape=SegmentedButtonDefaults.itemShape(index=index,count=options.size),selected=(selectedIndex==index),onClick={selectedIndex=index},label={Text(label)})}}}valselectedOptions=remember{mutableStateListOf(false,false,false)}valoptions=listOf("Mail Outline","Call","Date Range")Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center,){MultiChoiceSegmentedButtonRow{options.forEachIndexed{index,label->SegmentedButton(shape=SegmentedButtonDefaults.itemShape(index=index,count=options.size),checked=selectedOptions[index],onCheckedChange={selectedOptions[index]=it},label={when(label){"Mail Outline"->Icon(imageVector=Icons.Default.MailOutline,contentDescription="Mail Outline")"Call"->Icon(imageVector=Icons.Default.Call,contentDescription="Call")"Date Range"->Icon(imageVector=Icons.Default.DateRange,contentDescription="Date Range")}})}}}三、Chip
1、基本介绍
- Chip 是一种小型交互组件，它提供了快速、高效的交互方式，例如，操作、筛选等，Chip 有如下 4 种类型
| 类型 | 说明 |
|---|---|
| AssistChip | 辅助型 Chip，用于触发操作，带图标的操作 |
| FilterChip | 筛选型 Chip，用于筛选选项，可选中 / 取消 |
| InputChip | 输入型 Chip，用于实体输入，可删除的实体 |
| SuggestionChip | 建议型 Chip，用于内容建议，轻量级建议 |
2、演示
valcontext=LocalContext.currentBox(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){AssistChip(onClick={Toast.makeText(context,"Click Assist Chip",Toast.LENGTH_SHORT).show()},label={Text("Assist Chip")},leadingIcon={Icon(Icons.Filled.Settings,contentDescription="Icon Settings",Modifier.size(AssistChipDefaults.IconSize))})}varselectedbyremember{mutableStateOf(false)}Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){FilterChip(onClick={selected=!selected},label={Text("Filter Chip")},selected=selected,leadingIcon=if(selected){{Icon(imageVector=Icons.Filled.Done,contentDescription="Done",modifier=Modifier.size(FilterChipDefaults.IconSize))}}else{null},)}varenabledbyremember{mutableStateOf(true)}if(!enabled)returnBox(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){InputChip(onClick={enabled=!enabled},label={Text("Input Chip")},selected=enabled,avatar={Icon(Icons.Filled.Person,contentDescription="Localized description",Modifier.size(InputChipDefaults.AvatarSize))},trailingIcon={Icon(Icons.Default.Close,contentDescription="Localized description",Modifier.size(InputChipDefaults.AvatarSize))},)}valcontext=LocalContext.currentBox(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){SuggestionChip(onClick={Toast.makeText(context,"Click Suggestion Chip",Toast.LENGTH_SHORT).show()},label={Text("Suggestion Chip")})}