QML仿手机时间滚筒控件

最新推荐文章于 2024-03-15 17:44:42 发布
最新推荐文章于 2024-03-15 17:44:42 发布
阅读量3.2k 收藏 11
点赞数 2
分类专栏： QT/QML 文章标签： 控件 qml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WMX843230304WMX/article/details/74340760
版权

QML仿手机时间滚筒控件

注意里面的图片使用自己的图片代替
使用自己封装的TimePathView.qml、TimePathItem.qml 控件
###\效果图

DatePage
这里写图片描述
####使用代码

    DatePage {
        id: datePage
        anchors.fill: parent
        show: true
        showPropertyChangesY:0
        hidePropertyChangesY:0
        onReturnPage:{
            if(ok){
                var currentDate = new Date()
                var hour = currentDate.getHours();
                var minute = currentDate.getMinutes();
                console.log(year,month,day,hour,minute);
            }
        }
    }

TimePage
这里写图片描述
####使用代码

    TimePage {
        id: timePage
        anchors.fill: parent
        show: true
        showPropertyChangesY:0
        hidePropertyChangesY:0
        hourModel24: true//24小时制度
        onReturnPage:{
            if(ok){
                var currentDate = new Date()
                var year = currentDate.getFullYear();
                var month = currentDate.getMonth();
                var day = currentDate.getDate();
                console.log(year,month+1,day,hour,minute);
            }
        }
    }

####实现代码 DatePage.qml

import QtQuick 2.0

import "qrc:/common/util.js" as Util
import "qrc:/common/"
import "qrc:/timeControl/"

AnimationItem {
    id:root

    property int  dateModelIndex : 0
    property int monthMaxDay : 30
    property int year: 0
    property int month: 0
    property int day: 0
    property int lockday: 0

    property string textColor:"white"
    property string highlightColor:"#0099ff"
    property int fontSize:30

    signal returnPage(bool ok)

    Rectangle{
        anchors.fill: parent
        color:"#000000"
        opacity:0.6//透明度为0.5
    }

    onYearChanged: {
        monthMaxDay = currentMonthMaxDay(year,month)
    }
    onMonthChanged: {
//        lockday = day;
//        dayPathView.initIndex = lockday -1;
        monthMaxDay = currentMonthMaxDay(year,month)
    }

    TimePathView{
        id:yearPathView
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: -200
        y:100
        width:200
        height:300
        order:true
        orderStartNum: 1970
        initIndex:year - 1970
        unitText:Util.lang(qsTr("年"))
        unitLeftMargin:-50
        model:130//yearModel
        onValueChanged: {
            year = value
        }
    }
    TimePathView{
        id:monthPathView
        anchors.horizontalCenter: parent.horizontalCenter
       // anchors.horizontalCenterOffset: 100
        y:100
        width:200
        height:300
        order:true
        orderStartNum: 1
        initIndex:month - 1
        unitText: Util.lang(qsTr("月"))
        unitLeftMargin:-70
        model:12
        onValueChanged: {
            month = value
        }

    }
    TimePathView{
        id:dayPathView
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 200
        y:100
        width:200
        height:300
        order:true
        orderStartNum: 1
        initIndex:day - 1
        unitText:Util.lang(qsTr("日"))
        unitLeftMargin:-70
        model:
        monthMaxDay ===28?28:
        monthMaxDay ===29?29:
        monthMaxDay ===30?30:
        monthMaxDay ===31?31:0

        onValueChanged: {
            day = value
        }
    }

    //---按钮
    Row{
        id:timeSettingColumn

        anchors.top: dayPathView.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 20
        spacing: 100

        Button{
            id:btnTime
            text:Util.lang(qsTr("确定"))
            pressedSource:  Util.fromTheme("Settings/setting_choose2.png")
            normalSource: Util.fromTheme("Settings/setting_choose.png")
            onClicked: {
                returnPage(true)
            }
        }
        Button{
            id:btnDate
            text:Util.lang(qsTr("取消"))
            pressedSource:  Util.fromTheme("Settings/setting_choose2.png")
            normalSource: Util.fromTheme("Settings/setting_choose.png")
            onClicked: {
               returnPage(false)
            }
        }
    }

//    //--初始化
    onShowChanged:  {
        if(show)
        {
            initTime()
            monthMaxDay = currentMonthMaxDay(year,month)
        }
    }

    function initTime(){
        var date = new Date;
        year = date.getFullYear()
        month = date.getMonth()+1
        day = date.getDate()

    }

    //--判断是否闰年
    function isLeapYear(year){
        var leap = false
        if(year%400==0||year%4==0&&year%100!=0)
            leap = true //是闰年
        else
            leap = false //不是闰年
        //console.log(year,"is leap year:",leap)
        return leap
    }

    //--判断大小月，2月不在判断范围内
    function isBigMonth(month){
        var bigMonth = false
        if(month !==4&&month !==6&&month !==9&&month !==11){
            bigMonth = true
        }else{
            bigMonth = false
        }
        //console.log("month is bigMonth:",bigMonth)
        return bigMonth
    }

    //--依据年、月判断最大日
    function currentMonthMaxDay(year,month){
        //是否2月?(闰年29，非闰28):(小月？30天:31天)
        var maxDay = 0
        if(month === 2){
            if(isLeapYear(year)){
                maxDay = 29
            }else{
                maxDay = 28
            }
        }else{
            if(isBigMonth(month)){
                maxDay = 31
            } else {
                maxDay = 30
            }
        }
        return maxDay
    }

}

