qml小案例

最近看了qml,看了一个别人的案例，还是有所启发的
这个就是一个倒计时算离2022过年有多少天的程序，用到了定时器还有动画图片以及设置背景的技术。
首先实现距离2022过年的具体时间再把它想办法放在一个text文本框中，然后要实现去程序框，让他看起来好看一点，这个主要是在main函数中完成的，用定时器每隔500微妙，触发一次，调用一次run函数，然后用按钮实现右击出现并退出，这个里面又用到鼠标事件，比如右击后按钮的位置和鼠标的位置之间的关系，还有拖动的鼠标位移量的东西，然后文本框就是显示距离天数的，用锚布局放置，还有一个就是gif图片显示，都有注释介绍：

main函数：

#include <QQuickView>
#include <QGuiApplication>
#include <QQmlContext>

int main(int argc, char *argv[])
{
   QGuiApplication app(argc, argv);

   QQuickView view;
   view.setTitle("倒计时小程序");
   //返回上下文层次结构的根
   view.rootContext()->setContextProperty("view", &view);


   //将源设置为url，加载QML组件并实例化它。
   //确保提供的URL是完整和正确的，特别是在从本地文件系统加载文件时使用
   view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));


   //设置没有背景透明
   QSurfaceFormat surfaceFormat = view.requestedFormat();

   //设置颜色缓冲的alpha通道的所需大小。
   surfaceFormat.setAlphaBufferSize(8);
   //设置QML的场景图形渲染是否在开始渲染前清除颜色缓冲区为启用状态。
//   view.setClearBeforeRendering(true);
   view.setColor(QColor(Qt::transparent));
   设置窗口无边框且窗口显示在最顶层
   view.setFlags(Qt::FramelessWindowHint | Qt::SubWindow | Qt::WindowStaysOnTopHint);
   view.setFormat(surfaceFormat);

   view.show();
   return app.exec();

}

qml:

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Window 2.2
Item {
    id: root
    width: 240
    height: 240
//    width: 560
//    height: 500
    property var txtday: ""
    property var newdate: new Date("2022-02-01 00:00:00")
    property var newyear: newdate.getFullYear()
    property var newmonth: newdate.getMonth()
    property var newday: newdate.getDate()
    property var newhour: newdate.getHours()
    property var newminute: newdate.getMinutes()
    property var newsec: newdate.getSeconds()
    function run(){
        var date = new Date
        //1970-到目前   毫秒
        var msec = parseInt((newdate.getTime() - date.getTime())/1000)     
        var lesssec = msec % 60
        //字符串-整数
        var lesssec_other = parseInt(msec / 60)
        //分
        var lessminute = lesssec_other % 60
        var lessminute_other = parseInt(lesssec_other / 60)
        //时
        var lesshour = lessminute_other % 24
        //天
        var lessday = parseInt(lessminute_other / 24)      
        txtday = "距离2021年春节还剩" + lessday + "天 " + addZero(lesshour) + ":" + addZero(lessminute) + ":" + addZero(lesssec)
    }
    function addZero(v){
        if(v<10)
            return '0' + v
        return v
    }
    //允许在 QML 文档中内联定义 QML 组件，而不是作为单独的 QML 文件
    //在对象被实例化后发出。这可用于在启动时执行脚本代码。

    Component.onCompleted: {
        view.setX(Screen.width - root.width - 5)
        view.setY(Screen.height - root.height - 45)
    }

    Timer{
        id: timer
        //定时器启动后立即触发
        triggeredOnStart: true
        //设置定时器定时时间为500ms,
        interval: 500
        //是否重复定时
        repeat: true
        //是否开启定时
        running: true
        //定时触发槽,定时完成一次就进入一次
        onTriggered: {
            run()
        }
    }

    MouseArea {
        id: dragRegion
        //鼠标区域作用域
        anchors.fill: parent
        property point clickPos: "0,0"
        //接收那个按键的事件
        acceptedButtons: Qt.RightButton | Qt.LeftButton
        onPressed: {
            //坐标点
            clickPos  = Qt.point(mouse.x,mouse.y)
            if(mouse.button === Qt.RightButton){
                btnClose.x = mouse.x-btnClose.width/2
                btnClose.y = mouse.y-btnClose.height/2
                btnClose.visible = true
            }
            else{
                btnClose.visible = false
            }
        }
        //鼠标位置改变 就是鼠标拖动
        onPositionChanged: {
            //鼠标偏移量
            var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
            //如果mainwindow继承自QWidget,用setPos
            view.setX(view.x+delta.x)
            view.setY(view.y+delta.y)
        }
    }

    Button{
        id: btnClose
        text: "退出"
        z: 10
        visible: false
        onClicked: view.close()
    }

    Text{
        id: txt
//        anchors.horizontalCenter: parent.left
        //"距离春节还剩" + day + "天"
        text: txtday
        color: "black"
        //高度
//        y: 30
        font.pixelSize: 14
        font.family: "微软雅黑"
    }

    AnimatedImage{
        //动画
//        source: "qrc:/okk.gif"
        source: "qrc:/a.gif"

    }
}