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

最新推荐文章于 2025-09-17 11:36:50 发布

原创最新推荐文章于 2025-09-17 11:36:50 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#QML #时间选择器插件

qt 同时被 2 个专栏收录

3 篇文章

订阅专栏

QML

3 篇文章

订阅专栏

这篇博客详细介绍了在Qt QML环境下开发Android时间选择器的过程，包括封装滚轮组件(TimeWheel.qml)、年月日选择器(DateSelector.qml)和时分选择器(TimeSelector.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 dayModel: dayList.myModel;
    property alias yearValue: yearList.value;
    property alias monthValue: monthList.value;
    property alias dayValue: dayList.value;
    property alias yearZeroFlags: yearList.bZeroFlags;
    property alias monthZeroFlags: monthList.bZeroFlags;
    property alias dayZeroFlags: dayList.bZeroFlags;

    property alias yearTextFlags: yearList.bTextFlags;
    property alias monthTextFlags: monthList.bTextFlags;
    property alias dayTextFlags: dayList.bTextFlags;

    property alias yearUnitStr: yearList.strUnitString;
    property alias monthUnitStr: monthList.strUnitString;
    property alias dayUnitStr: dayList.strUnitString;

    property alias dateText: currentDate.text;

    //SIGNAL
    signal sigYearValue(int index);
    signal sigMonthValue(int index);
    signal sigDayValue(int index);
    signal sigConfirmOK();


    //上方透明
    Rectangle {
        id: topRect;
        anchors {
            left: parent.left;
            right: parent.right;
            top: parent.top;
            bottom: mainUI.top;
        }
        opacity: 0.6;
        color:"#989898";

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                choseDateItem.visible = false;
            }
        }
    }

    Rectangle {
        id: mainUI;
        color: "#FEFEFE";
        anchors.centerIn: parent;
        width: G.Tools.width(650);
        height: G.Tools.height(610);

        //titleText
        Rectangle {
            id: contentText;
            anchors {
                left: parent.left;
                top: parent.top;
            }
            width: parent.width;
            height: G.Tools.height(92);
            TextLabel {
                id: currentDate;
                anchors.left: parent.left;
                anchors.leftMargin: G.Tools.width(20);
                anchors.verticalCenter: parent.verticalCenter;
                color: "#3e6792";
                text:"2014-23-23";
                font.family: FontSetting.fontFamily;
                font.pointSize: FontSetting.setPixelSizeToPointSize(34);
            }
        }

        //横线
        Rectangle {
            id: line;
            anchors {
                left: parent.left;
                right: parent.right;
                top: contentText.bottom;
            }
            height: G.Tools.height(2);
            color: G.ModelColor.textColor;
        }

        //年
        WheelTime {
            id: yearList;
            anchors {
                left: parent.left;
                top: line.bottom;
            }
            width: parent.width * 0.4;
            height: G.Tools.height(410);
            currentFontSize: 34;
            normalFontSize: 28;
            onValueChanged: {
                choseDateItem.sigYearValue(value);
            }
        }

        //月
        WheelTime {
            id: monthList;
            anchors {
                left: yearList.right;
                top: line.bottom;
            }
            width: parent.width * 0.3;
            height: G.Tools.height(410);
            currentFontSize: 34;
            normalFontSize: 28;
            onValueChanged: {
                choseDateItem.sigMonthValue(value);

            }
        }

        //日
        WheelTime {
            id: dayList;
            anchors {
                left: monthList.right;
                top: line.bottom;
            }
            width: parent.width * 0.3;
            height: G.Tools.height(410);
            currentFontSize: 34;
            normalFontSize: 28;
            onValueChanged: {
                choseDateItem.sigDayValue(value);
            }
        }


        //设置按钮
        Rectangle {
            id: settingsButton;
            anchors {
                left: parent.left;
                right: parent.right;
                bottom: parent.bottom;
            }
            color: "#1890CF";
            height: G.Tools.height(106);
            TextLabel {
                id: confirmText;
                anchors.centerIn: parent;
                color: "white";
                text: qsTranslate("WMSAPP",G.Translate.getPropty("confirmButton"));
                font.family: FontSetting.fontFamily;
                font.pointSize: FontSetting.setPixelSizeToPointSize(36);
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    choseDateItem.sigConfirmOK();
                    choseDateItem.visible = false;
                }
            }
        }
    }

    //左边透明
    Rectangle {
        id :leftRect;
        anchors {
            left: parent.left;
            right: mainUI.left;
            top: topRect.bottom;
            bottom: bottomRect.top;
        }
        color:"#989898";
        opacity: 0.6;

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseDateItem.visible = false;
            }
        }
    }

    //右边透明
    Rectangle {
        id :rightRect;
        anchors {
            left: mainUI.right;
            right: parent.right;
            top: topRect.bottom;
            bottom: bottomRect.top;
        }
        color:"#989898";
        opacity: 0.6;
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseDateItem.visible = false;
            }
        }
    }

    //下方透明
    Rectangle {
        id: bottomRect;
        anchors {
            left: parent.left;
            top: mainUI.bottom;
            bottom: parent.bottom;
        }
        width: parent.width;
        opacity: 0.6;
        color:"#989898";

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseDateItem.visible = false;
            }
        }
    }
}

