QML仿手机时间滚筒控件

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

DatePage

####使用代码

    DatePage {id: datePageanchors.fill: parentshow: trueshowPropertyChangesY:0hidePropertyChangesY:0onReturnPage:{if(ok){var currentDate = new Date()var hour = currentDate.getHours();var minute = currentDate.getMinutes();console.log(year,month,day,hour,minute);}}}

TimePage

####使用代码

    TimePage {id: timePageanchors.fill: parentshow: trueshowPropertyChangesY:0hidePropertyChangesY:0hourModel24: 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 Util
import "qrc:/common/"
import "qrc:/timeControl/"AnimationItem {id:rootproperty int  dateModelIndex : 0property int monthMaxDay : 30property int year: 0property int month: 0property int day: 0property int lockday: 0property string textColor:"white"property string highlightColor:"#0099ff"property int fontSize:30signal returnPage(bool ok)Rectangle{anchors.fill: parentcolor:"#000000"opacity:0.6//透明度为0.5}onYearChanged: {monthMaxDay = currentMonthMaxDay(year,month)}onMonthChanged: {
//        lockday = day;
//        dayPathView.initIndex = lockday -1;monthMaxDay = currentMonthMaxDay(year,month)}TimePathView{id:yearPathViewanchors.horizontalCenter: parent.horizontalCenteranchors.horizontalCenterOffset: -200y:100width:200height:300order:trueorderStartNum: 1970initIndex:year - 1970unitText:Util.lang(qsTr("年"))unitLeftMargin:-50model:130//yearModelonValueChanged: {year = value}}TimePathView{id:monthPathViewanchors.horizontalCenter: parent.horizontalCenter// anchors.horizontalCenterOffset: 100y:100width:200height:300order:trueorderStartNum: 1initIndex:month - 1unitText: Util.lang(qsTr("月"))unitLeftMargin:-70model:12onValueChanged: {month = value}}TimePathView{id:dayPathViewanchors.horizontalCenter: parent.horizontalCenteranchors.horizontalCenterOffset: 200y:100width:200height:300order:trueorderStartNum: 1initIndex:day - 1unitText:Util.lang(qsTr("日"))unitLeftMargin:-70model:monthMaxDay ===28?28:monthMaxDay ===29?29:monthMaxDay ===30?30:monthMaxDay ===31?31:0onValueChanged: {day = value}}//---按钮Row{id:timeSettingColumnanchors.top: dayPathView.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.topMargin: 20spacing: 100Button{id:btnTimetext:Util.lang(qsTr("确定"))pressedSource:  Util.fromTheme("Settings/setting_choose2.png")normalSource: Util.fromTheme("Settings/setting_choose.png")onClicked: {returnPage(true)}}Button{id:btnDatetext: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()+1day = date.getDate()}//--判断是否闰年function isLeapYear(year){var leap = falseif(year%400==0||year%4==0&&year%100!=0)leap = true //是闰年elseleap = false //不是闰年//console.log(year,"is leap year:",leap)return leap}//--判断大小月，2月不在判断范围内function isBigMonth(month){var bigMonth = falseif(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 = 0if(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 Util
import "qrc:/common/"
import "qrc:/timeControl/"AnimationItem {id:rootproperty bool  isAm:hour<12 //am pmproperty bool  hourModel24 : trueproperty int hour: 0property int minute: 0property string textColor:"white"property string highlightColor:"#0099ff"property int fontSize:30signal returnPage(bool ok)Rectangle{anchors.fill: parentcolor:"#000000"opacity:0.6//透明度为0.5}Button{id:btntimeModelvisible: !hourModel24anchors{verticalCenter: parent.verticalCenterverticalCenterOffset: -20horizontalCenter: parent.horizontalCenterhorizontalCenterOffset: -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 - 24var isAmValue =!isAm?0:1;hour = hourModel24?hour:(hour%12+isAmValue*12)}}TimePathView{id:hourPathViewanchors.horizontalCenter: parent.horizontalCenteranchors.horizontalCenterOffset: -100y:100width:200height:300order:trueorderStartNum: hourModel24?0:1initIndex: hourModel24?hour:(hour%12!==0?(hour%12 - 1):11)unitText: Util.lang(qsTr("时"))unitLeftMargin:-70model:  hourModel24?24:12onValueChanged: {var isAmValue =isAm?0:1;hour = hourModel24?value:(value%12+isAmValue*12)}}TimePathView{id:minutePathViewanchors.horizontalCenter: parent.horizontalCenteranchors.horizontalCenterOffset: 100y:100width:200height:300order:trueorderStartNum: 0initIndex:minuteunitText: Util.lang(qsTr("分"))unitLeftMargin:-70model:60onValueChanged: {minute = value}}//---按钮Row{id:timeSettingColumnanchors.top: hourPathView.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.topMargin: 30spacing: 100Button{id:btnTimetext: Util.lang(qsTr("确定"))pressedSource:  Util.fromTheme("Settings/setting_choose2.png")normalSource: Util.fromTheme("Settings/setting_choose.png")onClicked: {returnPage(true);}}Button{id:btnDatetext: 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: rootproperty bool order: false//数字顺序列表property int orderStartNum: 1property int initIndex:0property alias model: myPathView.modelproperty alias count: myPathView.countproperty alias unitText:unit.textsignal valueChanged(var index,var value)property int fontSize:30property string textColor:"white"property string highlightColor:"#0099ff"property int unitLeftMargin:-50PathView{id:myPathViewanchors.fill: parentcurrentIndex:initIndexdelegate:TimePathItem{width:root.width/2height:root.height/myPathView.pathItemCountonSelected: {//--执行内部算法，寻找最短路径（时间开销依据处理器性能）//--在此过程中 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:1000onMovementEnded: {//--发出信号//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 :pathVerticalPath{//------------垂直变化------------id:pathVerticalproperty int height: root.heightstartX: root.width/2PathLine { 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 upPathLine { 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 pointPathLine {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 downPathLine { 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 pointPathLine { 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}}}//PathViewText{id:unitanchors.verticalCenter: myPathView.verticalCenteranchors.verticalCenterOffset: -5anchors.left: myPathView.rightanchors.leftMargin:unitLeftMargin//text:qsTr("年")verticalAlignment: Text.AlignVCenterfont.pixelSize: 30color:highlightColor}}

###TimePathItem.qml 代码如下

import QtQuick 2.0import "qrc:/common/util.js" as Util
import "qrc:/common/"
import "qrc:/timeControl/"
Item{//id:rootscale: PathView.iconScale!==undefined?PathView.iconScale:1opacity: PathView.iconOpacity!==undefined?PathView.iconOpacity:1z:PathView.iconZ!==undefined?PathView.iconZ:1signal selected(int index);transform: Rotation {id: rotationorigin.x: root.width/2origin.y: root.height/2axis.x: 1axis.y: 0axis.z: 0angle: root.PathView.iconAngle!==undefined?root.PathView.iconAngle:0}Text{id:timeTextanchors.centerIn: parenttext:order?Number(modelData)+orderStartNum:modelDataverticalAlignment: Text.AlignVCenterfont.pixelSize: 30color: root.PathView.isCurrentItem ? highlightColor : textColor}MouseArea{id:itemMouseAreaanchors.fill: parentonClicked: {root.selected(index)}}}//Item

QML仿手机时间滚筒控件相关推荐

QML 自定义控件时间滚筒控件
QML 仿手机时间滚筒控件效果:共3中模式 "Date" | "Time" | "DateTime" main.qml MouseAre ...
android 仿ios三级联动,仿iOS的PickerView控件，有时间选择和选项选择并支持一二三级联动效果...
Android-PickerView 注意事项.详请使用方式.更新日志等,请查看 Wiki文档 Wiki文档,Wiki文档,Wiki文档 !~ 重要的事情说三遍对于使用上有任何疑问或优化建议等,欢迎 ...
layui时间怎么设置年月日时分秒_layui-laydate时间日历控件使用方法详解
本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下此控件可使用layui或者独立版的layDate,两者初始化有些不同在 layui 模块中使用layui.code ...
日期DatePicker与时间TimePicker控件
在AndroidApp应用中,设置日期和时间时间也是经常遇见的,下面我们一起学习一下. 我们需要学习Android中的基本控件:(1)日期选择控件DatePicker (2)时间选择控件TimePic ...
Android 时间显示控件 TextClock
Android 时间显示控件 TextClock TextClock可用作显示时间,API>=17,用来替代DigitalClock. 系统设置以24小时格式的时候使用这个format andr ...
老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
基于QT封装的音视频播放时间轴控件
采用QT graphicsview视图框架,可以实现时间轴缩放,指针拖拉,滚动条移动,可以新增指针事件等,提供时间片添加接口. 思路:左侧车牌信息和通道列表是qwidget正常的窗口,右侧的时间轴,通 ...
html小时分钟秒选择器,HTMLbootstrap时间选择器控件精确到秒 datetimepicker控件怎么精确到秒？...
在使用 HTML 中的 bootstrap datetimepicker 选择器控件时会发现,该插件不能精确到秒钟,那么 bootstrap 时间选择器控件精确到秒能否实现呢? 其实可以进行简单的修改 ...
android 仿照ios 图片选择,GitHub - wildma/PictureSelector: Android 图片选择器（仿 IOS 图片选择控件）...
PictureSelector Android 图片选择器(仿 IOS 图片选择控件) 效果图功能特点支持通过拍照获取图片支持通过相册获取图片支持图片是否裁剪两种场景支持仿 IOS 底部弹出 ...

QML仿手机时间滚筒控件

QML仿手机时间滚筒控件

QML仿手机时间滚筒控件相关推荐

最新文章

热门文章