QML简介及window类

魔法机

已于 2023-08-04 16:02:12 修改

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏： QML学习教程文章标签： qt

于 2023-08-04 15:54:19 首次发布

本文链接：https://blog.csdn.net/qq_43302493/article/details/132103024

QML学习教程专栏收录该内容

2 篇文章

订阅专栏

本文介绍了QML作为Qt的用户接口规范，用于桌面程序开发。讲解了QML环境搭建、新建QML工程的过程，并重点解析了window类，包括其常用属性如坐标、尺寸、透明度，以及信号和槽的使用方法。此外，还提及了窗口焦点管理的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

QML 早已经不限于开发手机应用，也可以支持用户开发传统的桌面程序。Qt5 将 QML 脚本编程提到与传统 C++ 部件编程相同的高度，开始力推 QML 界面编程。

QML是一种描述性的脚本编程语言（什么东西长什么样子，可以干啥）
QML是一个用户接口规范。

这么说可能有点抽象，qt和qml的关系可以类比为java和javascript，在实际开发中，一般都是先使用qml绘制用户界面，内部的业务处理逻辑需要c++来处理，这个和javascript类似，使用javascript来完成前台界面绘制，java完成后台逻辑。那么有人可能会问，现在都是vue、react是主流，谁还使用原生javaScript呢？其实上述两个是基于javascript实现的前端框架，同理，也有基于qml实现的框架，在完成qml基础后，再详细说明相关框架的使用。那么言归正传，简介部分不再过多赘述，直接进入正题。

环境搭建

本人使用的是macOS，相关安装说明及windows环境搭建不在本文讨论范围内，读者自行查阅相关资料。那么如何新建一个QML工程呢？

新建项目，选择上述选项（见图1），配置文件路径和编译器，一路Next，打开项目，如图2所示。

图1 新建项目

图2 项目起始页

点击运行，出现图3，项目新建成功。

图3 运行结果

window类

我理解的window类用于提供一个窗口类，在window窗口中可以定义自己的组件，类似于QT中widget的概念。主要的属性和方法可以查看qt助手，如图4:

图4 window常用属性

常用属性

下面介绍几个常用的属性：

x：相对于父容器的x坐标；
y：相对于父容器的y坐标；
width：宽度；
height：高度；
minmumHeight：最小高度，设置后拖拽窗口高度达到最小高度后不可再缩小，下同；
maxmumHeight：最大高度；
minmumWidth：最小宽度；
maxmumWidth：最大宽度；
opacity：透明度，0～1之间。

信号和槽

window内可以通过关键字signal自定义信号，对应的槽函数通过on+信号名称（驼峰命名法）来接收信号，看下面这个例子：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    minimumWidth: 640
    maximumWidth: 800
    opacity: 0.5
    signal mySignal()
    onWidthChanged: {
        mySignal()
    }
    onMySignal: {
        console.log("width changed:"+width)
    }

}

这个例子实现了：当改变窗口宽度时，打印窗口宽度，分别使用了原生的信号槽和用户自定义的信号槽，注意⚠️命名规范，ps：不知道写过网页前端的读者看到console.log进行输出，是不是DNA动了...反正我当时是的。

同时，还可以为自定义的变量添加槽函数，如下代码：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    minimumWidth: 640
    maximumWidth: 800
    opacity: 0.5
    property int  m_param: 10
    signal mySignal()
    onWidthChanged: {
        mySignal()
        m_param++;
    }
    onMySignal: {
        console.log("width changed:"+width)
    }
    onM_paramChanged: {
        console.log("m_param:"+m_param)
    }

}

焦点

在多组件时，易发生焦点抢占问题，下面是个获取焦点的例子：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    minimumWidth: 640
    maximumWidth: 800
    opacity: 1
    property int  m_param: 10
    signal mySignal()
    onWidthChanged: {
        mySignal()
        m_param++;
    }
    onMySignal: {
        console.log("width changed:"+width)
    }
    onM_paramChanged: {
        console.log("m_param:"+m_param)
    }
    color: "purple"
    Button{
        id:btn1
        objectName: "btn1"  //设置组件名称
        width: 50
        height: 50
        x:40
        y:40
        focus: true //默认获取焦点
        background: Rectangle{
            border.color: btn1.focus?"blue":"red"
            border.width: 10
        }
        //键盘事件
        Keys.onTabPressed: {
            btn2.focus = true;//设置焦点
        }
    }
    
    Button{
        id:btn2
        objectName: "btn2"  //设置组件名称
        width: 50
        height: 50
        x:100
        y:40
        focus: false
        background: Rectangle{
            border.color: btn2.focus?"blue":"red"
            border.width: 10
        }
        //键盘事件
        Keys.onReturnPressed: {
            btn1.focus = true;  //将焦点归还
        }
    }
    //捕捉焦点变化的槽函数
    onActiveFocusItemChanged: {
        console.log("active focus item name:", activeFocusItem, activeFocusItem.objectName) //输出焦点
    }
    
}

以上就是关于window相关的所有内容。