qml实现简单的时间选择控件

qml实现简单的时间选择控件

---------------------------------------------------------------------------------------------------

在公司用qml写 一个app时需要一个时间控件发现qml中的日历太累赘了，然后就自己写了个精简点的时间选择控件

具体效果如下

可以选择是否需要年，同时通过自定义的参数实现布局以及获取数据

---------------------------------------------------------------------------------------------------

1、当前时间的获取

Component.onCompleted: {
                        var date = new Date();
                        year.curTime    = date.getFullYear();
                        month.curTime   = date.getMonth()+1;
                        day.curTime     = date.getDate();
                    }

注意的时当前月份需要+1

2、外部接口

2.1、整个选择器的接口

property int h_offset: 0;//横向偏移值（以横向的中心）
property int topmargin: 0;//顶部距离
property bool isNeedyear: true;//是否需要年份
property string time: "";//用来获取TextField中的时间

以TextField为标准来实现定位（时间选择部分定位到了程序的中心）。

2.2、一个时间选择控件的接口

property int curTime: 0;//当前时间
property int maxTime: 0;//最大时间
property int minTime: 0;//最小时间

用来设置当前显示的时间，以及可以选择的范围

3、单独的时间选择按钮的实现

//中间的时间按钮
import QtQuick 2.0

Rectangle{
    property int curTime: 0;//当前时间
    property int maxTime: 0;//最大时间
    property int minTime: 0;//最小时间
    width: 55
    height: 81;
       Column{
           anchors.fill: parent;
           Rectangle{
               id: add_btn;
               width: parent.width;
               height: parent.height/3;
               color:"#b9f0fb";
               border.width: 1;
               border.color: "#8be3f5";
               Text{
                   anchors.centerIn: parent;
                   text: "+";
                   font.bold: true;
                   color:"#3ccfed";
                   font.pixelSize: 20;

               }
               //+按钮
               MouseArea{
                   id:add_mouse;
                   anchors.fill: parent;
                   onClicked: {

                       if(curTime < maxTime)
                            time_text.text = ++curTime;
                   }
               }

           }

           Rectangle{

               width: parent.width;
               height: parent.height/3;
               Text{
                   id:time_text;
                   anchors.centerIn: parent;
                   text: curTime;

                   color:"#999797";
                   font.pixelSize: 18;

               }

           }
           //-按钮
           Rectangle{
               id:sub_btn;
               width: parent.width;
               height: parent.height/3;
               color:"#b9f0fb";
               border.width: 1;
               border.color: "#8be3f5";
               Text{
                   anchors.centerIn: parent;
                   text: "-";
                   font.bold: true;
                   color:"#3ccfed";
                   font.pixelSize: 20;

               }
               MouseArea{
                   id:sub_mouse;
                   anchors.fill: parent;
                   onClicked: {
                       if(curTime > minTime)
                            time_text.text = --curTime;
                   }
               }
           }
       }

       //btn的点击效果
       states: [
           State {
               name:"btn_add_pressed"
               when: add_mouse.pressed;
               PropertyChanges {
                   target:add_btn;
                   color : Qt.darker("#09c3e9",1.2);
               }
           },
           State {
               name:"btn_sub_pressed"
               when: sub_mouse.pressed;
               PropertyChanges {
                   target:sub_btn;
                   color : Qt.darker("#09c3e9",1.2);
               }
           }

       ]
}

具体效果就是这样，同时时间控件也通过curTime来获取对应的时间

4、整个控件的组成

就不贴整个的代码了，比较长，主要由3个Rectangle上面的标题，下面的btn背景，以及整个的背景，然后中间用row布局时间选择按钮，最上面是一个TextField。

5、最后贴下下载链接： demo下载

小小的收了1分，主要用来自己下载请不要介意。

end。。。学了没多久，有错误或者建议请指教THANKS