QML学习 第一天

目录

创建一个demo:

打开VS2022

选择自己的存储路径已经项目名称:

接下来配置Qt

选择编译环境:

运行一下:

QML知识:

注意:使用VS2022开发QML的时候既是写错了属性VS是不会报错的,但是软件就是运行不起来.所以使用vs开发qml一定注意qml的属性一定要检查是否正确.

在QML中定义信号槽:

---

创建QML,我使用的环境是win10系统,VS2022+Qt6.2学习QML.

环境搭建不说了,其实很好搭建网上有很多关于搭建的方法.

创建一个demo:

打开VS2022

 

选择自己的存储路径已经项目名称:

接下来配置Qt

选择编译环境:

我这里选择vs2019 debug版的

运行一下:

基本的已经创建完成了.

接下来学习QML中的知识了.之前看过一点,个人个人觉得跟WPF比较类似.感觉比较亲切.不知道以后好不好学.

QML知识:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

这个就是QML创建时候的默认代码

代码中的这个Window就是运行后的窗口,其中有几个属性.

第一个属性就是是否可见属性, visible 如果设置为true即为可见,false既是代码在运行也不会出现窗口.

height和width是设置窗口的高度和宽度的.

title属性是设置窗口的标题的.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {//root 控件,相当于主界面
    visible: true
    width: 640
    height: 480
    x:50
    y:60    //相对于父控件
    title: qsTr("My QML")
}

代码段中的x和y属性是设置软件从哪里显示的.现在软件是从(50,60)这个坐标开始显示.相对于window这个控件,window就是显示器坐标.

要是其他空间的x和y就是相对于其他控件的位置.

显示器坐标是以左上角为原点,大概是这样的.

限制窗口大小

    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 800
    maximumHeight: 500

注意:使用VS2022开发QML的时候既是写错了属性VS是不会报错的,但是软件就是运行不起来.所以使用vs开发qml一定注意qml的属性一定要检查是否正确.

    color:"#FF00FF"
    opacity:0.5

color是设置窗体的颜色的

opacity是设置窗体透明度的

在QML中定义信号槽:

在qml中自定义信号:signal mySig()

这就是一个信号,mySig就是一个信号;

槽函数:

    onMySig:{
    
    }

其中前面的on和M一定要大写.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400
    minimumWidth: 400
    minimumHeight: 300
    maximumWidth: 800
    maximumHeight: 500
    color:"#FF00FF"
    opacity:0.5
    title: qsTr("My QML")

    signal mySig()





    onMySig:{
    
    }
}

    Button{
        id:btn1
        width:50
        height:50
        focus:true
        objectName:"btn1"
        background:Rectangle{
            border.color:btn1.focus?"blue":"black"
        }
        onClicked:{
            console.log("btn1 clicked")
        }
        Keys.onRightPressed:{
            btn2.foucs = true
        }
    }
    Button{
        id:btn2
        width:50
        height:50
        x: 100
        objectName:"btn2"
        background:Rectangle{
            border.color:btn2.focus?"blue":"black"
        }
        onClicked:{
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed:{
            btn1.foucs = true
        }

    }

这是添加button空间:import QtQuick.Controls 2.3需要添加

        onClicked:{
            console.log("btn1 clicked")
        }

这个就是系统槽函数.