精华内容
下载资源
问答
  • 笔者在开发产品时,由于使用的是qt4.8系列的版本,用qml编写一个闹钟,要选择时间,系统自带没有时间控件。这时候也需要使用这一个时间控件,这时候就必须要自己写一个时间控件,分享给大家。
  • 主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘制,甚至还有qml版本,本控件无非就是一个仪表...

    3d6c1d43e1ffc2582f2f9757041ec10f.gif

    一、前言

    这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘制,甚至还有qml版本,本控件无非就是一个仪表边框加上时钟分钟刻度再加上时分秒指针,打完收工,我是在此基础上增加了可以设置各种颜色,然后鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果,弹簧效果的意思是秒钟走动的时候,先移动到超过指定位置,然后又重新弹回来,连续效果的意思是将步长减少,一点点的移动,将秒钟的定时器精度调高。还有一个新增的功能是内置了设置系统时间公共槽函数,支持任意操作系统。

    二、实现的功能

    • 1:可设置边框颜色
    • 2:可设置前景色背景色
    • 3:可设置时钟分钟秒钟指针颜色
    • 4:可设置刷新间隔
    • 5:鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果
    • 6:增加设置系统时间公共槽函数,支持任意操作系统

    三、效果图

    65000629afd5bd708b8fbb35112151b0.gif

    四、头文件代码

    #ifndef GAUGECLOCK_H
    #define GAUGECLOCK_H
    
    /**
     * 时钟仪表盘控件 作者:feiyangqingyun(QQ:517216493) 2016-10-23
     * 1:可设置边框颜色
     * 2:可设置前景色背景色
     * 3:可设置时钟分钟秒钟指针颜色
     * 4:可设置刷新间隔
     * 5:鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果
     * 6:增加设置系统时间公共槽函数,支持任意操作系统
     */
    
    #include <QWidget>
    
    #ifdef quc
    #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
    #include <QtDesigner/QDesignerExportWidget>
    #else
    #include <QtUiPlugin/QDesignerExportWidget>
    #endif
    
    class QDESIGNER_WIDGET_EXPORT GaugeClock : public QWidget
    #else
    class GaugeClock : public QWidget
    #endif
    
    {
    	Q_OBJECT
    	Q_ENUMS(SecondStyle)
    
    	Q_PROPERTY(QColor crownColorStart READ getCrownColorStart WRITE setCrownColorStart)
    	Q_PROPERTY(QColor crownColorEnd READ getCrownColorEnd WRITE setCrownColorEnd)
    
    	Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground)
    	Q_PROPERTY(QColor background READ getBackground WRITE setBackground)
    
    	Q_PROPERTY(QColor pointerHourColor READ getPointerHourColor WRITE setPointerHourColor)
    	Q_PROPERTY(QColor pointerMinColor READ getPointerMinColor WRITE setPointerMinColor)
    	Q_PROPERTY(QColor pointerSecColor READ getPointerSecColor WRITE setPointerSecColor)
    
        Q_PROPERTY(SecondStyle secondStyle READ getSecondStyle WRITE setSecondStyle)
    
    public:
    	enum SecondStyle {
    		SecondStyle_Normal = 0,     //普通效果
    		SecondStyle_Spring = 1,     //弹簧效果
    		SecondStyle_Continue = 2,   //连续效果
    		SecondStyle_Hide = 3        //隐藏效果
    	};
    
    	explicit GaugeClock(QWidget *parent = 0);
    	~GaugeClock();
    
    protected:
    	void paintEvent(QPaintEvent *);
    	void drawCrown(QPainter *painter);
    	void drawBg(QPainter *painter);
    	void drawScale(QPainter *painter);
    	void drawScaleNum(QPainter *painter);
    	void drawHour(QPainter *painter);
    	void drawMin(QPainter *painter);
    	void drawSec(QPainter *painter);
    	void drawDot(QPainter *painter);
    
    private:
        QColor crownColorStart;         //外边框渐变开始颜色
    	QColor crownColorEnd;           //外边框渐变结束颜色
    
    	QColor foreground;              //前景色
    	QColor background;              //背景色
    
    	QColor pointerHourColor;        //时钟指针颜色
    	QColor pointerMinColor;         //分钟指针颜色
    	QColor pointerSecColor;         //秒钟指针颜色
    
        SecondStyle secondStyle;        //秒针走动样式
    
    	QTimer *timer;                  //定时器绘制
    	int hour, min, sec, msec;       //时分秒毫秒
    
    	QTimer *timerSpring;            //定时器显示弹簧效果
    	double angleSpring;             //弹簧角度
    
    	QAction *action_secondstyle;    //秒针样式右键菜单
    
    private slots:
    	void doAction();
    	void updateTime();
    	void updateSpring();
    
    public:
    	SecondStyle getSecondStyle()    const;
    
    	QColor getCrownColorStart()     const;
    	QColor getCrownColorEnd()       const;
    
    	QColor getForeground()          const;
    	QColor getBackground()          const;
    
    	QColor getPointerHourColor()    const;
    	QColor getPointerMinColor()     const;
    	QColor getPointerSecColor()     const;
    
    	QSize sizeHint()                const;
    	QSize minimumSizeHint()         const;
    
    public Q_SLOTS:
    	//设置秒针走动样式
        void setSecondStyle(const SecondStyle &secondStyle);
    	//设置系统时间
        void setSystemDateTime(const QString &year, const QString &month, const QString &day,
                               const QString &hour, const QString &min, const QString &sec);
    
    	//设置外边框渐变颜色
        void setCrownColorStart(const QColor &crownColorStart);
        void setCrownColorEnd(const QColor &crownColorEnd);
    
    	//设置前景色
        void setForeground(const QColor &foreground);
    	//设备背景色
        void setBackground(const QColor &background);
    
    	//设置时钟指针颜色
        void setPointerHourColor(const QColor &pointerHourColor);
    	//设置分钟指针颜色
        void setPointerMinColor(const QColor &pointerMinColor);
    	//设置秒钟指针颜色
        void setPointerSecColor(const QColor &pointerSecColor);
    };
    
    #endif // GAUGECLOCK_H
    

    五、核心代码

    void GaugeClock::paintEvent(QPaintEvent *)
    {
        int width = this->width();
        int height = this->height();
        int side = qMin(width, height);
    
        //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
        QPainter painter(this);
        painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
        painter.translate(width / 2, height / 2);    
        painter.scale(side / 200.0, side / 200.0);
    
        //绘制外边框
        drawCrown(&painter);
        //绘制背景
        drawBg(&painter);
        //绘制刻度线
        drawScale(&painter);
        //绘制刻度值
        drawScaleNum(&painter);
        //绘制时钟指针
        drawHour(&painter);
        //绘制分钟指针
        drawMin(&painter);
        //绘制秒钟指针
        drawSec(&painter);
        //绘制中心盖板
        drawDot(&painter);
    }
    
    void GaugeClock::drawCrown(QPainter *painter)
    {
        int radius = 99;
        painter->save();
        painter->setPen(Qt::NoPen);
        QLinearGradient crownGradient(0, -radius, 0, radius);
        crownGradient.setColorAt(0, crownColorStart);
        crownGradient.setColorAt(1, crownColorEnd);
        painter->setBrush(crownGradient);
        painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
        painter->restore();
    }
    
    void GaugeClock::drawBg(QPainter *painter)
    {
        int radius = 92;
        painter->save();
        painter->setPen(Qt::NoPen);
        painter->setBrush(background);
        painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
        painter->restore();
    }
    
    void GaugeClock::drawScale(QPainter *painter)
    {
        int radius = 90;
        painter->save();
    
        QPen pen;
        pen.setColor(foreground);
        pen.setCapStyle(Qt::RoundCap);
    
        for (int i = 0; i <= 60; i++) {
            if (i % 5 == 0) {
                pen.setWidthF(1.5);
                painter->setPen(pen);
                painter->drawLine(0, radius - 10, 0, radius);
            } else {
                pen.setWidthF(0.5);
                painter->setPen(pen);
                painter->drawLine(0, radius - 5, 0, radius);
            }
    
            painter->rotate(6);
        }
    
        painter->restore();
    }
    
    void GaugeClock::drawScaleNum(QPainter *painter)
    {
        int radius = 70;
        painter->save();
        painter->setPen(foreground);
    
        double startRad = 60 * (M_PI / 180);
        double deltaRad = 30 * (M_PI / 180);
    
        for (int i = 0; i < 12; i++) {
            double sina = qSin(startRad - i * deltaRad);
            double cosa = qCos(startRad - i * deltaRad);
            QString strValue = QString("%1").arg(i + 1);
    
            double textWidth = fontMetrics().width(strValue);
            double textHeight = fontMetrics().height();
            int x = radius * cosa - textWidth / 2;
            int y = -radius * sina + textHeight / 4;
            painter->drawText(x, y, strValue);
        }
    
        painter->restore();
    }
    
    void GaugeClock::drawHour(QPainter *painter)
    {
        painter->save();
    
        //设置画笔平滑圆角
        QPen pen;
        pen.setCapStyle(Qt::RoundCap);
        painter->setPen(pointerHourColor);
        painter->setBrush(pointerHourColor);
    
        QPolygon pts;
        pts.setPoints(4, -3, 8, 3, 8, 2, -40, -2, -40);    
    
        painter->rotate(30.0 * ((hour + min / 60.0)));    
        painter->drawConvexPolygon(pts);
    
        painter->restore();
    }
    
    void GaugeClock::drawMin(QPainter *painter)
    {
        painter->save();
    
        //设置画笔平滑圆角
        QPen pen;
        pen.setCapStyle(Qt::RoundCap);
        painter->setPen(pointerMinColor);
        painter->setBrush(pointerMinColor);
    
        QPolygon pts;
        pts.setPoints(4, -2, 8, 2, 8, 1, -60, -1, -60);
    
        painter->rotate(6.0 * (min + sec / 60.0));    
        painter->drawConvexPolygon(pts);
    
        painter->restore();
    }
    
    void GaugeClock::drawSec(QPainter *painter)
    {
        if (secondStyle == SecondStyle_Hide) {
            return;
        }
    
        painter->save();
    
        //设置画笔平滑圆角
        QPen pen;
        pen.setCapStyle(Qt::RoundCap);
        painter->setPen(pointerSecColor);
        painter->setBrush(pointerSecColor);
    
        QPolygon pts;
        pts.setPoints(3, -1, 10, 1, 10, 0, -70);
    
        painter->rotate(angleSpring);
        painter->drawConvexPolygon(pts);
    
        painter->restore();
    }
    
    void GaugeClock::drawDot(QPainter *painter)
    {
        painter->save();
        QConicalGradient coneGradient(0, 0, -90.0);
        coneGradient.setColorAt(0.0, background);
        coneGradient.setColorAt(0.5, foreground);
        coneGradient.setColorAt(1.0, background);
        painter->setOpacity(0.9);
        painter->setPen(Qt::NoPen);
        painter->setBrush(coneGradient);
        painter->drawEllipse(-5, -5, 10, 10);
        painter->restore();
    }
    
    void GaugeClock::doAction()
    {
        QAction *action = (QAction *)sender();
        QString str = action->text();
    
        if (str == "弹簧效果") {
            action->setText("连续效果");
            setSecondStyle(SecondStyle_Spring);
        } else if (str == "连续效果") {
            action->setText("隐藏效果");
            setSecondStyle(SecondStyle_Continue);
        } else if (str == "隐藏效果") {
            action->setText("普通效果");
            setSecondStyle(SecondStyle_Hide);
        } else if (str == "普通效果") {
            action->setText("弹簧效果");
            setSecondStyle(SecondStyle_Normal);
        }
    }
    

    六、控件介绍

    1. 超过150个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
    2. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
    3. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.13的任何Qt版本,支持mingw、msvc、gcc等编译器,支持任意操作系统比如windows+linux+mac+嵌入式linux等,不乱码,可直接集成到Qt Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
    4. 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
    5. 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
    6. 每个控件默认配色和demo对应的配色都非常精美。
    7. 超过130个可见控件,6个不可见控件。
    8. 部分控件提供多种样式风格选择,多种指示器样式选择。
    9. 所有控件自适应窗体拉伸变化。
    10. 集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
    11. 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
    12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
    13. 所有控件最后生成一个动态库文件(dll或者so等),可以直接集成到qtcreator中拖曳设计使用。
    14. 目前已经有qml版本,后期会考虑出pyqt版本,如果用户需求量很大的话。
    15. 自定义控件插件开放动态库使用(永久免费),无任何后门和限制,请放心使用。
    16. 目前已提供26个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
    17. 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
    18. Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》《Qt5编程入门》,Qt进阶书籍推荐官方的《C++ GUI Qt4编程》。
    19. 强烈推荐程序员自我修养和规划系列书《大话程序员》《程序员的成长课》《解忧程序员》,受益匪浅,受益终生!
    20. SDK下载链接:https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取码:877p
    展开全文
  • 这些控件主要是用QML编写的,没有使用太多的C++。当时,QML还是一种新技术,这意味着我们在性能设计方面没有足够的经验,不知道会有什么结果。因此,造型API在设计上最终是低效的,它有很多肥大的委托,在控制逻辑和...

    Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmattan,MeeGo或BB10)以及嵌入式设备,Android(Necessitas)和iOS的端口上运行。

    Qt官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网www.evget.com
    03df5fa628175fe77089c801736e5180.png

    Qt Quick Controls 1是我们第一个QML的UI框架。这些控件主要是用QML编写的,没有使用太多的C++。当时,QML还是一种新技术,这意味着我们在性能设计方面没有足够的经验,不知道会有什么结果。因此,造型API在设计上最终是低效的,它有很多肥大的委托,在控制逻辑和造型上都使用了大量的JavaScript、绑定、自省、Loaders和QObjects。它还存在对Qt Widgets的链接依赖,以获得本地的样式和基于Widget的对话框。而如果没有我们今天的QML编译器,这一切最终都是一种相当缓慢和混乱的方法。Qt Quick Controls 2是当我们意识到它在嵌入式硬件上的表现也不好时重新考虑解决方案。

    Qt Quick Controls 2

    对于 Controls 2,我们的基本想法是将大部分的实现从 QML 转移到 C++。通过这样做,我们的目标是尽可能地精简代表,而不是从C++中去做繁重的工作。这包括所有的控制逻辑、鼠标、触摸、事件处理、API等等。只有视觉效果被留在QML中定义。这就导致了精简的委托,更少的运行时开销,更少的内存使用,更清晰的代码流,以及更快的执行速度。

    但有一点是目前为止一直缺少的,那就是对原生桌面样式的支持。Controls 2的主要动机是在嵌入式设备上实现良好的性能,由于我们有桌面的Qt Widgets,我们算是接受了一些基本的桌面功能缺失。我们提供了有开放文档的样式(Universal,Material),并使创建自定义的样式变得容易。但现在,自Qt 5.12以来,Controls 1已经被废弃,并且也将被排除在Qt 6二进制包之外,现在是时候重新开发面向桌面的样式了。

    本地桌面风格

    在 Qt 6.0 中,我们为 Controls 2 增加了两种新的桌面风格:Windows 和 macOS。与现有的Fusion风格使用Qt Quick基元不同,这些新风格使用QStyle进行绘制。原因是它仍然能很好地与 "低级 "平台API对接,以获得真正的原生样式。但我们并没有与Widgets共享QStyle,而是专门为Controls制作了一份专属副本。后者听起来可能很奇怪,因为我们很自然地认为共享一个代码库是一种更简单的方法。但原因有几个:首先,我们不想破坏Widgets或任何第三方的风格。而且我们不能在不破坏源码兼容性的情况下将QStyle从Widgets中剔除。QStyle不仅在它的API中到处都有对Widgets的引用,而且它还直接使用了Widgets本身的枚举和常量。同时,我们也不希望 Controls 在未来很长一段时间内对 Widgets 产生依赖性。

    另一个原因是,我们希望能够自由地在任何我们认为合适的地方修改代码。我们可以通过很多方法来优化QStyle-copy,以更好地适应Qt Quick场景图和Controls styling API。其中一个变化是,我们只使用QStyle来绘制控件的背景。同样的背景贴图将被缓存并重用于所有相同类型的控件,并在QSGNinePatchNode的帮助下缩放到正确的大小。文本和前景将使用正常的QML渲染在上面。而对于所有这样的差异,我们希望能够在不受限制或担心保持与Widgets的兼容性的情况下实现它们。出于同样的原因,我们使用QStyle进行绘制是一个私人的实现细节。Controls已经有了一个很好的样式API,我们不想再引入和维护第二个。

    最后,我们不一定要让原生样式看起来和Widgets完全一样。对于一些控件,我们使用了一种混合的方法,用QML在QStyle绘制的纹理上添加动画和渐变效果。最后,我们真正想要的是让原生样式具有流畅的性能,并且尽可能地看起来 "原生",而不一定要像Widgets一样。

    Qt 6.0准备了什么?

    对于 Qt 6.0,大多数控件都会被新的桌面样式所支持。但并不是所有的控件都支持。将被遗漏的是那些目前在QStyle中还没有实现的控件,比如Switch或RangeSlider。它们仍然可以使用,但将用Fusion风格绘制。缺失的控件将在即将发布的Qt中逐步得到支持,原生对话框和菜单也是如此。如果我们看得更远,我们的计划包括提供更多以桌面为中心的控件,这些控件你可能会在今天的Widgets或本地工具包中找到。

    所以,还有很多事情要做。但是,我们认为新的桌面风格是未来几年内让Controls与Widgets在桌面开发方面平起平坐的第一步。

    下面是使用新的桌面样式运行的Qt Quick Controls 2应用程序的截图。需要注意的是,这仍然是一项持续的工作,任何小问题都会在最终发布之前被解决。

    eda771d40b82e2cfd8c4c1573d3a26f6.png

    Qt商业组件Qtitan推荐:

    • QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
    • QtitanChart | 下载试用 : 是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
    • QtitanDataGrid| 下载试用 : 适用于Qt的商业化DataGrid 组件,使得表格数据可以直接面向终端用户完全集成了QtDesigner,极易适应其他相似开发环境,保证100%兼容Qt GUI。

    感谢您的阅读,希望这篇文章能带给你一定的帮助!如果这篇文章没能满足你的需求、点击获取更多文章教程

    展开全文
  • qml写 一个app时需要一个时间控件发现qml中的日历太累赘了,然后就自己写了个精简点的时间选择控件具体效果如下可以选择是否需要年,同时通过自定义的参数实现布局以及获取数据1、当前时间的获取Component....

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

    具体效果如下

    4a1249ad49187ff3f9603e8dc0f1f0f4.png

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

    1、当前时间的获取Component.onCompleted: {

    var date = new Date();

    year.curTime = date.getFullYear();

    month.curTime = date.getMonth()+1;

    day.curTime = date.getDate();

    }

    当前月份需要+1

    2、外部接口

    (1)、当前时间的获取property int h_offset: 0;//横向偏移值(以横向的中心)

    property int topmargin: 0;//顶部距离

    property bool isNeedyear: true;//是否需要年份

    property string time: "";//用来获取TextField中的时间

    (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来获取对应的时间

    998384ad34295e5591d095ec3b6403eb.png

    4、整个控件的组成

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

    5、最后贴下下载链接

    代码比较简单不想传github

    展开全文
  • 这段时间在写树的时候需要用到右键菜单,但是原生的不太好看,且用起来有点僵硬(不太熟悉),于是抱着手艺人的素养,就自己鼓捣了一个出来,虽然不一定非常通用,但是自己做出来的使用比较方便,后期的改动也会比较...
    • 效果

    • 摘要

     这段时间在写树的时候需要用到右键菜单,但是原生的不太好看,且用起来有点僵硬(不太熟悉),于是抱着手艺人的素养,就自己鼓捣了一个出来,虽然不一定非常通用,但是自己做出来的使用比较方便,后期的改动也会比较方便。

    • 原理

    为了更方便的调用下级节点,第一级菜单使用的是Repeater,第二级使用的是listview,通过它们自身的动态创建,来实现多级菜单,而为了更方便的使用,菜单的model使用Jason来传入,所以基本思路就是解析传入的model,根据model来动态创建节点,以实现菜单的效果。

    • 代码

    main.qml  子定义菜单的调用 

    import QtQuick 2.7
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("闻天语~")
        property var model: {"七里香":["借口","外婆","将军","搁浅","乱舞春秋","困兽之斗","园游会"],
                             "十一月的萧邦":["夜曲","发如雪","推流","枫"],
                             "依然范特西":["夜的第七章","听妈妈的话","本草纲目"],
                             "我很忙我很忙":["牛仔很忙","彩虹","蒲公英的约定"],
                             "魔杰座":["稻香","蛇舞","花海","魔术先生","说好的幸福呢","兰亭序","乔克叔叔"],
                             "叶惠美":["晴天"," 东风破","她的睫毛"],
                             "八度空间":["半岛铁盒","龙拳","回到过去"],
        }
        color: "dimgray"
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.RightButton|Qt.LeftButton
            onClicked: {
                if(mouse.button == Qt.RightButton)
                {
                    menu.show(mouse.x,mouse.y)
                }else{
                    menu.close()
                }
            }
        }
        MenuEx{
            id:menu
            visible: false
            mainModel:model
            btnHeight: 25
            width: 100
            x:20
            y:20
        }
    }
    

    MenuItemEx.qml 菜单的子项

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    
    Rectangle{
        id:itemRoot
        property variant model: []
        property string showText : ""
        property ExclusiveGroup exclusiveGroup:exp
        property bool checked: false
        onExclusiveGroupChanged: {
            if (exclusiveGroup)
                exclusiveGroup.bindCheckable(itemRoot)
        }
        height:btnHeight
        color:checked?colo_c:menuRoot.color
        Text {
            text: showText
            anchors.centerIn: parent
        }
        MouseArea{
            id:mainMouse
            anchors.fill: parent
            hoverEnabled:true
            onEntered:checked=true
        }
        Component.onCompleted:
        {
            for(var i in model)
            {
                listModel.append({"sText": model[i]})
                console.log("s"+i ,model[i])
            }
        }
        ListModel
        {
            id:listModel
        }
        Rectangle
        {
            anchors.left:parent.right
            anchors.leftMargin: 3
            height: parent.height*model.length+2*extra
            width: parent.width
            color: menuRoot.color
             visible:itemRoot.checked
             radius: extra
            ListView
            {
                model:listModel
                height: parent.height-8
                width: parent.width
                y:extra
                id:listview
                delegate:Rectangle
                {
                    color: listview.currentIndex==index?"lightblue": childMouse.containsMouse?colo_c:menuRoot.color
                    Text {
                       x:20
                        anchors.verticalCenter: parent.verticalCenter
                        text: sText
                    }
                    height:btnHeight
                    width:itemRoot.width
                    MouseArea{
                        anchors.fill: parent
                        id:childMouse
                        hoverEnabled: true
                        onClicked: {
                                listview.currentIndex=index
                        }
                    }
                }
            }
        }
    }
    

    MenuEx.qml 菜单

    import QtQuick 2.0
    import QtQuick.Controls 1.4
    
    Rectangle{
        id:menuRoot
        color: "white"
        property int btnHeight: value
        property int extra: 5
        property variant mainModel:[]
        property variant keys : []
        property string colo_c: "lightgray"
        height: btnHeight*keys.length+2*extra
        radius: extra
        Component.onCompleted:
        {
            keys=Object.keys(mainModel)
            for (var i in keys)
            {
                mainListModel.append({"btnText":keys[i]})
            }
        }
        ExclusiveGroup{id:exp}
        ListModel
        {
            id:mainListModel
        }
        ListView
        {
            y:extra
            height: parent.height-8
            model:mainListModel
            width: parent.width
            delegate: MenuItemEx
            {
            showText:btnText
            model:mainModel[btnText]
            width:menuRoot.width
        }
    }
    function show(inX,inY)
    {
        menu.x=inX
        menu.y=inY
        visible=true
    }
    function close()
    {
        exp.current.checked=false
         visible=false
    }
    }
    
    • 扩展

    因为只是个母本,所以真的需要什么功能可以自己去扩展,手艺人更多的是提供一个思路。因为目前是只支持两级菜单,所以以后可以拓展出多级来,和现在的思路一样,通过解析传入的Jason是否存在多级菜单,来确认是否需要再复用MenuItemEx。如果想要排序也很简单,解析出来的model在加入之前,先把解出来的列表排个序,比如第一级菜单,就可以在传入Repeater之前调用keys.sort()。暂时能想到的扩展就这些了,如果有什么好的建议或者疑问,请联系QQ995187021.

    展开全文
  • QML仿手机时间滚筒控件

    千次阅读 2017-07-04 17:21:10
    QML仿手机时间滚筒控件注意里面的图片使用自己的图片代替 使用自己封装的TimePathView.qml、TimePathItem.qml 控件\效果图 DatePage 使用代码 DatePage { id: datePage anchors.fill: parent show: ...
  • QML日期选择控件

    2021-01-07 13:33:38
    Qml中没有现成的日期时间选择控件,自己做了个,代码实现较为简单,没有过多需要介绍的,控件加载会自动获取当前日期,转动拨盘会根据当前年、月匹配当月天数,代码如下,直接复制到Qml中加载就可以使用了
  • qml实现简单的时间选择控件
  • Qt:QML控件类关系图

    千次阅读 2016-10-25 17:08:28
    简介花了点时间整理了下QML控件之间的关系图和QML控件和C++类的对应关系,基于Qt5.6版本 其他版本可能会有差异图片像素比较大,另存为后放大图片就可以看清楚了工程下载地址QMLClassDiagram
  • Qt QML实现时间日期选择控件

    千次阅读 2019-12-17 15:25:49
    先看图 打开界面,会自动获取到当前...以下是该控件功能的主要代码 import QtQuick 2.0 import QtQuick.Extras 1.4 import QtQuick.Controls 1.4 import QtQuick.Layouts 1.3 import QtQuick.Controls.Styles ...
  • 可能我用QtWidgets用习惯了,感觉qml少很多控件,然后很多东西需要自己写:我发现qml没有时间日期编辑器/选择器,所以我模仿了QDateTimeEdit,根据思路的不同写了两个版本。 代码和说明 QDateTimeEdit可以通过两...
  •  前段时间工作需要使用QML的TreeView,要通过拖动节点,对应节点执行对应的操作,查了很多的资料,没有看到关于节点可拖动的资料,查看TreeView的源码,貌似存在关于节点拖动的地方,但是始终没有看到可以使用的...
  • QML自定义时间选择器

    千次阅读 2018-10-08 19:23:27
    但是qml官方只提供日期控件,因此自己定义了时间控件 注意 QtQuick 2.9不要降低版本 否则会有内部的信号处理器无法使用 import QtQuick 2.9 import QtQuick.Controls 2.3 Rectangle { property int hour: 0; ...
  • 1、QML没有类似与Qt Widgets中的LCD Number控件,可以在https://www.dafont.com/theme.php?cat=302下载LCD效果的字体DS-Digital 2、把字体文件添加到Resources中,如何添加参见第一篇文章; 3、SendTime.qml中的代码...
  • 最近遇到一个QML播放视频的问题。目前做法是用C 封装一个图片控件QML使用,底层不断上传图片数据(char*),但是paint函数执行时间过长,导致图片有丢帧的现象,画面不流畅,请问该如何解决?谢谢!
  • |本文大概阅读时间5分钟。 |版权说明:原创文章,如需转载,请标明文章出处。https://blog.csdn.net/weixin_40192195/article/details/109205056 目录一.前言1.Layout(布局)1)ColumnLayout(垂直布局)2)...
  • Time_Qml.zip

    2019-12-17 15:30:39
    Qt QML实现时间日期选择控件 工程文件 解压打开pro文件,编译打开。纯QtQuick QML实现
  • 运行时间: .NET Framework .NET核心 单核细胞增多症 操作系统 Linux OSX 视窗 第一眼 电梯间距 经过生产验证。 建立了GUI /控制框架,从台式机到嵌入式,已在许多行业中使用。 优秀的社区,提供许多开源控件...
  • opencv视频采集封装qml

    千次阅读 2017-10-15 16:29:47
    能封装成qml控件。我们都知道qml是c++的扩展,opencv原本就是用c++实现的,所以这个并不是很难。 qml绘图的基元素是Item,Item是由QuickItem实现的。所以这里我们应该从QuickItem入手。为简单易用,我写成了qml插件 ...
  • 浅谈 Qml Loader使用

    2020-05-30 18:03:42
    Performance 一直是令人头疼的问题,最近的一个项目对性能的要求比较高,Qml中大量控件的使用导致画面加载的时间不能直视。 Loder 可以实现在需要的时候进行加载,为异步加载提供了可能。为优化Performance提供了一...
  • qml中打印log

    千次阅读 2018-03-27 10:08:21
    在Qt的qml中在进行调试时,获取一些数据的状态比较麻烦,我们可以在控件中添加一个定时器,其中interval表示打印的时间间隔,之后在console.log中传入控件的属性值就可以查看属性状态.Timer{  id: _timer  interval: ...
  • QML之TimeEdit的实现

    千次阅读 2015-08-19 12:46:41
    在使用QML设计界面的时候,用到了时间编辑框,发现QML中没有提供类似QTWidget中的QTimeEdit控件。后来没有办法就自己使用TextField和Calendar封装了一个TimeEdit组件 1、自定义编辑框TimeInput组件 时间编辑框通常都...
  • 这段时间一直在学习 QML 的语法和基础组件,限于 QML 目前不太成熟,没有十分丰富的控件,加上自己水平有限,做出来的东西感觉不好看,于是想找个开源的项目来学习一下。功夫不负有心人,虽然 QML 目前资料不多,但...
  • QML状态、动画

    2020-08-25 13:49:46
    状态设置 状态一 状态二 状态三 点击切换 过渡设置 过渡一 过渡二 过渡三 ...每500毫秒更新一次时间 ...• 一个描述model中每条数据的显示方式的控件 • View • 可视的元素,使用delegate来显示
  • 前段时间研究了一下Kotlin和flutter,其中flutter正处于被谷歌扶持的际遇下,要学习的话很容易被迫和谷歌相关绑定。而Kotlin工程的管理令我有些迷惑,XML的...这次为了实现一些控件效果,打算学习应用QML的图形效...
  • SortFilterProxyModel基于QML的QSortFilterProxyModel控件学习(一) 应用背景 现有的项目中已经实现了model/view,在此基础上,为了不对代码进行大规模的修改,第二由于本身对于重新去搭建新的SortFilterProxyModel...
  • 需要导入控件import QtQuick.Controls 2.2 属性只有一个 running: 保持繁忙指示器是否指示活动 例1 BusyIndicator{ id:busyindicator anchors.centerIn: parent width: 100 height: 100 running: true } 例...
  • QtQuick :仪表控件

    2019-12-20 17:30:50
    以前使用仪表控件都是自己绘制,比较浪费时间。偶然发现Qt已经提供了相关控件,只需在其基础上修改属性即可,非常方便,于是记录之。 Gauge QML Type 线性仪表 Import Statement:import QtQuick.Extras 1.4 ...

空空如也

空空如也

1 2 3
收藏数 41
精华内容 16
关键字:

qml时间控件