QML开发的时间选择器的插件

简述

下面是用Qt去开发Android的时候，遇到时间选择器的需求，通过官方例子和自己的调整，做出了时间选择器界面开发。具体效果图如下：

封装一个滚轮的文件代码(TimeWheel.qml)：

mport QtQuick 2.0
import "../" as G
import Sparrow 1.0

Rectangle {
    property alias value: list.currentIndex;
    property alias myModel: list.model;
    property bool bZeroFlags: false;
    property bool bTextFlags: false;
    property int currentFontSize: 30;
    property int normalFontSize: 24;
    property string strUnitString: "";

    color: "#36393b";
    border.color: "white";
    Rectangle{
        id: wheelList;
        anchors {
            top: parent.top;
            left: parent.left;
        }
        color: "white";
        border.color: "#cdcdcd";
        width: parent.width;
        height: parent.height;

        ListView {
            id: list;
            width: parent.width * 0.9;
            height: parent.height;
            highlightRangeMode: ListView.StrictlyEnforceRange;
            preferredHighlightBegin: height / 3;
            preferredHighlightEnd: height / 3;
            clip: true;
            delegate:Rectangle {
                id: modelRect;
                color: "#FEFEFE";
                width: parent.width;
                height: ListView.isCurrentItem ? G.Tools.height(113) : G.Tools.height(96);
                Text {
                    id: modelText;
                    anchors.centerIn: parent;
                    font.family: FontSetting.fontFamily;
                    font.pointSize: modelRect.ListView.isCurrentItem ? FontSetting.setPixelSizeToPointSize(currentFontSize) : FontSetting.setPixelSizeToPointSize(normalFontSize);
                    color: modelRect.ListView.isCurrentItem ? "#3e6792" : "#777777";
                    text:{

                        if(bTextFlags){
                            return ( numberText + strUnitString);
                        }else{
                            if(bZeroFlags){
                                return (index + strUnitString);
                            }else {
                                return ((index + 1) + strUnitString);
                            }
                        }
                    }
                }
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        list.currentIndex = index;
                    }
                }
            }
        }
    }
}

在一个Rectangle中放了一个ListView，ListView的代理就是一个Text用来显示内容。在Text中添加了一下条件来判断显示的单位(年，月，日，时，分等)，这段代码是一个qml文件，qml文件的名字命名为TimeWheel.qml，可以在其他qml文件中引用TimeWheel.qml并创建对象，就可使用我们已经封装好的时间滑轮。

封装的年月日选择器文件代码(DateSelector.qml)

import QtQuick 2.0
import Sparrow 1.0
import "../" as G
import "../Component"


//设置界面单个滑轮时间选择器
Item {
    id: choseDateItem;

    property alias yearModel: yearList.myModel;
    property alias monthModel: monthList.myModel;
    property alias