9.1唐伯虎心糖logo庆生，甜蜜暴击，一起“糖”心过生日！

进度指示器

基本介绍进度指示器可以分为 2 种类型类型说明确定型准确显示已完成的进度不确定型持续动画显示不考虑进度进度指示器可以采用 2 种形式类型说明线性从左向右填充的水平条圆形笔画长度不断增加直到覆盖整个圆周的圆

基本使用varcurrentProgressbyremember{mutableFloatStateOf(0f)}varloadingbyremember{mutableStateOf(false)}valscoperememberCoroutineScope()Column(verticalArrangementArrangement.spacedBy(

dp),horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.fillMaxWidth().padding(

dp)){Button(onClick{scope.launch{loadingtruefor(iin

.

{delay(

currentProgressi.toFloat()/100}loadingfalse}},enabled!loading){Text(开始加载)}if(loading){LinearProgressIndicator(progress{currentProgress},modifierModifier.fillMaxWidth(),)}}varcurrentProgressbyremember{mutableFloatStateOf(0f)}varloadingbyremember{mutableStateOf(false)}valscoperememberCoroutineScope()Column(verticalArrangementArrangement.spacedBy(

dp),horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.fillMaxWidth().padding(

dp)){Button(onClick{scope.launch{loadingtruefor(iin

.

{delay(

currentProgressi.toFloat()/100}loadingfalse}},enabled!loading){Text(开始加载)}if(loading){CircularProgressIndicator(progress{currentProgress},)}}

不确定型进度指示器不确定型通过动画向用户指示正在进行处理但不会指定任何完成程度LinearProgressIndicator 或 CircularProgressIndicator 都可以创建为不确定指示器但不传入 progress 参数varloadingbyremember{mutableStateOf(false)}valscoperememberCoroutineScope()Column(verticalArrangementArrangement.spacedBy(

dp),horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.fillMaxWidth().padding(

dp)){Button(onClick{scope.launch{loadingtruefor(iin

.

{delay(

}loadingfalse}},enabled!loading){Text(开始加载)}if(loading){LinearProgressIndicator(modifierModifier.fillMaxWidth(),)}}varloadingbyremember{mutableStateOf(false)}valscoperememberCoroutineScope()Column(verticalArrangementArrangement.spacedBy(

dp),horizontalAlignmentAlignment.CenterHorizontally,modifierModifier.fillMaxWidth().padding(

dp)){Button(onClick{scope.launch{loadingtruefor(iin

.

{delay(

}loadingfalse}},enabled!loading){Text(开始加载)}if(loading){CircularProgressIndicator()}}

SegmentedButton

基本介绍SegmentedButton即分段按钮它可让用户从一组并排显示的选项中进行选择 SegmentedButton 有 2 种类型单选按钮可让用户选择一个选项多选按钮可让用户选择 2 到 5 个选项对于更复杂的选择或超过 5 个选项可以使用使用 Chip

演示varselectedIndexbyremember{mutableIntStateOf(

}valoptionslistOf(Day,Month,Week)Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center,){SingleChoiceSegmentedButtonRow{options.forEachIndexed{index,label-SegmentedButton(shapeSegmentedButtonDefaults.itemShape(indexindex,countoptions.size),selected(selectedIndexindex),onClick{selectedIndexindex},label{Text(label)})}}}valselectedOptionsremember{mutableStateListOf(false,false,false)}valoptionslistOf(Mail Outline,Call,Date Range)Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center,){MultiChoiceSegmentedButtonRow{options.forEachIndexed{index,label-SegmentedButton(shapeSegmentedButtonDefaults.itemShape(indexindex,countoptions.size),checkedselectedOptions[index],onCheckedChange{selectedOptions[index]it},label{when(label){Mail Outline-Icon(imageVectorIcons.Default.MailOutline,contentDescriptionMail Outline)Call-Icon(imageVectorIcons.Default.Call,contentDescriptionCall)Date Range-Icon(imageVectorIcons.Default.DateRange,contentDescriptionDate Range)}})}}}

Chip

基本介绍Chip 是一种小型交互组件它提供了快速、高效的交互方式例如操作、筛选等Chip 有如下 4 种类型类型说明AssistChip辅助型 Chip用于触发操作带图标的操作FilterChip筛选型 Chip用于筛选选项可选中 / 取消InputChip输入型 Chip用于实体输入可删除的实体SuggestionChip建议型 Chip用于内容建议轻量级建议

演示valcontextLocalContext.currentBox(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){AssistChip(onClick{Toast.makeText(context,Click Assist Chip,Toast.LENGTH_SHORT).show()},label{Text(Assist Chip)},leadingIcon{Icon(Icons.Filled.Settings,contentDescriptionIcon Settings,Modifier.size(AssistChipDefaults.IconSize))})}varselectedbyremember{mutableStateOf(false)}Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){FilterChip(onClick{selected!selected},label{Text(Filter Chip)},selectedselected,leadingIconif(selected)else{null},)}varenabledbyremember{mutableStateOf(true)}if(!enabled)returnBox(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){InputChip(onClick{enabled!enabled},label{Text(Input Chip)},selectedenabled,avatar{Icon(Icons.Filled.Person,contentDescriptionLocalized description,Modifier.size(InputChipDefaults.AvatarSize))},trailingIcon{Icon(Icons.Default.Close,contentDescriptionLocalized description,Modifier.size(InputChipDefaults.AvatarSize))},)}valcontextLocalContext.currentBox(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){SuggestionChip(onClick{Toast.makeText(context,Click Suggestion Chip,Toast.LENGTH_SHORT).show()},label{Text(Suggestion Chip)})}

扌喿辶畐的资料双男主-扌喿辶畐的资料双男主应用