这段代码引用了TimeWheel.qml，并创建了三个（年，月，日）三个对象，并抛出去很多属性接口等。在选择器的周围（上、下、左、右）都添加了透明，暗色的画布，点击后可隐藏掉时间选择器。

封装时分选择器的文件代码(TimeSelector.qml)

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


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

    property alias mintuesModel: mintuesList.myModel;
    property alias hourModel: hourList.myModel;

    property alias mintuesValue: mintuesList.value;
    property alias hourValue: hourList.value;

    property alias mintuesZeroFlags: mintuesList.bZeroFlags;
    property alias hourZeroFlags: hourList.bZeroFlags;

    property alias mintuesTextFlags: mintuesList.bTextFlags;
    property alias hourTextFlags: hourList.bTextFlags;

    property alias mintuesUnitStr: mintuesList.strUnitString;
    property alias hourUnitStr: hourList.strUnitString;

    property alias timeText: currentDate.text;

    //SIGNAL
    signal sigHourValue(int index);
    signal sigMintuesValue(int index);
    signal sigConfirmOK();


    //上方透明
    Rectangle {
        id: topRect;
        anchors {
            left: parent.left;
            right: parent.right;
            top: parent.top;
            bottom: mainUI.top;
        }
        opacity: 0.6;
        color:"#989898";

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                choseTimeItem.visible = false;
            }
        }
    }

    Rectangle {
        id: mainUI;
        color: "#FEFEFE";
        anchors.centerIn: parent;
        width: G.Tools.width(650);
        height: G.Tools.height(610);

        //titleText
        Rectangle {
            id: contentText;
            anchors {
                left: parent.left;
                top: parent.top;
            }
            width: parent.width;
            height: G.Tools.height(92);
            TextLabel {
                id: currentDate;
                anchors.left: parent.left;
                anchors.leftMargin: G.Tools.width(20);
                anchors.verticalCenter: parent.verticalCenter;
                color: "#3e6792";
                text:"2014-23-23";
                font.family: FontSetting.fontFamily;
                font.pointSize: FontSetting.setPixelSizeToPointSize(34);
            }
        }

        //横线
        Rectangle {
            id: line;
            anchors {
                left: parent.left;
                right: parent.right;
                top: contentText.bottom;
            }
            height: G.Tools.height(2);
            color: G.ModelColor.textColor;
        }

        //时
        WheelTime {
            id: hourList;
            anchors {
                left: parent.left;
                top: line.bottom;
            }
            width: parent.width * 0.5;
            height: G.Tools.height(410);
            currentFontSize: 34;
            normalFontSize: 28;
            onValueChanged: {

                choseTimeItem.sigHourValue(value);
//                console.log("hourValue = " + value);
//                G.Golobal.choseHour = value;
            }
        }

        //分
        WheelTime {
            id: mintuesList;
            anchors {
                left: hourList.right;
                top: line.bottom;
            }
            width: parent.width * 0.5;
            height: G.Tools.height(410);
            currentFontSize: 34;
            normalFontSize: 28;
            onValueChanged: {

                choseTimeItem.sigMintuesValue(value);
//                console.log("minthMintues = " + value);
//                G.Golobal.choseMintues = value;
            }
        }

        //设置按钮
        Rectangle {
            id: settingsButton;
            anchors {
                left: parent.left;
                right: parent.right;
                bottom: parent.bottom;
            }
            color: "#1890CF";
            height: G.Tools.height(106);
            TextLabel {
                id: confirmText;
                anchors.centerIn: parent;
                color: "white";
                text: qsTranslate("WMSAPP",G.Translate.getPropty("confirmButton"));
                font.family: FontSetting.fontFamily;
                font.pointSize: FontSetting.setPixelSizeToPointSize(36);
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    choseTimeItem.sigConfirmOK();
                    choseTimeItem.visible = false;
                }
            }
        }
    }

    //左边透明
    Rectangle {
        id :leftRect;
        anchors {
            left: parent.left;
            right: mainUI.left;
            top: topRect.bottom;
            bottom: bottomRect.top;
        }
        color:"#989898";
        opacity: 0.6;

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseTimeItem.visible = false;
            }
        }
    }

    //右边透明
    Rectangle {
        id :rightRect;
        anchors {
            left: mainUI.right;
            right: parent.right;
            top: topRect.bottom;
            bottom: bottomRect.top;
        }
        color:"#989898";
        opacity: 0.6;
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseTimeItem.visible = false;
            }
        }
    }

    //下方透明
    Rectangle {
        id: bottomRect;
        anchors {
            left: parent.left;
            top: mainUI.bottom;
            bottom: parent.bottom;
        }
        width: parent.width;
        opacity: 0.6;
        color:"#989898";

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                choseTimeItem.visible = false;
            }
        }
    }
}

