QML 使用PathView制作日期选择

最新推荐文章于 2022-07-06 21:46:31 发布
最新推荐文章于 2022-07-06 21:46:31 发布
阅读量545 收藏 3
点赞数 1
分类专栏： QML 文章标签： QT PathView 日历 日期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43193739/article/details/99706798
版权

QML 使用PathView制作日期选择

先看效果

效果图
可以实现切换月份时日期天数增加减少，润年时2月份设置29天，源码很简单

///准备部分
           ListModel{
                id: listmodel_year
                ListElement{yname:"2019"}    ListElement{yname:"2020"}    ListElement{yname:"2021"}
            }
            Component{
                id: com_delegate_year
                Column{
                    id: wrapper_year
                    Text {
                        id: nameText
                        text: yname
                        color: wrapper_year.PathView.isCurrentItem ? "#14c0f5" : "#dcdcdc"
                    }
                }
            }
            ListModel{
                id:listmodel_start_month
                ListElement{startmname:"01"}  ListElement{startmname:"02"}  ListElement{startmname:"03"}  ListElement{startmname:"04"}  ListElement{startmname:"05"}
                ListElement{startmname:"06"}  ListElement{startmname:"07"}  ListElement{startmname:"08"}  ListElement{startmname:"09"}  ListElement{startmname:"10"}
                ListElement{startmname:"11"}  ListElement{startmname:"12"}
            }
            Component{
                id: com_delegate_start_month
                Column{
                    id: wrapper_start_month
                    Text {
                        id: txt_home_date_start_month
                        text: startmname
                        color: wrapper_start_month.PathView.isCurrentItem ? "#14c0f5" : "#dcdcdc"
                    }
                }
            }
            ListModel{
                id:listmodel_stop_month
                ListElement{stopmname:"01"}  ListElement{stopmname:"02"}  ListElement{stopmname:"03"}  ListElement{stopmname:"04"}  ListElement{stopmname:"05"}
                ListElement{stopmname:"06"}  ListElement{stopmname:"07"}  ListElement{stopmname:"08"}  ListElement{stopmname:"09"}  ListElement{stopmname:"10"}
                ListElement{stopmname:"11"}  ListElement{stopmname:"12"}
            }
            Component{
                id: com_delegate_stop_month
                Column{
                    id: wrapper_stop_month
                    Text {
                        id: txt_home_date_stop_month
                        text: stopmname
                        color: wrapper_stop_month.PathView.isCurrentItem ? "#14c0f5" : "#dcdcdc"
                    }
                }
            }
            ListModel{
                id: listmodel_start_day
                ListElement{startdname:"01"}    ListElement{startdname:"02"}    ListElement{startdname:"03"}    ListElement{startdname:"04"}    ListElement{startdname:"05"}
                ListElement{startdname:"06"}    ListElement{startdname:"07"}    ListElement{startdname:"08"}    ListElement{startdname:"09"}    ListElement{startdname:"10"}
                ListElement{startdname:"11"}    ListElement{startdname:"12"}    ListElement{startdname:"13"}    ListElement{startdname:"14"}    ListElement{startdname:"15"}
                ListElement{startdname:"16"}    ListElement{startdname:"17"}    ListElement{startdname:"18"}    ListElement{startdname:"19"}    ListElement{startdname:"20"}
                ListElement{startdname:"21"}    ListElement{startdname:"22"}    ListElement{startdname:"23"}    ListElement{startdname:"23"}    ListElement{startdname:"25"}
                ListElement{startdname:"26"}    ListElement{startdname:"27"}    ListElement{startdname:"28"}    ListElement{startdname:"29"}    ListElement{startdname:"30"}
                ListElement{startdname:"31"}
            }
            Component{
                id: com_delegate_start_day
                Column{
                    id: wrapper_start_day
                    Text {
                        id: txt_home_date_start_day
                        text: startdname
                        color: wrapper_start_day.PathView.isCurrentItem ? "#14c0f5" : "#dcdcdc"
                    }
                }
            }
