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

最新推荐文章于 2025-09-17 11:36:50 发布
原创 最新推荐文章于 2025-09-17 11:36:50 发布 · 3.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#QML #时间选择器插件

这篇博客详细介绍了在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;
    }
这不是一个完整的代码，比核心的代码全部贴出来了，可以参考，但不能直接贴就想运行。第一次写博客，很多地方都不完善，有好的建议请与我沟通交流，谢谢。


日期时间编辑器（模拟QDateTimeEdit的自定义控件）——QML
xiaopei_yan的博客
08-06 3796
前言 现在比较闲，我就把手上的项目写了两个版本：一版QtWidgets c++实现的；另一版 qml 加少量c++实现的（当然还没写完）。可能我用QtWidgets用习惯了，感觉qml少很多控件，然后很多东西需要自己写：我发现qml没有时间日期编辑器/选择器，所以我模仿了QDateTimeEdit，根据思路的不同写了两个版本。 代码和说明 QDateTimeEdit可以通过两种方式修改：一则是直接编辑修改；二呢，是通过按钮上下调。 为了直接修改，时间数据不会错，所以我加了验证器（validat.
qml实现简单的时间选择控件
08-02
qml实现简单的时间选择控件
Qt C++ 开发支持通过滚动选择器选择开始和结束日期
weixin_42789529的博客
09-08 370
Qt C++ 开发支持通过滚动选择器选择开始和结束日期
QML自定义时间选择器
qq_38478961的博客
10-08 3593
在进行使用qml编程过程中，需要实现日期时间的选择。 但是qml官方只提供日期控件，因此自己定义了时间控件 注意 QtQuick 2.9不要降低版本 否则会有内部的信号处理器无法使用 import QtQuick 2.9 import QtQuick.Controls 2.3 Rectangle { property int hour: 0; property int minut...
自编Qml时间控件（实用）
12-21
笔者在开发产品时，由于使用的是qt4.8系列的版本，用qml编写一个闹钟，要选择时间，系统自带没有时间控件。这时候也需要使用这一个时间控件，这时候就必须要自己写一个时间控件，分享给大家。
QML日期选择控件
zjgo007的专栏
01-07 3033
Qml中没有现成的日期时间选择控件，自己做了个，代码实现较为简单，没有过多需要介绍的，控件加载会自动获取当前日期，转动拨盘会根据当前年、月匹配当月天数，代码如下，直接复制到Qml中加载就可以使用了
使用Qt的QML开发一个简单的地图应用
sssfasla的博客
07-12 2145
最近的QT项目中需要做一个简单的地图应用，功能不太复杂只需要通过鼠标点击获取点击位置的经纬度，查找了很多资料和方案，本着简单方便才是硬道理的原则，最后决定使用qml来实现。QML是Qt提供的一种声明性语言，用于快速创建用户界面。是QML中的一个地图插件，它支持离线地图的加载，干好满足我的要求。下面是我在使用这个工具开发简单地图应用的过程的一些问题。
VS2022 + QML 开发环境配置
最新发布
IKUN2333的博客
09-17 1193
【代码】VS2022 + QML 开发环境配置。
基于QML，手机APP开发框架
03-04
总的来说，基于QML的手机APP开发框架结合了高效、灵活和跨平台的优势，是开发者构建现代、互动性强的移动应用的理想选择。通过学习和熟练掌握QML，开发者可以快速开发出具有独特视觉风格和优秀交互体验的手机应用...
Qt开发QML的中文资料-Qt Ui Qml 速查中文版
05-19
### Qt开发QML的中文资料知识点汇总 #### 1. 初识Qt5（Meet Qt5） - **序（Preface）**：介绍Qt5的背景、...以上知识点涵盖了从基础知识到高级技术的广泛范围，旨在帮助开发者全面了解并掌握Qt QML开发的相关技能。
QML 简单日历控件
12-25
一个qml的日历控件 很简单 没有定义很复杂的风格， 代码很简单，如果要改风格 修改spinner.qml也可以很容易做到
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
QT/QML 的日历控件，纯QML实现。
QML 创建 Web 混合应用
青春不老，奋斗不止！
10-31 1533
随着互联网的快速发展，Web 应用在各个领域中变得越来越流行。为了满足用户对多样化功能的需求，我们经常需要将 Web 技术和原生应用相结合，来创建混合应用程序。
92.qt qml-日期/日期时间/时间选择器(日历选择器)
抵抗时间扭曲，坚持做一件有意义的事
07-11 3281
QML日历组件我们之前移植过:67.qt quick-qml自定义日历组件(支持竖屏和横屏)_qml日历_诺谦的博客-优快云博客但是该组件内部代码比较坑的就是全部使用自定义对象，导致性能不行，动画卡顿，并且不好加时间选择，所以本章我们重新学习，然后重构一个日期时间选择器，支持更改日期 或者 日期时间重构需要使用到Calendar类和样式类2.Calendar类介绍int,一周中各天的显示格式(在页眉中)。Locale.ShortFormat是默认的推荐格式。
QML时间日期选择器控件实战
weixin_42561464的博客
07-13 565
虽然QML的已经足够强大，但有时候我们需要更多的自定义功能。为此，我们可以结合JavaScript来实现更复杂的逻辑和更丰富的用户界面。width: 400// JavaScript代码用于初始化或增强DateTimePicker组件的功能// 例如，可以在这里添加自定义的验证逻辑在上述代码中，我们利用在组件初始化后执行JavaScript代码，从而实现在用户界面中添加更多的交互逻辑或对组件行为进行调整。这些内容只是第一章的基础部分，进一步的实现和优化将在后续章节中详细讨论。
QML 自定义时间编辑控件
liushiyi3083862599的博客
03-16 778
qml自定义时间编辑控件。三.时间编辑控件封装。
qml 类似移动端时间设置控件
luoyayun361的专栏
01-07 1639
qml实现一个类似手机端闹钟或其它时间设置控件。可以用ListView实现其效果，但是QML提供有现成的控件可以用，所以要实现这个效果更方便。先看效果图本文Demo下载。
使用QML Tumbler 实现时间日期选择器
u011186532的专栏
04-24 1672
在现代应用程序开发中，时间与日期选择是常见的用户界面需求。无论是在日程安排、预约系统还是任何需要时间录入的场景，一个直观易用的选择器组件可以大大提升用户体验。本文将详细介绍如何使用 QML 技术实现两种常用的选择器组件：时间选择器和日期时间选择器。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值