####实现代码 TimePage.qml

import QtQuick 2.0

import "qrc:/common/util.js" as Util
import "qrc:/common/"
import "qrc:/timeControl/"


AnimationItem {
    id:root

    property bool  isAm:hour<12 //am pm
    property bool  hourModel24 : true
    property int hour: 0
    property int minute: 0
    property string textColor:"white"
    property string highlightColor:"#0099ff"
    property int fontSize:30

    signal returnPage(bool ok)

    Rectangle
    {
        anchors.fill: parent
        color:"#000000"
        opacity:0.6//透明度为0.5
    }

    Button{
        id:btntimeModel
        visible: !hourModel24
        anchors{
            verticalCenter: parent.verticalCenter
            verticalCenterOffset: -20
            horizontalCenter: parent.horizontalCenter
            horizontalCenterOffset: -300
        }

        text: isAm?Util.lang(qsTr("上午")):
                   Util.lang(qsTr("下午"))
        pressedSource:  Util.fromTheme("Settings/setting_choose2.png")
        normalSource: Util.fromTheme("Settings/setting_choose.png")
        onClicked: {
            // hour : 1 - 24
            var isAmValue =!isAm?0:1;
            hour = hourModel24?hour:(hour%12+isAmValue*12)
        }
    }

    TimePathView{
        id:hourPathView
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: -100
        y:100
        width:200
        height:300
        order:true
        orderStartNum: hourModel24?0:1
        initIndex: hourModel24?hour:(hour%12!==0?(hour%12 - 1):11)
        unitText: Util.lang(qsTr("时"))
        unitLeftMargin:-70
        model:  hourModel24?24:12
        onValueChanged: {
            var isAmValue =isAm?0:1;
            hour = hourModel24?value:(value%12+isAmValue*12)
        }
    }
    TimePathView{
        id:minutePathView
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 100
        y:100
        width:200
        height:300
        order:true
        orderStartNum: 0
        initIndex:minute
        unitText: Util.lang(qsTr("分"))
        unitLeftMargin:-70
        model:60
        onValueChanged: {
            minute = value
        }
    }

    //---按钮
    Row{
        id:timeSettingColumn
        anchors.top: hourPathView.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 30
        spacing: 100

        Button{
            id:btnTime
            text: Util.lang(qsTr("确定"))
            pressedSource:  Util.fromTheme("Settings/setting_choose2.png")
            normalSource: Util.fromTheme("Settings/setting_choose.png")
            onClicked: {
                returnPage(true);
            }
        }
        Button{
            id:btnDate
            text: Util.lang(qsTr("取消"))
            pressedSource:  Util.fromTheme("Settings/setting_choose2.png")
            normalSource: Util.fromTheme("Settings/setting_choose.png")
            onClicked: {
               returnPage(false)
            }
        }
    }

    onShowChanged:  {
        if(show)
        {
            initTime()
        }
    }

    function fix(num) {
        if ( num < 10) {
            return "0" + num;
        }else{
            return num;
        }
    }
    //初始化时间，控件跟随时间变化
    function initTime(){
        var currentDate = new Date()
        hour = currentDate.getHours()
        minute = currentDate.getMinutes()
        console.log(currentDate)

    }

}

