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