QT学习笔记-qml开发

---

一、qml工程创建

1.新建一个项目

1.选择Qt Quick Application - Empty，点击choose。

2.选择创建路径和项目名称（不能有中文），后面一直点击下一步到工程建立完成。

2.项目中新建不同子文件

1.新建一个文件

2.文件路径和项目路径保持一致，文件命名不能出现中文

3.文件生成

4.在项目中编辑并调用子文件
1）主函数main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle{
   
   
        x:100
        y:150
        z:1			//Z轴控制该元素图层位置
        width: 200
        height: 100
        color: "red"
    }
    MyRectangle{
   
   	//子文件名称
        x:200
        y:200
        z:0				//Z轴控制该元素图层位置
        width: 200      //主函数和子函数都可以定义
        height: 100
        myTopMargin: 10     //子函数中定义的变量可在主函数中传递参数
        myBottomMargin: 10  //上下边框距离
    }
}

2）子函数MyRectangle.qml

import QtQuick 2.0

    Rectangle{
   
   
        id:borderRect   //矩形元素id
        property int myTopMargin : 0    //自定义上边框，可在主函数中调用
        property int myBottomMargin : 0
        color: "black"
        Rectangle{
   
   
            id:innerRect    //矩形元素id
            color: "yellow"
            anchors.fill:parent     //填充整个父类窗口
            anchors.topMargin: myTopMargin    //距离上边框
            anchors.bottomMargin: myBottomMargin //距离下边框
            anchors.leftMargin: 5   //距离左边框0
            anchors.rightMargin: 5  //距离右边框0
        }
    }

3）效果图如下

二、qml语法

1.qml基本结构

元素名 {
   
   
    属性名1: 属性值1
    属性名2: 属性值2
    ...
    子元素1 {
   
   
        ...
    }
    子元素2 {
   
   
        ...
    }
    ...
}    

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
   
   
    width: 640		//宽
    height: 480		//高
    visible: true	//是否可见
    title: qsTr("Hello World")		//标题
    //子元素1--矩形
    Rectangle {
   
   
    	width: 100
    	height: 100
    	color: "red"
	}
	//子元素2--文本
	Text {
   
   
    	text: "Hello World"
    	font.bold: true
    	font.pixelSize: 24
    	color: "red"
	}	
}

2.信号和槽

1.在 QML 中，可以通过信号和槽来实现元素之间的通信。信号是元素发出的消息，槽是元素接收消息的处理函数。
2.可以使用 onXXX 属性来定义信号，例如 onTextChanged 表示文本改变的信号。（on后面首字母要大写）
3.可以使用 Connections 元素来连接信号和槽，例如：

Rectangle {
   
   
    width: 100
    height: 100
    color: "red"
 
    signal clicked()	//定义信号--clicked
 
    MouseArea {
   
   			//监听鼠标事件
        anchors.fill: parent
        onClicked: parent.clicked()
    }
}
 
Rectangle {
   
   
    width: 100
    height: 100
    color: "blue"
 
    Connections {
   
   		//槽函数
        target: redRect
        onClicked: {
   
   	//点击事件发生后打印"Red rectangle clicked!"
            console.log("Red rectangle clicked!")
        }
    }
}

三、qml基本元素

1.Rectangle 矩形

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
   
   
//    x:30            //位置
//    y:30

    width: 320      //大小
    height: 240

