QML 使用PathView制作日期选择

最新推荐文章于 2024-01-18 11:16:29 发布
最新推荐文章于 2024-01-18 11:16:29 发布
阅读量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
    评论
专栏目录
92.qt qml-日期/日期时间/时间选择器(日历选择器)
抵抗时间扭曲，坚持做一件有意义的事
07-11 1941
QML日历组件我们之前移植过:67.qt quick-qml自定义日历组件(支持竖屏和横屏)_qml日历_诺谦的博客-CSDN博客但是该组件内部代码比较坑的就是全部使用自定义对象，导致性能不行，动画卡顿，并且不好加时间选择，所以本章我们重新学习，然后重构一个日期时间选择器，支持更改日期 或者 日期时间重构需要使用到Calendar类和样式类2.Calendar类介绍int,一周中各天的显示格式(在页眉中)。Locale.ShortFormat是默认的推荐格式。
qml实现简单的时间选择控件
08-02
qml实现简单的时间选择控件
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...
QML自定义的日历控件
zjgo007的专栏
08-31 1928
QML中提供了日历的控件，该文主要记录对日历控件的样式设置。
QML日期选择控件
zjgo007的专栏
01-07 2402
Qml中没有现成的日期时间选择控件，自己做了个，代码实现较为简单，没有过多需要介绍的，控件加载会自动获取当前日期，转动拨盘会根据当前年、月匹配当月天数，代码如下，直接复制到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来实现
Qt自定义DateTime控件--实现日历及时间选择器自定义
热门推荐
slowlytalk
07-06 1万+
怎样能够完全地实现一个不用其他控件就能正常使用的控件。最近尝试了下，使用了Qt的基础控件实现了一个完全自定义的日历控件，顺便改良了一下以前的时间选择器，测试效果还可以。终于实现了自定义的DateTime控件。......
自编Qml时间控件（实用）
12-21
笔者在开发产品时，由于使用的是qt4.8系列的版本，用qml编写一个闹钟，要选择时间，系统自带没有时间控件。这时候也需要使用这一个时间控件，这时候就必须要自己写一个时间控件，分享给大家。
QML 简单日历控件
12-25
一个qml的日历控件 很简单 没有定义很复杂的风格， 代码很简单，如果要改风格 修改spinner.qml也可以很容易做到
QML 实现日期范围选择框
龚建波
12-27 2232
日期范围选择只需要组合几个组件就行了，着实很简单，这里只是水一篇。 有两个要注意的地方，弹框的 closePolicy 可以设置为 Popup.CloseOnPressOutsideParent|Popup.CloseOnReleaseOutsideParent|Popup.CloseOnEscape，这样点击弹框关联的编辑框的时候弹框也消失了；另一点就是 js Date 对象是个引用类型，所以每次使用我都 new 一个，避免重复使用被影响。 实现效果：（日历弹框暂时用的 Control1 的日历...
QML开发的时间选择器的插件
hu_linux的博客
10-12 3364
简述 下面是用Qt去开发Android的时候，遇到时间选择器的需求，通过官方例子和自己的调整，做出了时间选择器界面开发。具体效果图如下： 封装一个滚轮的文件代码(TimeWheel.qml)： mport QtQuick 2.0 import "../" as G import Sparrow 1.0 Rectangle { property alias value
QML仿手机时间滚筒控件
TuringEvo专栏
07-04 3331
QML仿手机时间滚筒控件注意里面的图片使用自己的图片代替 使用自己封装的TimePathView.qml、TimePathItem.qml 控件\效果图 DatePage 使用代码 DatePage { id: datePage anchors.fill: parent show: true showProp
qml如何获取当前日期时间，以yyyy-mm-dd
weixin_43972388的博客
06-30 1162
在上述代码中，我们使用new Date()来创建一个表示当前日期和时间的Date对象，并将其通过Qt.formatDateTime()函数转换为指定格式的字符串。我们指定格式字符串为"yyyy-MM-dd"，即年份-月份-日期。在QML中，你可以使用Qt.formatDateTime()函数来获取当前日期和时间，并指定特定的日期时间格式。你可以根据需要修改日期的格式，例如改为"yyyy/MM/dd"或"dd/MM/yyyy"等形式。
Qt6自定义日历选择器
zmxzmx110的博客
01-18 758
Qt6自定义日历选择器
QML实现闹钟的时间选择器
qq_40770277的博客
04-15 671
Rectangle { width: frame.implicitWidth + 10 height: frame.implicitHeight + 10 function formatText(count, modelData) { var data = count === 12 ? modelData + 1 : modelData; ...
Qt QML实现时间日期选择控件
qq_28386947的博客
12-17 5187
先看图 打开界面，会自动获取到当前时间，根据月份确定日有几天，转动时间轴点击确定，打印输出当前时间。以下是该控件功能的主要代码 import QtQuick 2.0 import QtQuick.Extras 1.4 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.3 import QtQuick.Controls.Styles ...
qml pathview
06-25
### 回答1： QML是一种用于构建用户界面的语言，而QML PathView是QML中一个重要的视图组件。PathView可以使用户界面中的元素在一条路径上移动，它与ListView和GridView相似，但不同之处在于它不仅可以在水平和垂直方向上滚动，还可以在任意的路径上滚动。 在PathView中，路径可以是直线、弧线、三次或二次贝塞尔曲线、椭圆或自定义路径等，用户可以定义这些路径的起始点、终点、方向和曲率等参数，为用户界面中元素的移动提供了更多的自由度和灵活性。 PathView中的元素通常是由一个delegate定义的，可以将其理解为一个模板，用户可以根据自己的需要对delegate进行定制，包括元素的大小、颜色、位置和动画等属性。用户还可以选择路径上元素的排列方向，如从左到右、从右到左、从上到下、从下到上等。 PathView极大地丰富了QML中的视图组件，使用户界面变得更加生动和富有动感。它可以应用于用户界面中的各种场景，如图形化的时间轴、旋转菜单、流式列表等。在实际开发中，QML PathView可以帮助开发者快速构建具有创新和视觉效果的用户界面，提高用户体验和界面交互的质量。 ### 回答2： QML PathView是一个QML组件，它提供了一个沿着指定路径展示项目的视图。该组件可以实现拖动和滑动视图项目。QML PathView非常适合用于创建用户界面中的滑动选择器、菜单列表和时间轴等。 QML PathView可以用来展示不同类型的视图项目，如图片、文本、按钮等。它的工作方式是在组件内部创建一个模型视图，该视图会根据用户交互来调整相应的项目位置和大小。用户可以用鼠标或者触摸屏幕来滑动视图，这样就可以轻松地选择感兴趣的项目。 QML PathView组件中有三种不同类型的路径可供选择，包括直线、圆和贝塞尔曲线。在运用QML PathView时，我们需要指定可视化的项目数量，以及每个项目在路径上的位置和大小。我们还可以通过属性设置来控制项目的初始状态、动画效果和选择行为等。 总的来说，QML PathView是一个强大的QML组件，它可以在用户界面中实现各种各样的交互效果。通过使用它，我们可以轻松地创建漂亮、灵活和易用的应用程序。 ### 回答3： QML PathView是Qt Quick中一个非常有用的组件，它可以快速地创建一个可滚动的列表或视图，让用户能够通过手势或滚动条来浏览内容。PathView支持多种布局方式，可以让用户以多种形式来浏览内容，包括垂直、水平、环形等多种方式。 PathView使用一个Path来布局，可以根据Path的形状来设置内容的显示方式，这个Path可以是任意形状，包括直线、圆弧等等。同时，PathView还提供了许多自定义的选项，比如动画效果、边距、缩放等，使得开发者可以快速创建各种各样的视图。在开发中，PathView通常与ListModel或ArrayModel一起使用，用于将数据绑定到视图上。 在使用PathView时，需要注意一些性能问题。由于PathView默认会缓存所有的元素，如果元素过多，会造成内存开销过大，影响性能。因此，需要合理地设置PathView的一些属性，如缓存大小等，以避免性能问题。 总的来说，QML PathView是一个非常实用的组件，可以快速地创建各种类型的视图，可以使用户更加轻松地浏览内容，同时也提高了开发的效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值