QML仿手机时间滚筒控件

来源：互联网发布：sql server 2008 图标编辑：程序博客网时间：2024/04/28 19:48

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.0import "qrc:/common/util.js" as Utilimport "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.0import "qrc:/common/util.js" as Utilimport "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.0Item {    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.0import "qrc:/common/util.js" as Utilimport "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

阅读全文

0 0