//    minimumWidth: 320   //最小宽度
//    minimumHeight: 240  //最小高度
//    maximumWidth: 640   //最大宽度、高度
//    maximumHeight: 480

    visible: true   //是否可见
    title: qsTr("运行")   //标题

    opacity: 0.9     //窗口透明度、0-1的任意数(可以是小数)

    signal mysig()   //自定义信号

    //触发信号后实现的功能
    onMysig: {
   
   
    }

    //窗体生成控件能够自动生成对应信号和槽函数
    onWidthChanged: {
   
   
        console.log("width:",width)   //打印输出当前宽度值
    }
    onHeightChanged:{
   
   
        console.log("height:",height)   //打印输出当前宽度值
    }
    Button {
   
   
        id: btn1
        x:30
        y:30
        width: 60
        height: 40
        focus : true
        background: Rectangle{
   
   
            border.color: btn1.focus ? "blue" : "black" //边框颜色是否有点击，有为蓝色，没有为黑色
        }
        onClicked: {
   
   
            console.log("btn1 clicked") //按钮按下打印btn1 clicked
        }
        Keys.onRightPressed: {
   
             //键盘右键按下聚焦到按钮2
            btn2.focus = true
        }
    }
    Button {
   
   
        id: btn2
        x:100
        y:30
        width: 60
        height: 40
        background: Rectangle{
   
   
            border.color: btn2.focus ? "blue" : "black" //边框颜色是否有点击，有为蓝色，没有为黑色
        }
        onClicked: {
   
   
            console.log("btn2 clicked")
        }
        Keys.onLeftPressed: {
   
   
            btn1.focus = true
        }
    }
    onActiveFocusItemChanged: {
   
   
        console.log("active focus item changed",activeFocusItem)
    }

    Rectangle{
   
         //矩形
        id:rect1
        x:10
        y:10
        z:1         //Z轴控制在哪一图层
        width:100
        height:50
        color: "blue"

        MouseArea{
   
         //聚焦鼠标
            onClicked: {
   
   
                console.log("on clicked rt1")
            }
        }

    }
    Rectangle{
   
         //矩形
        id:rect2
//       anchors.fill:parent     //填充满父类窗口
//        anchors.horizontalCenter: parent.horizontalCenter    // 水平居中于父窗口,会随窗口变化
//        anchors.verticalCenter: parent.verticalCenter       // 垂直居中于父窗口,会随窗口变化
        anchors.centerIn: parent    //居于父窗口中心，会随窗口变化
//        anchors.left: rect1.right     //当前矩形左边等于rt2的右边
//        anchors.leftMargin: 20      //当前矩形与之前矩形20
        width:100
        height:50
        color: "red"
    }
    Rectangle{
   
         //矩形
        id:rect3
        anchors.top:rect1.bottom
        anchors.topMargin: 20
        width:100
        height:50
        color: "black"
    }
    Rectangle{
   
         //矩形
        id:rect4
        x:50
        y:100
        z:1
        width:50
        height:100
//        color: "yellow"
        rotation: 45    //旋转角度
        scale: 0.5  //放大缩小
//        opacity: 0.5    //透明度
        border.width: 5     //内边框
        border.color: "red" //红色
        radius: 30          //边角弧度
        gradient: Gradient {
   
       //渐变色从0-1 浅蓝-蓝
            GradientStop {
   
   position: 0.0;color: "lightsteelblue"}
            GradientStop {
   
   position: 1.0;color: "blue"}
        }
    }
}

2.Text 文本

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
   
   
    width: 640		//宽
    height: 480		//高
    visible: true	//是否可见
    title: qsTr("Hello World")		//标题
    //子元素1--矩形
    Rectangle {
   
   
    	width: 100
    	height: 100
    	color: "red"
	}
	//子元素2--文本
	Text {
   
   
    	text: "Hello World"
    	font.bold: true
    	font.pixelSize: 24
    	color: "red"
	}	
}

3.States状态

1）设置不同元素的状态，在根据不同事件选择对应状态
如下所示：设置矩形三种状态分别为normal、red_color、blue_color
鼠标无动作：normal、鼠标按下：red_color、鼠标松开：blue_color

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle{
   
   
        id: root
        width: 100 ; height: 100
        state: "normal"  //调用名为red_color的状态
        states: [           //设置该矩形元素的状态
            State {
   
            //状态1
                name: "normal"   //normal //id：root；颜色：黑色
                PropertyChanges {
   
   target: root ; color:"black"}
            },
            State {
   
            //状态1
                name: "red_color"   //名称：red_color //id：root；颜色：红色；宽度200
                PropertyChanges {
   
   target: root ; color:"red";width:200}
            },
            State {
   
   
                name: "blue_color"
                PropertyChanges {
   
   target: root ; color:"blue";height:200}
            }
        ]
    }
    MouseArea{