###TimePathView.qml 代码如下

import QtQuick 2.0

Item {
    id: root

    property bool order: false//数字顺序列表
    property int orderStartNum: 1

    property int initIndex:0

    property alias model: myPathView.model
    property alias count: myPathView.count
    property alias unitText:unit.text

    signal valueChanged(var index,var value)

    property int fontSize:30
    property string textColor:"white"
    property string highlightColor:"#0099ff"
    property int unitLeftMargin:-50

    PathView{
        id:myPathView
        anchors.fill: parent
        currentIndex:initIndex
        delegate:TimePathItem{
            width:root.width/2
            height:root.height/myPathView.pathItemCount
            onSelected: {
                //--执行内部算法，寻找最短路径（时间开销依据处理器性能）
                //--在此过程中 currentIndex 值不确定，不可以用作处理
                myPathView.currentIndex = index

                //--发出信号
                var outValue = order?orderStartNum+index:
                                      myPathView.model[index];
                valueChanged(index,outValue);
            }
        }

        pathItemCount: 5;
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
        highlightRangeMode: PathView.StrictlyEnforceRange;

        //交互属性，支持拖动等……
        interactive: true
        //滑动速度
        maximumFlickVelocity:1000

        onMovementEnded: {
            //--发出信号
            //console.log("Math.cos(1/4) = "+Math.cos(1/4));
            var outValue = order?orderStartNum+myPathView.currentIndex:
                                  myPathView.model[myPathView.currentIndex];
            valueChanged(myPathView.currentIndex,outValue)
            //console.log("onMovementEnded ",myPathView.currentIndex)
            positionViewAtIndex(myPathView.currentIndex, PathView.Center)
        }

        path :pathVertical

        Path{//------------垂直变化------------
            id:pathVertical
            property int height: root.height
            startX: root.width/2

            PathLine { x: pathVertical.startX; y: pathVertical.startY; }
            PathAttribute { name: "iconZ"; value: 1 }
            PathAttribute { name: "iconScale"; value: 0.6 }
            PathAttribute { name: "iconOpacity"; value: 0.3 }
            PathAttribute { name: "iconAngle"; value: 80  }
            PathPercent { value: 0 }

            // start scaling up
            PathLine { x: pathVertical.startX; y: pathVertical.startY+ pathVertical.height * Math.cos(1/4); }
            PathAttribute { name: "iconZ"; value: 2 }
            PathAttribute { name: "iconScale"; value: 0.8 }
            PathAttribute { name: "iconOpacity"; value: 0.4 }
            PathAttribute { name: "iconAngle"; value: 50  }
            PathPercent { value: 1/8 }

            // middle point
            PathLine {
                x: pathVertical.startX;
                y: pathVertical.startY + pathVertical.height * Math.cos(1/4) ; }
            PathAttribute { name: "iconZ"; value: 5 }
            PathAttribute { name: "iconScale"; value: 1.0 }
            PathAttribute { name: "iconOpacity"; value:1.0 }
            PathAttribute { name: "iconAngle"; value: 0  }
            PathPercent { value: 4/8}

            // start scaling down
            PathLine { x:pathVertical.startX; y: pathVertical.startY + pathVertical.height *Math.cos(1/4); }
            PathAttribute { name: "iconZ"; value: 2 }
            PathAttribute { name: "iconScale"; value: 0.8}
            PathAttribute { name: "iconOpacity"; value: 0.4 }
            PathAttribute { name: "iconAngle"; value: -50  }
            PathPercent { value: 7/8 }

            // last point
            PathLine { x:  pathVertical.startX; y: pathVertical.startY + pathVertical.height*Math.cos(1/4); }
            PathAttribute { name: "iconZ"; value: 1 }
            PathAttribute { name: "iconScale"; value: 0.6 }
            PathAttribute { name: "iconOpacity"; value:0.3 }
            PathAttribute { name: "iconAngle"; value: -80  }
            PathPercent { value: 1}
            }

    }//PathView

    Text{
        id:unit
        anchors.verticalCenter: myPathView.verticalCenter
        anchors.verticalCenterOffset: -5
        anchors.left: myPathView.right
        anchors.leftMargin:unitLeftMargin
        //text:qsTr("年")
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        color:highlightColor
    }


}