具体实现原理与年月日一样。

年月日和时分控件的调用

 //年月日选择器
    DateSelector {
        id: dateSelector;
        anchors.fill: parent;
        visible: false;
        yearModel: yearModel;
        yearTextFlags: true;
        yearUnitStr: qsTr("年");
        monthUnitStr: qsTr("月");
        dayUnitStr: qsTr("日");
        monthModel: 12;
        dayModel: 31;

        onSigYearValue:{
            console.log("yearValue = " + yearModel.get(index).numberText);
            choseYear = yearModel.get(index).numberText;
        }

        onSigMonthValue: {
            console.log("monthValue = " + index);
            choseMonth = index + 1;
        }

        onSigDayValue: {
            console.log("dayValue = " + index);
            choseDay = index + 1;
        }

        onSigConfirmOK: {
            console.log("DateOK");
            if(!dateFlags){
                //开始
                console.log("startDate");
                strStartDate = choseYear + "-" + choseMonth + "-" + choseDay;
                console.log("strStartDate = " + strStartDate);

            }else {
                //结束
                console.log("endDate");
                strEndDate = choseYear + "-" + choseMonth + "-" + choseDay;
                console.log("strEndDate = " + strEndDate);
            }
        }
    }

    //时分选择器
    TimeSelector {
        id: timeSelector;
        anchors.fill: parent;
        visible: false;
        hourModel: 24;
        mintuesModel: 60;
        hourZeroFlags: true;
        mintuesZeroFlags: true;
        hourUnitStr: qsTr("时");
        mintuesUnitStr: qsTr("分");

        onSigHourValue: {
            console.log("hourValue = " + index);
            choseHour = index;
        }

        onSigMintuesValue: {
            console.log("minthMintues = " + index);
            choseMintues = index;
        }

        onSigConfirmOK: {
            console.log("TimeOK");
            if(!timeFlags){
                //开始
                console.log("startTime");
                strStartTime = choseHour + ":" + choseMintues;
                console.log("strStartTime = " + strStartTime);
            }else {
                //结束
                console.log("endTime");
                strEndTime = choseHour + ":" + choseMintues;
                console.log("strEndTime = " + strEndTime);

            }
        }
    }

    //年月日选择器中年的model
    ListModel {
        id: yearModel;
    }

这不是一个完整的代码，比核心的代码全部贴出来了，可以参考，但不能直接贴就想运行。第一次写博客，很多地方都不完善，有好的建议请与我沟通交流，谢谢。