///显示部分
        Rectangle{//起
                id: rec_home_date_start
                width: btn_home_premonth.width / 2
                height: width * 5/2 - 3
                anchors.top: parent.top
                anchors.topMargin: 3
                anchors.left: parent.left
                anchors.leftMargin: 3
                Image {
                    source: "images/label1_2.png"
                    anchors.fill: parent
                }
                Text {
                    text: qsTr("起")
                    anchors.centerIn: parent
                }
            }
            Rectangle{//起始年
                id:rec_home_date_start_year
                width: btn_home_premonth.width
                height: width / 2
                anchors.left: rec_home_date_start.right
                anchors.leftMargin: 3
                y:(rec_home_date_start.height - height) / 2 + 5
                Image {
                    source: "images/calendar.png"
                    anchors.fill: parent
                }
                PathView{
                    id: pathview_start_year
                    anchors.fill: parent
                    model:listmodel_year
                    delegate: com_delegate_year
                    pathItemCount: 3
                    preferredHighlightBegin: 0.5
                    preferredHighlightEnd: 0.5
                    path: Path{
                        startX: parent.width / 10
                        startY: -30
                        PathLine{x:parent.width / 10; y:25}
                        PathLine{x:parent.width / 10; y:45}
                        PathLine{x:parent.width / 10; y:65}
                    }
                    onCurrentIndexChanged: {
                        if ((currentIndex + 2019)%4 == 0)//润年
                        {
                            if (pathview_start_month.currentIndex == 1 && listmodel_start_day.count == 28)//2月
                            {
                                listmodel_start_day.insert(28, {startdname:"29"})
                            }
                        }else{
                            if (pathview_start_month.currentIndex == 1 && listmodel_start_day.count == 29)//2月
                            {
                                listmodel_start_day.remove(28)
                            }
                        }
                    }
                }
            }
            Rectangle{//起始年label
                id: label_home_date_start_year
                height: rec_home_date_start_year.height
                width: height
                anchors.left: rec_home_date_start_year.right
                anchors.top: rec_home_date_start_year.top
                Text {
                    text: qsTr("年")
                    anchors.centerIn: parent
                }
            }
            Rectangle{//起始月
                id: rec_home_date_start_month
                height: rec_home_date_start_year.height
                width: height
                anchors.left: label_home_date_start_year.right
                anchors.top: label_home_date_start_year.top
                Image {
                    source: "images/calendar.png"
                    anchors.fill: parent
                }
                PathView{
                    id: pathview_start_month
                    anchors.fill: parent
                    model: listmodel_start_month
                    delegate: com_delegate_start_month
                    pathItemCount: 3
                    preferredHighlightBegin: 0.5
                    preferredHighlightEnd: 0.5
                    path: Path{
                        startX: parent.width / 20
                        startY: -30
                        PathLine{x:parent.width / 20; y:25}
                        PathLine{x:parent.width / 20; y:45}
                        PathLine{x:parent.width / 20; y:65}
                    }
                    onCurrentIndexChanged: {//
                        console.log("取余：  " + (pathview_start_year.currentIndex + 2019)%4)
                        if (currentIndex == 1)//2月
                        {//2月上下都为31天
                            if ((pathview_start_year.currentIndex + 2019)%4 == 0)//润年
                            {
                                listmodel_start_day.remove(30)//31日
                                listmodel_start_day.remove(29)//30日
                            }else{
                                listmodel_start_day.remove(30)//31日
                                listmodel_start_day.remove(29)//30日
                                listmodel_start_day.remove(28)//29日
                            }
                        }else if (currentIndex == 3 || currentIndex == 5 || currentIndex == 8 || currentIndex == 10){//4、6、9、11月，30天
                            listmodel_start_day.remove(30)//30天这些月份，之前之后的月份都是31天
                        }else if (currentIndex == 0 || currentIndex == 2 || currentIndex == 4 || currentIndex == 6 || currentIndex == 7 || currentIndex == 9 || currentIndex == 11){
                            //1、3、5、7、8、10、12月
                            if (listmodel_start_day.count == 28)
                            {
                                listmodel_start_day.insert(28, {startdname:"29"})
                                listmodel_start_day.insert(29, {startdname:"30"})
                                listmodel_start_day.insert(30, {startdname:"31"})
                            }else if (listmodel_start_day.count == 29){
                                listmodel_start_day.insert(29, {startdname:"30"})
                                listmodel_start_day.insert(30, {startdname:"31"})
                            }else if (listmodel_start_day.count == 30){
                                listmodel_start_day.insert(30, {startdname:"31"})
                            }
                        }
                    }
                }
            }
            Rectangle{//起始月label
                id: label_home_date_start_month
                height: rec_home_date_start_month.height
                width: height
                anchors.left: rec_home_date_start_month.right
                anchors.top: rec_home_date_start_month.top
                Text {
                    text: qsTr("月")
                    anchors.centerIn: parent
                }
            }
            Rectangle{//起始日
                id:rec_home_date_start_day
                height: rec_home_date_start_month.height
                width: height
                anchors.left: label_home_date_start_month.right
                anchors.top: label_home_date_start_month.top
                Image {
                    source: "images/calendar.png"
                    anchors.fill: parent
                }
                PathView{
                    id: pathview_start_day
                    anchors.fill: parent
                    model: listmodel_start_day
                    delegate: com_delegate_start_day
                    pathItemCount: 3
                    preferredHighlightBegin: 0.5
                    preferredHighlightEnd: 0.5
                    path: Path{
                        startX: parent.width / 20
                        startY: -30
                        PathLine{x:parent.width / 20; y:25}
                        PathLine{x:parent.width / 20; y:45}
                        PathLine{x:parent.width / 20; y:65}
                    }
                }
            }
            Rectangle{//起始月label
                id: label_home_date_start_day
                height: rec_home_date_start_day.height
                width: height
                anchors.left: rec_home_date_start_day.right
                anchors.top: rec_home_date_start_day.top
                Text {
                    text: qsTr("日")
                    anchors.centerIn: parent
                }
            }