###TimePathItem.qml 代码如下

import QtQuick 2.0

import "qrc:/common/util.js" as Util
import "qrc:/common/"
import "qrc:/timeControl/"
Item{//
    id:root

    scale: PathView.iconScale!==undefined?PathView.iconScale:1
    opacity: PathView.iconOpacity!==undefined?PathView.iconOpacity:1
    z:PathView.iconZ!==undefined?PathView.iconZ:1

    signal selected(int index);

    transform: Rotation {
        id: rotation

        origin.x: root.width/2
        origin.y: root.height/2
        axis.x: 1
        axis.y: 0
        axis.z: 0
        angle: root.PathView.iconAngle!==undefined?root.PathView.iconAngle:0
    }

    Text{
        id:timeText
        anchors.centerIn: parent
        text:order?Number(modelData)+orderStartNum:modelData
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        color: root.PathView.isCurrentItem ? highlightColor : textColor
    }

    MouseArea{
        id:itemMouseArea
        anchors.fill: parent

        onClicked: {
            root.selected(index)
        }
    }

}//Item
深圳市进化图灵智能科技有限公司
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
自编Qml时间控件（实用）
12-21
笔者在开发产品时，由于使用的是qt4.8系列的版本，用qml编写一个闹钟，要选择时间，系统自带没有时间控件。这时候也需要使用这一个时间控件，这时候就必须要自己写一个时间控件，分享给大家。
QML 自定义控件 时间滚筒控件
u013163634的博客
04-28 1094
QML 仿手机时间滚筒控件 效果：共3中模式 "Date" | "Time" |"DateTime" main.qml MouseArea{ anchors.fill: parent onClicked: { dlg.exec(Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")); } } DateTimeDialog{ ...
QML时间滚筒控件
最新发布
u013142545的博客
03-15 173
qml时间滚筒控件
qml 类似移动端时间设置控件
01-07
qml实现一个类似手机端闹钟或其它时间设置控件。可以用ListView实现其效果，但是QML提供有现成的控件可以用，所以要实现这个效果更方便。 博客地址：https://blog.csdn.net/luoyayun361
qml时间滚筒控件-使用PathView来实现
03-15
qml时间滚筒控件，使用PathView来实现
仿手机滑动按钮QML文件
11-14
仿照手机滑动按钮做的qml文件,适合新手理解学习,简单易懂.还可以添加动画加以改进.
QtQuick 日期滚动控件
wanghualin033的博客
10-03 2802
在用QtQuick来编写时间滚动控件有两种方式，一种是用PathView设置路径点，另一种则用用ListView。本次采用ListView来制作时间滚动控件。 ListView可以直接驱动鼠标滚轮和触屏点击，非常有效。Hightlight控件在delegate控件的下面，如果delegate控件的 纯文字，那么文字会显示在Highlight控件的上面，展示出文字和选中的背景。如果deleg
QML 使用PathView制作日期选择
sdustzk的博客
08-18 529
QML 使用PathView制作日期选择 先看效果 可以实现切换月份时日期天数增加减少，润年时2月份设置29天，源码很简单 ///准备部分 ListModel{ id: listmodel_year ListElement{yname:"2019"} ListElement{yname:"2020"} ...
qml写一个时间滑动组建
weixin_35748962的博客
02-11 71
QML是一种用于构建图形用户界面的语言，可以通过定义自定义组件来扩展它的功能。下面是一个简单的时间滑块组件的例子： import QtQuick2.15 import QtQuick.Controls 2.15 Slider { id: timeSlider orientation: Qt.Horizontal value: 50 stepSize: 1 ...
qml实现简单的时间选择控件
cxc233的博客
08-02 6276
qml实现简单的时间选择控件 --------------------------------------------------------------------------------------------------- 在公司用qml写 一个app时需要一个时间控件发现qml中的日历太累赘了，然后就自己写了个精简点的时间选择控件 具体效果如下 可以选择是否需要年，同时通过自定
QML事件处理之鼠标事件（MouseEvent）和滚轮事件（WheelEvent）
kingzhou_的博客
12-05 2532
鼠标事件和滚轮事件
QML完全模仿飞书日程界面（三）周的部分
weixin_39039435的博客
09-05 438
qml 模仿日程，一周的部分
QML开发的时间选择器的插件
hu_linux的博客
10-12 3321
简述 下面是用Qt去开发Android的时候，遇到时间选择器的需求，通过官方例子和自己的调整，做出了时间选择器界面开发。具体效果图如下： 封装一个滚轮的文件代码(TimeWheel.qml)： mport QtQuick 2.0 import "../" as G import Sparrow 1.0 Rectangle { property alias value
Qt QML实现时间日期选择控件
qq_28386947的博客
12-17 4974
先看图 打开界面，会自动获取到当前时间，根据月份确定日有几天，转动时间轴点击确定，打印输出当前时间。以下是该控件功能的主要代码 import QtQuick 2.0 import QtQuick.Extras 1.4 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.3 import QtQuick.Controls.Styles ...
QML_滚动控件Scroll
weixin_50183638的博客
06-11 1481
QML_滚动控件Scroll
Qt滚动日期选择器
阿清的随手记
11-16 4645
Qt滚动日期选择器 最近产品经理提了一个需求，要实现一个滚动日期选择器。这个功能看似简单，实际实现起来不容易，里面有一些细节需要注意。 目前网上很难找到类似的控件，只能找到单独的一条控件 这意味着又要开始造轮子了 ( ･᷄д･᷅ ) 我先实现了单条的纵向控件，分别实现年、月、日独自的上下拖拽，最后把它们整合在一起。代码比较繁琐，不够优雅，不过功能还是实现了的 ✌ ・︵・ 年份滚动条 rollingboxy.h //时间滚动条-年份 #ifndef ROLLINGBOXY_H #define ROLLIN
QML使用滚轮/触控板实现水平滚动/垂直滚动/缩放功能
weixin_42219627的博客
07-22 731
实现上述功能主要使用到两个组件MouseArea、PinchArea，MouseArea主要是进行鼠标事件的操作和部分触控板事件的操作，PinchArea主要是Mac下识别触控板的双指缩放。
qml 日期时间控件
10-28
QML（Qt Meta Language）是一种用于构建图形用户界面（GUI）的声明性编程语言。在QML中，可以使用日期时间控件来显示和操作日期和时间。 QML提供了一个内置的日期时间控件类型，称为DateTimePicker。通过DateTimePicker，我们可以轻松地在应用程序中显示和选择日期和时间。例如，可以通过设置DateTimePicker的属性来指定日期和时间的格式、范围以及默认值等。 要在QML中使用DateTimePicker，首先需要在QML文件中导入相应的Qt Quick组件。然后，可以在QML代码中创建一个DateTimePicker实例，并设置相关的属性。例如，可以设置format属性来指定日期和时间的显示格式，如"yyyy-MM-dd"或"hh:mm:ss"等。 除了显示日期和时间，DateTimePicker还提供了一些方法和信号，用于在用户选择日期和时间时进行相应的处理。例如，可以使用accepted信号来捕获用户点击确认按钮的事件，并在相应的处理函数中执行一些操作。 总而言之，QML日期时间控件（DateTimePicker）提供了一种简单且易于使用的方式来处理日期和时间。它使开发人员能够轻松地创建和管理日期时间选择功能，从而提高应用程序的用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值