QML 使用PathView制作日期选择

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
    评论
### 回答1: QML是一种用于构建用户界面的语言,而QML PathViewQML中一个重要的视图组件。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 PathViewQt 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、付费专栏及课程。

余额充值