• 461阅读
  • 0回复

qml实现的时间日期选择控件 [复制链接]

上一主题 下一主题
离线自强不吸
 

只看楼主 倒序阅读 楼主  发表于: 10-09
qml实现的时间日期选择控件,根据大小月份和闰平年自动切换天数。详细代码见附件 DateTimeSetting.zip (4 K) 下载次数:13


主要代码:
  1. import QtQuick 2.0
  2. import QtQuick.Extras 1.4
  3. import QtQuick.Controls 1.4
  4. import QtQuick.Layouts 1.3
  5. import QtQuick.Controls.Styles 1.4
  6. Item {
  7.     id: calendar
  8.     visible: true
  9.     width: 514; height: 160;
  10.     property int curyear: 2019
  11.     property int curmonth: 8
  12.     property int curday: 4
  13.     property int hour: 1
  14.     property int minutes: 1
  15.     //time format
  16.     property string curTimeFormat: "24H"  //12H
  17.     Component.onCompleted: {
  18.         updateDate();//load DateTime
  19.     }
  20.     function updateDate(){
  21.         var info = "2019-10-09#00:55"; //获取到的数据为24小时制
  22.         var dateTime = info.split("#");
  23.         var dateString = dateTime[0].split("-");
  24.         var timeStr = dateTime[1].split(":");
  25.         curyear = parseInt(dateString[0]);
  26.         curmonth = parseInt(dateString[1])
  27.         curday = parseInt(dateString[2])
  28.         hour = parseInt(timeStr[0])
  29.         minutes = parseInt(timeStr[1])
  30.     }
  31.     onCurTimeFormatChanged: {
  32.         tumblerHourColumn.updateModel()
  33.     }
  34.     Component{
  35.         id: tumblerStyle
  36.         //Tumbler style
  37.         TumblerStyle{
  38.             id: style
  39.             delegate: Item{
  40.                 implicitHeight: (yearTumbler.height - padding.top - padding.bottom) / style.visibleItemCount
  41.                 opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
  42.                 Text {
  43.                     id: label
  44.                     text: styleData.value
  45.                     font.pixelSize: 28
  46.                     color: "white";
  47.                     anchors.centerIn: parent
  48.                 }
  49.             }
  50.             property Component frame: Item {}
  51.             property Component background: Item {}
  52.             property Component separator: Item {}
  53.             property Component foreground: Item {}
  54.         }
  55.     }
  56.     //year
  57.     Tumbler {
  58.         id: yearTumbler
  59.         x: 4; width: 90; height: 160
  60.         style: tumblerStyle
  61.         TumblerColumn {
  62.             id: tumblerYearColum
  63.             width: 90
  64.             model: ListModel {
  65.                 Component.onCompleted: {
  66.                     for (var i = 2000; i < 2100; ++i) {
  67.                         append({value: i.toString()});
  68.                     }
  69.                 }
  70.             }
  71.             onCurrentIndexChanged: {
  72.                 //当前如果为2月  可能需要更新2月份天数    下标为1
  73.                 if(tumblerMonthColum.currentIndex === 1)
  74.                 {
  75.                     tumblerDayColumn.updateModel()
  76.                 }
  77.             }
  78.         }
  79.         Component.onCompleted: {
  80.             yearTumbler.setCurrentIndexAt(0,curyear-2000);
  81.         }
  82.     }
  83.     //month
  84.     Tumbler {
  85.         id: monthTumbler
  86.         anchors.left: yearTumbler.right
  87.         anchors.leftMargin: 20
  88.         width: 45; height: 160
  89.         style: tumblerStyle
  90.         TumblerColumn {
  91.             id: tumblerMonthColum
  92.             width: 45
  93.             model: ListModel {
  94.                 Component.onCompleted: {
  95.                     for (var i = 1; i <= 12; ++i) {
  96.                         append({value: i.toString()});
  97.                     }
  98.                 }
  99.             }
  100.             //update dayTumbler
  101.             onCurrentIndexChanged: {
  102.                 tumblerDayColumn.updateModel()
  103.             }
  104.         }
  105.         Component.onCompleted: {
  106.             monthTumbler.setCurrentIndexAt(0,curmonth-1)
  107.         }
  108.     }
  109.     //day
  110.     Tumbler{
  111.         id: dayTumbler
  112.         anchors.left: monthTumbler.right
  113.         anchors.leftMargin: 32
  114.         width: 45; height: 160
  115.         style: tumblerStyle
  116.         readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  117.         TumblerColumn {
  118.             id: tumblerDayColumn
  119.             width: 45
  120.             model: 31
  121.             function updateModel() {
  122.                 var previousIndex = tumblerDayColumn.currentIndex;
  123.                 var newDays = dayTumbler.days[tumblerMonthColum.currentIndex]
  124.                 //闰年&2月份 下标+1
  125.                 if((tumblerYearColum.currentIndex%4 == 0) && (tumblerMonthColum.currentIndex == 1)){
  126.                     newDays = dayTumbler.days[tumblerMonthColum.currentIndex]+1
  127.                 }
  128.                 var array = [];
  129.                 for (var i = 0; i < newDays; ++i) {
  130.                     array.push(i + 1);
  131.                 }
  132.                 model = array;
  133.                 dayTumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
  134.             }
  135.             onCurrentIndexChanged: {}
  136.         }
  137.         Component.onCompleted: {
  138.             dayTumbler.setCurrentIndexAt(0,curday-1)
  139.         }
  140.     }
  141.     //hour
  142.     Tumbler{
  143.         id: hourTumbler
  144.         anchors.left: dayTumbler.right
  145.         anchors.leftMargin: 28
  146.         width: 45; height: 160
  147.         style: tumblerStyle
  148.         readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  149.         TumblerColumn {
  150.             id: tumblerHourColumn
  151.             width: 45
  152.             model: 24
  153.             function updateModel() {
  154.                  var array = [];
  155.                 if(curTimeFormat === "24H"){
  156.                     for (var i = 0; i < 24; ++i) {
  157.                         array.push(i);
  158.                     }
  159.                 }else if( curTimeFormat === "12H" ){
  160.                     for (var j = 1; j <= 12; ++j) {
  161.                         array.push(j);
  162.                     }
  163.                 }
  164.                 model = array;
  165.                 if(curTimeFormat === "12H"){
  166.                     var formatHour = (calendar.hour===0)?12:((calendar.hour+12)%12)
  167.                     hourTumbler.setCurrentIndexAt(0,formatHour-1);
  168.                 }else{
  169.                     hourTumbler.setCurrentIndexAt(0,calendar.hour)
  170.                 }
  171.             }
  172.             onCurrentIndexChanged: {}
  173.         }
  174.         Component.onCompleted: {
  175.             tumblerHourColumn.updateModel();
  176.         }
  177.     }
  178.     Tumbler{
  179.         id: minutesTumbler
  180.         anchors.left: hourTumbler.right
  181.         anchors.leftMargin: 30
  182.         width: 45; height: 160
  183.         style: tumblerStyle
  184.         TumblerColumn {
  185.             id: tumblerMinutesColumn
  186.             width: 45
  187.             model: ListModel {
  188.                 Component.onCompleted: {
  189.                     for (var i = 0; i < 60; ++i) {
  190.                         append({value: i.toString()});
  191.                     }
  192.                 }
  193.             }
  194.             onCurrentIndexChanged: {}
  195.         }
  196.         Component.onCompleted: {
  197.             minutesTumbler.setCurrentIndexAt(0,minutes)
  198.         }
  199.     }
  200. }



4条评分好评度+1贡献值+1金钱+1威望+1
20091001753 好评度 +1 - 10-12
20091001753 贡献值 +1 - 10-12
20091001753 威望 +1 - 10-12
20091001753 金钱 +1 - 10-12
自强不吸!
快速回复
限100 字节
 
上一个 下一个