Compose 可组合项 - DatePicker、DatePickerDialog

一、概念

一般是以对话框的形式呼出，DatePickerDialog 就是对 DatePicker 的一个简单对话框封装。

@Composable
fun DatePicker(
    state: DatePickerState,
    modifier: Modifier = Modifier,
    dateFormatter: DatePickerFormatter = remember { DatePickerFormatter() },
    dateValidator: (Long) -> Boolean = { true },
    title: (@Composable () -> Unit)? = {
        DatePickerDefaults.DatePickerTitle(
            state,
            modifier = Modifier.padding(DatePickerTitlePadding)
        )
    },
    headline: (@Composable () -> Unit)? = {
        DatePickerDefaults.DatePickerHeadline(
            state,
            dateFormatter,
            modifier = Modifier.padding(DatePickerHeadlinePadding)
        )
    },
    showModeToggle: Boolean = true,
    colors: DatePickerColors = DatePickerDefaults.colors(

        todayDateBorderColor = Color.Red        //默认选中的当天日期的边框色

        selectedDayContentColor = Color.Red        //选中的文字颜色

        selectedDayContainerColor  = Color.Red        //选中的填充颜色

    )
)

@Composable
fun DatePickerDialog(
    onDismissRequest: () -> Unit,        //关闭对话框回调
    confirmButton: @Composable () -> Unit,        //确认按钮
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,        //取消按钮
    shape: Shape = DatePickerDefaults.shape,
    tonalElevation: Dp = DatePickerDefaults.TonalElevation,
    colors: DatePickerColors = DatePickerDefaults.colors(),
    properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false),        //对话框配置，详见Dialog
    content: @Composable ColumnScope.() -> Unit        //传入一个DatePicker
)

输入模式选择模式

二、基本使用

2.1 获取状态

2.1.1 单个日期选择 rememberDatePickerState()

@Composable
fun rememberDatePickerState(
    @Suppress("AutoBoxing") initialSelectedDateMillis: Long? = null,        //默认选中的日期
    @Suppress("AutoBoxing") initialDisplayedMonthMillis: Long? = initialSelectedDateMillis,        //默认显示的月份
    yearRange: IntRange = DatePickerDefaults.YearRange,        //限制选择的年份范围，如 2000..2100
    initialDisplayMode: DisplayMode = DisplayMode.Picker        //选择模式Picker、输入模式Input
): DatePickerState 

2.1.2 范围日期选择 rememberDateRangePickerState()

@Composable
fun rememberDateRangePickerState(
    @Suppress("AutoBoxing") initialSelectedStartDateMillis: Long? = null,        //起始日期
    @Suppress("AutoBoxing") initialSelectedEndDateMillis: Long? = null,        //结束日期
    @Suppress("AutoBoxing") initialDisplayedMonthMillis: Long? =
        initialSelectedStartDateMillis,        //默认显示的月份（如果起始日期没指定就默认是当月）
    yearRange: IntRange = DatePickerDefaults.YearRange,        //允许选择的年份，如 2000..2100
    initialDisplayMode: DisplayMode = DisplayMode.Picker        //选择模式Picker、输入模式Input
): DateRangePickerState

2.1.3 自定义可选择日期 selectableDates

Compose Material3 1.2.0-alpha02 及其以上版本，提供了一个 selectableDates 参数，可以在其中完全自定义可以选择的日期。