效果就是开始的图那样了
附参考：
https://my.oschina.net/u/1170641/blog/285004?p={{page}}
https://blog.csdn.net/foruok/article/details/38060495
下面这个链接的效果更好
http://www.qter.org/portal.php?mod=view&aid=20
在这里插入图片描述

如来说法
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Qt Quick/QML入门到精通_专栏demo对应文章目录(目前50个左右demo/长期更新)
抵抗时间扭曲，坚持做一件有意义的事
09-01 1万+
自定义图标下拉列表框的效果如下所示:自定义三态按钮的效果如下所示:传送门:53.qt quick-自定义三态按钮、自定义图标下拉列表框_诺谦的博客-CSDN博客传送门:59.qt quick-qml调色板(颜色取色器)实现、自定义QQuickStyle样式_诺谦的博客-CSDN博客63.qt quick-QML侧边滑动栏(不需要任何图片资源,支持自定义左右方向和大小)_诺谦的博客-CSDN博客_qt实现好看侧边栏。...
QML自定义时间选择器
qq_38478961的博客
10-08 3191
在进行使用qml编程过程中，需要实现日期时间的选择。 但是qml官方只提供日期控件，因此自己定义了时间控件 注意 QtQuick 2.9不要降低版本 否则会有内部的信号处理器无法使用 import QtQuick 2.9 import QtQuick.Controls 2.3 Rectangle { property int hour: 0; property int minut...
Qt自定义DateTime控件--实现日历及时间选择器自定义
slowlytalk
07-06 1万+
怎样能够完全地实现一个不用其他控件就能正常使用的控件。最近尝试了下，使用了Qt的基础控件实现了一个完全自定义的日历控件，顺便改良了一下以前的时间选择器，测试效果还可以。终于实现了自定义的DateTime控件。......
QML仿手机时间滚筒控件
TuringEvo专栏
07-04 3328
QML仿手机时间滚筒控件注意里面的图片使用自己的图片代替 使用自己封装的TimePathView.qml、TimePathItem.qml 控件\效果图 DatePage 使用代码 DatePage { id: datePage anchors.fill: parent show: true showProp
自编Qml时间控件（实用）
12-21
笔者在开发产品时，由于使用的是qt4.8系列的版本，用qml编写一个闹钟，要选择时间，系统自带没有时间控件。这时候也需要使用这一个时间控件，这时候就必须要自己写一个时间控件，分享给大家。
QML用PathView实现轮播图
09-16
在QML中，PathView是一个强大的组件，它允许我们沿着一条路径显示和滚动数据模型的元素。在这个场景中，我们将讨论如何使用PathView来实现一个轮播图，这是一种常见的动态展示图像或内容的用户界面元素。 首先，...
QML之pathview
09-20
QML之PathView示例，
qmlpathview:基于QML PathView实现的一些效果
06-02
qmlpathview基于QML PathView实现的一些效果====================================== 这是QML实现的一个pathview示例，它是完全跨平台的，运行在Linux、OS X和Windows上。 它还可以在 iOS、Android、Wphone、Ubutun ...
qml时间滚筒控件-使用PathView来实现
最新发布
03-15
qml时间滚筒控件，使用PathView来实现
android日期选择弹出框
08-31
使用开源组件wheel实现日期选择弹出框，实现年，月，日滚动选择，通过回调将值返回。使用开源组件wheel实现日期选择弹出框，实现年，月，日滚动选择，通过回调将值返回。
QML 简单日历控件
12-25
一个qml的日历控件 很简单 没有定义很复杂的风格， 代码很简单，如果要改风格 修改spinner.qml也可以很容易做到
DateTimePicker 小tip
大眼
08-15 241
<br />      开发C#项目，碰到一个问题，如何让DateTImePicker显示日期和时间并加以修改。<br />     上网查了下资料，发现很多资料都提到设置它的kind属性，找不到。网上很多说法都是弄两个控件一个表示日期一个表示时间，个人认为控件能公然发布出来给大家用，应该不用这么笨的方法来实现这么一个很常用的功能。解决的方法很简单，如下：<br />     1、设置显示时间的格式。将Format属性设为Custom，CustomFormat属性设为yyyy-MM-dd  HH:mm:ss
DatePicker与TimePicker的使用
Angelica
01-11 1800
Android开发中经常会使用到日期选择器与时间选择器，接下来我就来总结一下 先贴一下项目结构图： MainActivity.class package com.pumasoft.selectdateandtimedome; import android.app.Activity; import android.content.Context; import android
QMUI Android使用
Angus博客
08-19 2743
管网： https://qmuiteam.com/android githubhttps://github.com/Tencent/QMUI_Android 腾讯的一款Android UI开源组件库， 功能列表：包含了很多UI使用 https://qmuiteam.com/android/documents/ Components Classes QMUIAnimationListView 使ListView支持添加/删除 Item 的动画，支持自定义动画效果。 QMUIBo...
Qml日历
zhengtianzuo的博客
11-01 1976
目前显示日历还没有QtQuick.Controls2, 只能用1显示 Calendar { anchors.centerIn: parent style: CalendarStyle { gridVisible: false dayDelegate: Rectangle { prope
mui自定义日期的起始时间为当前时间，只能选择当前之后的时间
热门推荐
肖肖肖丽珠的博客
06-16 3万+
我们如果想要预约什么。选择的日期肯定是从今天开始的，不可能选到之前的日期。这时候我们就需要限制，可供选择的时间啦。你想从当前的时刻开始。 mui的日期选择在下面弹出的。picker的插件 data-options='{"type":"datetime"}' class="btn mui-btn mui-btn-block">选择日期时间 ...
基于QML2.0的View之PathView
Esonpo的专栏
07-21 4137
最近想把多窗口聊天放到项目中，但是对于TabView这个在qml2.0里面出现的新东西，感觉还是蛮新颖，遂研究了下
qml pathview
06-25
PathView使用一个Path来布局，可以根据Path的形状来设置内容的显示方式，这个Path可以是任意形状，包括直线、圆弧等等。同时，PathView还提供了许多自定义的选项，比如动画效果、边距、缩放等，使得开发者可以快速...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值