Android Jetpack Compose - PullToRefreshBox、RadioButton、DatePicker、DatePickerDialog、DateRangePicker
一、PullToRefreshBox
1、基本介绍
PullToRefreshBox 用于为可滚动内容（例如，LazyColumn）添加下拉刷新功能
只需把 PullToRefreshBox 包在外面，传一个加载状态和一个刷新回调，剩下的手势、动画、指示器都由它自动处理
funPullToRefreshBox(isRefreshing:Boolean,onRefresh:()->Unit,modifier:Modifier=Modifier,state:PullToRefreshState=rememberPullToRefreshState(),contentAlignment:Alignment=Alignment.TopStart,indicator:@ComposableBoxScope.()->Unit={Indicator(modifier=Modifier.align(Alignment.TopCenter),isRefreshing=isRefreshing,state=state)},content:@ComposableBoxScope.()->Unit){}| 参数 | 说明 |
|---|---|
| isRefreshing | 是否正在刷新 |
| onRefresh | 刷新回调 |
| modifier | 修饰符 |
| state | 状态 |
| contentAlignment | 内容对齐方式 |
| indicator | 刷新指示器 |
| content | 滚动内容 |
2、演示
varitems by remember{mutableStateOf(List(5){"第 $it 项"})}val scope=rememberCoroutineScope()varisRefreshing by remember{mutableStateOf(false)}PullToRefreshBox(modifier=Modifier.fillMaxSize(),isRefreshing=isRefreshing,onRefresh={isRefreshing=truescope.launch{delay(1500)items=List((1..10).random()){"新数据 $it"}isRefreshing=false}}){LazyColumn(modifier=Modifier.fillMaxSize(),contentPadding=PaddingValues(16.dp),verticalArrangement=Arrangement.spacedBy(8.dp)){items(items){item->Card(modifier=Modifier.fillMaxWidth(),colors=CardDefaults.cardColors(containerColor=MaterialTheme.colorScheme.surfaceVariant)){Text(text=item,modifier=Modifier.padding(16.dp),style=MaterialTheme.typography.bodyLarge)}}}}二、RadioButton
1、基本介绍
funRadioButton(selected:Boolean,onClick:(()->Unit)?,modifier:Modifier=Modifier,enabled:Boolean=true,colors:RadioButtonColors=RadioButtonDefaults.colors(),interactionSource:MutableInteractionSource?=null){}| 参数 | 说明 |
|---|---|
| selected | 是否选中 |
| onClick | 点击回调 |
| modifier | 修饰符 |
| enabled | 是否启用 |
| colors | 自定义颜色，通过RadioButtonDefaults.colors()配置 |
| interactionSource | 自定义交互状态反馈 |
2、演示
varselectedbyremember{mutableStateOf(false)}RadioButton(selected=selected,onClick={selected=true})varselectIndexbyremember{mutableStateOf(1)}Column(modifier=Modifier.fillMaxSize(),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){(1..3).forEach{index->Row(modifier=Modifier.fillMaxWidth().height(100.dp),verticalAlignment=Alignment.CenterVertically,horizontalArrangement=Arrangement.Center){RadioButton(modifier=Modifier.padding(end=16.dp),selected=selectIndex==index,onClick={selectIndex=index})Text(text="选项$index")}}}valradioOptions=listOf("选项 1","选项 2","选项 3")varselectedOptionbyremember{mutableStateOf(radioOptions[0])}Column(modifier=Modifier.fillMaxSize().selectableGroup(),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){radioOptions.forEach{option->Row(modifier=Modifier.fillMaxWidth().height(100.dp).selectable(selected=(selectedOption==option),onClick={selectedOption=option},role=Role.RadioButton),verticalAlignment=Alignment.CenterVertically,horizontalArrangement=Arrangement.Center){RadioButton(modifier=Modifier.padding(end=16.dp),selected=selectedOption==option,onClick=null,)Text(text=option)}}}三、DatePicker
funconvertMillisToDate(millis:Long):String{valformatter=SimpleDateFormat("yyyy-MM-dd",Locale.getDefault())returnformatter.format(Date(millis))}valcontext=LocalContext.currentvaldatePickerState=rememberDatePickerState()valselectedDate=datePickerState.selectedDateMillis?.let{convertMillisToDate(it)}?:""if(selectedDate.isNotBlank()){Toast.makeText(context,selectedDate,Toast.LENGTH_SHORT).show()}Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){DatePicker(state=datePickerState)}四、DatePickerDialog
funconvertMillisToDate(millis:Long):String{valformatter=SimpleDateFormat("yyyy-MM-dd",Locale.getDefault())returnformatter.format(Date(millis))}valdatePickerState=rememberDatePickerState()valshowDatePickerDialog=remember{mutableStateOf(false)}valselectedDate=remember{mutableStateOf("")}Box(modifier=Modifier.fillMaxSize()){if(selectedDate.value.isNotBlank()){Text(modifier=Modifier.align(Alignment.TopCenter),text=selectedDate.value)}Button(modifier=Modifier.align(Alignment.BottomCenter),onClick={showDatePickerDialog.value=true}){Text("选择日期")}if(!showDatePickerDialog.value)return@BoxdatePickerState.selectedDateMillis=nullDatePickerDialog(confirmButton={TextButton(onClick={showDatePickerDialog.value=falseselectedDate.value=datePickerState.selectedDateMillis?.let{convertMillisToDate(it)}?:""}){Text("确认")}},dismissButton={TextButton(onClick={showDatePickerDialog.value=falseselectedDate.value=""}){Text("取消")}},onDismissRequest={showDatePickerDialog.value=false},){DatePicker(state=datePickerState)}}五、DateRangePicker
funconvertMillisToDate(millis:Long):String{valformatter=SimpleDateFormat("yyyy-MM-dd",Locale.getDefault())returnformatter.format(Date(millis))}valcontext=LocalContext.currentvaldateRangePickerState=rememberDateRangePickerState()valselectedDateStart=dateRangePickerState.selectedStartDateMillis?.let{convertMillisToDate(it)}?:""valselectedDateEnd=dateRangePickerState.selectedEndDateMillis?.let{convertMillisToDate(it)}?:""if(selectedDateStart.isNotBlank()&&selectedDateEnd.isNotBlank()){Toast.makeText(context,"$selectedDateStart-$selectedDateEnd",Toast.LENGTH_SHORT).show()}Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){DateRangePicker(modifier=Modifier.fillMaxWidth().height(500.dp).padding(16.dp),state=dateRangePickerState)}