val datePickerState = rememberDatePickerState(selectableDates = object : SelectableDates {// 禁止选择周末（周六和周日）override fun isSelectableDate(utcTimeMillis: Long): Boolean {return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {val dayOfWeek = Instant.ofEpochMilli(utcTimeMillis).atZone(ZoneId.of("UTC")).toLocalDate().dayOfWeekdayOfWeek != DayOfWeek.SUNDAY && dayOfWeek != DayOfWeek.SATURDAY} else {val calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"))calendar.timeInMillis = utcTimeMilliscalendar[Calendar.DAY_OF_WEEK] != Calendar.SUNDAY &&calendar[Calendar.DAY_OF_WEEK] != Calendar.SATURDAY}}// 只允许选择2023年以前override fun isSelectableYear(year: Int): Boolean {return year > 2022}})

2.2 DatePicker

val datePickerState = rememberDatePickerState()
DatePicker(state = datePickerState)
Text("当前选中日期的时间戳 ${datePickerState.selectedDateMillis ?: "没有选择"}")

2.3 DatePickerDialog

var isOpenDialog by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()
val sdf = remember { SimpleDateFormat("yyy-MM-dd") }if (isOpenDialog) {DatePickerDialog(onDismissRequest = { isOpenDialog = false},colors = DatePickerDefaults.colors(containerColor = AppColors.White),   //背景色（这个在下面的DatePicker中设置无效）confirmButton = {Text(modifier = Modifier.clickableNoRipple {//拿到的是时间戳，需要格式化val date = datePickerState.selectedDateMillisif (date != null) {onValueChange(sdf.format(date))isDefaultValue = false}isOpenDialog = false},text = "确定",)},dismissButton = {Text(modifier = Modifier.clickableNoRipple { isOpenDialog = false },text = "取消")}) {DatePicker(state = datePickerState,colors = DatePickerDefaults.colors(todayDateBorderColor = AppColors.Primary,   //默认选中的当天日期的边框色selectedDayContentColor = AppColors.White,  //选中的文字颜色selectedDayContainerColor = AppColors.Primary,  //选中的填充颜色))}
}

三、封装

3.1 单按钮时间选择对话框

​

@Preview
@Composable
private fun SingleButtonDatePickerPreView() {var value by remember { mutableStateOf("选择时间") }SingleButtonDatePickerView(value = value,onValueChange = { value = it },)
}@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SingleButtonDatePickerView(modifier: Modifier = Modifier,value: String = "选择时间",onValueChange: (String) -> Unit,borderColor: Color = AppColors.Hint,
) {var isOpenDialog by remember { mutableStateOf(false) }var isDefaultValue by remember { mutableStateOf(true) }val datePickerState = rememberDatePickerState()val sdf = remember { SimpleDateFormat("yyy-MM-dd") }Row(modifier = modifier.height(AppDimens.heightButton).border(width = 1.dp,color = borderColor,shape = RoundedCornerShape(AppDimens.radius)).padding(horizontal = AppDimens.paddingContent).clickableNoRipple { isOpenDialog = true },verticalAlignment = Alignment.CenterVertically,horizontalArrangement = Arrangement.SpaceBetween) {Text(text = value,maxLines = 1,color = if(isDefaultValue) AppColors.Hint else AppColors.Black,fontSize = AppDimens.textPrimary,)Icon(modifier = Modifier.padding(start = 5.dp),imageVector = Icons.Default.CalendarMonth,contentDescription = null,tint = AppColors.Hint)}if (isOpenDialog) {DatePickerDialog(onDismissRequest = { isOpenDialog = false},colors = DatePickerDefaults.colors(containerColor = AppColors.White),   //背景色（这个在下面的DatePicker中设置无效）confirmButton = {Text(modifier = Modifier.clickableNoRipple {val date = datePickerState.selectedDateMillisif (date != null) {onValueChange(sdf.format(date))isDefaultValue = false} else {isDefaultValue = true}isOpenDialog = false}.padding(end = 20.dp),text = "确定",color = AppColors.Primary,fontSize = AppDimens.textTitle)},dismissButton = {Text(modifier = Modifier.clickableNoRipple {isOpenDialog = false}.padding(end = 20.dp),text = "取消",color = AppColors.textGray,fontSize = AppDimens.textTitle)}) {DatePicker(state = datePickerState,colors = DatePickerDefaults.colors(todayDateBorderColor = AppColors.Primary,   //默认选中的当天日期的边框色selectedDayContentColor = AppColors.White,  //选中的文字颜色selectedDayContainerColor = AppColors.Primary,  //选中的填充颜色))}}
}

3.2 双按钮时间选择对话框

​

@Preview
@Composable
private fun TwoButtonDatePickerPreview() {var startDate by remember { mutableStateOf("开始时间") }var endDate by remember { mutableStateOf("结束时间") }TwoButtonDatePickerView(startDate = startDate,endDate = endDate,onStartChange = { startDate = it },onEndChange = { endDate = it },)
}@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TwoButtonDatePickerView(modifier: Modifier = Modifier,startDate: String = "开始时间",endDate: String = "结束时间",onStartChange: (String) -> Unit,onEndChange: (String) -> Unit,borderColor: Color = AppColors.Hint,
) {var isOpenStartDialog by remember { mutableStateOf(false) }var isOpenEndDialog by remember { mutableStateOf(false) }val startDatePickerState = rememberDatePickerState()val endDatePickerState = rememberDatePickerState()var isStartDateDefault by remember { mutableStateOf(true) }var isEndDateDefault by remember { mutableStateOf(true) }val sdf = remember { SimpleDateFormat("yyy-MM-dd") }Row(modifier = modifier.height(AppDimens.heightButton).border(width = 1.dp,color = borderColor,shape = RoundedCornerShape(AppDimens.radius)).padding(horizontal = AppDimens.paddingContent),verticalAlignment = Alignment.CenterVertically,) {Text(modifier = Modifier.clickableNoRipple { isOpenStartDialog = true },text = startDate,color = if (isStartDateDefault) AppColors.Hint else AppColors.Black,maxLines = 1,fontSize = AppDimens.textPrimary)Icon(modifier = Modifier.size(25.dp).padding(horizontal = 5.dp),painter = painterResource(id = R.drawable.icon_arrow_right),contentDescription = null,tint = AppColors.Hint)Text(modifier = Modifier.clickableNoRipple { isOpenEndDialog = true },text = endDate,color = if (isEndDateDefault) AppColors.Hint else AppColors.Black,maxLines = 1,fontSize = AppDimens.textPrimary)Icon(modifier = Modifier.padding(start = 5.dp),imageVector = Icons.Default.CalendarMonth,contentDescription = null,tint = AppColors.Hint)}if (isOpenStartDialog) {DatePickerDialog(onDismissRequest = { isOpenStartDialog = false},colors = DatePickerDefaults.colors(containerColor = AppColors.White),confirmButton = {Text(modifier = Modifier.clickableNoRipple {val date = startDatePickerState.selectedDateMillisif (date != null) {onStartChange(sdf.format(date))isStartDateDefault = false} else {isStartDateDefault = true}isOpenStartDialog = false}.padding(end = 20.dp),text = "确定",color = AppColors.Primary,fontSize = AppDimens.textTitle)},dismissButton = {Text(modifier = Modifier.clickableNoRipple {isOpenStartDialog = false}.padding(end = 20.dp),text = "取消",color = AppColors.textGray,fontSize = AppDimens.textTitle)}) {DatePicker(state = startDatePickerState,colors = DatePickerDefaults.colors(todayDateBorderColor = AppColors.Primary,selectedDayContentColor = AppColors.White,selectedDayContainerColor = AppColors.Primary,))}}if (isOpenEndDialog) {DatePickerDialog(onDismissRequest = { isOpenEndDialog = false},colors = DatePickerDefaults.colors(containerColor = AppColors.White),confirmButton = {Text(modifier = Modifier.clickableNoRipple {val date = endDatePickerState.selectedDateMillisif (date != null) {onEndChange(sdf.format(date))isEndDateDefault = false} else {isEndDateDefault = true}isOpenEndDialog = false}.padding(end = 20.dp),text = "确定",color = AppColors.Primary,fontSize = AppDimens.textTitle)},dismissButton = {Text(modifier = Modifier.clickableNoRipple {isOpenEndDialog = false}.padding(end = 20.dp),text = "取消",color = AppColors.textGray,fontSize = AppDimens.textTitle)}) {DatePicker(state = endDatePickerState,colors = DatePickerDefaults.colors(containerColor = AppColors.White,todayDateBorderColor = AppColors.Primary,selectedDayContentColor = AppColors.White,selectedDayContainerColor = AppColors.Primary,))}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/29130.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用MySQL

使用MySQL

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 1 下载安装MySQL MySQL是一款开源的数据库软件，由于其免费特性得到了全世界用户的喜爱，是目前使用人数最多的数据库。下面将…
阅读更多...
Swarm 集群管理

Swarm 集群管理

Swarm 集群管理 简介 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机。 Docker Swarm 提供了标准的 Docker API，所有任何已经与 Docker 守护程序通信的工具都可以使用 Swarm 轻松地扩展到多个主机。 支持的工具包括但不限…
阅读更多...
使用 Nstbrowser 管理多个帐户 - 2024 年最佳反检测浏览器

使用 Nstbrowser 管理多个帐户 - 2024 年最佳反检测浏览器

每个人一定都看过那些房间里全是窃听器的老间谍电影，对吧？现在这些电影可能看起来有点好笑，但互联网并没有好到哪里去！ 事实上，每个你打开的页面在你浏览时都在被监控！此外，当你管理多个账户时…
阅读更多...
Rust 开发搜索引擎 Quickwit 替代ES，成本降低 10 倍，查询亚秒级别！

Rust 开发搜索引擎 Quickwit 替代ES，成本降低 10 倍，查询亚秒级别！

一、Quickwit 概述 Quickwit 它是云存储上最快的搜索引擎，它非常适合用于可观察性的云原生搜索引擎，如日志、跟踪以及即将推出的指标。同时也是 Datadog、Elasticsearch、Loki 和 Tempo 的开源替代方案。 二、Quickwit 功能 全文搜索和聚合查询&#…
阅读更多...
C++语法13 单分支结构的相关问题详解

C++语法13 单分支结构的相关问题详解

一、奇偶数问题 要判断一个数是否是偶数，只要判断这个数字能不能被2整除即可。如果一个数字a除以2，没有余数，那么就是偶数；如果除以2有余数，那么就是奇数。 if(a%20) a是偶数 if(a%21) a是奇数 训练&#xff1…
阅读更多...
LangChain-ChatGLM本地搭建|报错合集（win10）

LangChain-ChatGLM本地搭建|报错合集（win10）

安装过程 1. 创建虚拟环境 conda create -n langchain-chatglm python3.10 conda activate langchain-chatglm2. 部署 langchain-ChatGLM git clone https://github.com/imClumsyPanda/langchain-ChatGLMpip3 install -r requirements.txt pip3 install -U gradio pip3 inst…
阅读更多...
05-5.4.1 树的存储结构

05-5.4.1 树的存储结构

👋 Hi, I’m Beast Cheng 👀 I’m interested in photography, hiking, landscape… 🌱 I’m currently learning python, javascript, kotlin… 📫 How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…
阅读更多...
springboot宠物领养系统-计算机毕业设计源码07863

springboot宠物领养系统-计算机毕业设计源码07863

摘 要 21世纪的今天，随着社会的不断发展与进步，人们对于信息科学化的认识，已由低层次向高层次发展，由原来的感性认识向理性认识提高，管理工作的重要性已逐渐被人们所认识，科学化的管理，使信息存…
阅读更多...
4. Revit API UI 之 Ribbon（界面）

4. Revit API UI 之 Ribbon（界面）

4. Revit API UI 之 Ribbon（界面） 第二篇中，我们提到了IExternalApplication，该接口需要实现两个方法：Revit启动时调用的OnStartup 方法，和Revit关闭时调研的OnShutdown 方法。文中还给了个例子&#xff0…
阅读更多...
为什么idea总是提示将内部类设置为static

为什么idea总是提示将内部类设置为static

在写一些内部类的时候，Idea总是提示要设置为static，你知道为什么吗 在Java中，内部类可以被声明为static，这种内部类称为静态内部类（Static Nested Class）。静态内部类和非静态内部类有显著的区别&#xf…
阅读更多...
mybatis之特殊SQL的执行

mybatis之特殊SQL的执行

1.1模糊查询 尝试&#xff1a; //模糊查询用户 List<User> getUserByLike(Param("mohu") String mohu);<select id"getUserByLike" resultType"user">select * from user where username like %#{mohu}% </select>Test publ…
阅读更多...
普林斯顿大学教授终于把算法整理成图解笔记

普林斯顿大学教授终于把算法整理成图解笔记

普林斯顿大学教授终于把算法整理成图解笔记了&#xff01;&#xff01;&#xff01; 这些年虽然学到的编程知识越来越多&#xff0c;但是我对算法却始终没搞明白&#xff0c;直到偶然间看到这份笔记&#xff0c;我才认识到这些概念是多么简单。 对于很多刚入门的小伙伴来说&am…
阅读更多...
如何让视频有高级感 高级感视频制作方法 高级感视频怎么剪 会声会影视频剪辑制作教程 会声会影中文免费下载

如何让视频有高级感 高级感视频制作方法 高级感视频怎么剪 会声会影视频剪辑制作教程 会声会影中文免费下载

高质量视频通常具有清晰的画面、优质的音频和令人印象深刻的视觉效果。这篇文章来了解如何让视频有高级感&#xff0c;高级感视频制作方法。 一、如何让视频有高级感 要让视频有高级感&#xff0c;要注意以下几个要点&#xff1a; 1、剧本和故事性&#xff1a;一个好的剧本和…
阅读更多...
建筑工程软件Revit中复杂大模型如何实现Web端轻量化？| HOOPS技术应用

建筑工程软件Revit中复杂大模型如何实现Web端轻量化？| HOOPS技术应用

建筑信息模型&#xff08; BIM&#xff09;技术在建筑工程中扮演着越来越重要的角色&#xff0c;而Autodesk Revit作为主流的BIM软件&#xff0c;被广泛应用于设计、施工和管理。然而&#xff0c;Revit生成的复杂大模型常常由于数据量庞大而难以直接在Web端展示和操作。这时&am…
阅读更多...
MySQL 数据库 Navicat Premium 16.01 安装教程

MySQL 数据库 Navicat Premium 16.01 安装教程

MySQL 数据库 Navicat Premium 16.01 安装教程 目录 MySQL 数据库 Navicat Premium 16.01 安装教程前言安装步骤同意协议选择安装目录桌面快捷方式安装正在安装安装完成 步骤获取 前言 MySQL数据库管理用Navicat更加方便&#xff0c;可视化效果更好&#xff0c;今天给大家带来…
阅读更多...
dp练习2

dp练习2

如何分析这个题目呢&#xff0c;要想着当前的最优解只和前面的最优解有关 class Solution { public:int numSquares(int n) {vector<int> f(n 1);for (int i 1; i < n; i) {int minn INT_MAX;for (int j 1; j * j < i; j) {minn min(minn, f[i - j * j]);}f[…
阅读更多...
计算机组成原理（四）Cache存储器

计算机组成原理（四）Cache存储器

文章目录 Cache存储器的基本原理cache命中率、平均访问时间、效率地址映射全相联映射直接映射组相联映射 查找算法cache 存储器替换策略cache 存储器-写操作策略习题 Cache存储器的基本原理 Cache是一种高速缓冲寄存器&#xff0c;是为了解决CPU和主存之间速度不匹配而采用的一…
阅读更多...
树莓派4B_OpenCv学习笔记6:OpenCv识别已知颜色_运用掩膜

树莓派4B_OpenCv学习笔记6:OpenCv识别已知颜色_运用掩膜

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 学了这些OpenCv的理论性知识&#xff0c;不进行实践实在…
阅读更多...
qss实现登录界面美化

qss实现登录界面美化

qss实现登录界面美化 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 去掉头部this->setWindowFlag(Qt::FramelessWindowHint);// 去掉空白部分th…
阅读更多...
深度学习训练——batch_size参数设置过大反而训练更耗时的原因分析

深度学习训练——batch_size参数设置过大反而训练更耗时的原因分析

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023