在线问答5

这个屌丝很懒，什么也没留下！

热门标签

QT学习笔记-qml开发

作者：在线问答5 | 2024-07-10 08:27:41

踩

QT学习笔记-qml开发

文章目录

一、qml工程创建
- 1.新建一个项目
- 2.项目中新建不同子文件
二、qml语法
- 1.qml基本结构
- 2.信号和槽
三、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  //上下边框距离
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3）效果图如下
在这里插入图片描述

二、qml语法

1.qml基本结构

元素名 {
    属性名1: 属性值1
    属性名2: 属性值2
    ...
    子元素1 {
        ...
    }
    子元素2 {
        ...
    }
    ...
}    
1
2
3
4
5
6
7
8
9
10
11
12

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"
	}	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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!")
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、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"}
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

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"
	}	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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{      //鼠标事件
        anchors.fill: parent    //填充父类
        onPressed: {            //按下鼠标
            root.state = "red_color"    //设置为red_color状态
        }
        onReleased: {           //松开鼠标
            root.state = "blue_color"   //设置为blue_color状态
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4.Transitions动画效果

1）初始蓝色矩形,动画效果
鼠标点击后变为绿色;透明度0.1-1、持续1s;宽度50-100、持续2s。

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle {
         id: flashingblob
         width: 75; height: 75
         color: "blue"
         opacity: 1.0   //透明度

         MouseArea {
             anchors.fill: parent   //填充
             onClicked: {           //鼠标点击
                 animateColor.start()   //animateColor颜色
                 animateOpacity.start() //animateOpacity透明度
                 animateWidth.start()   //animateWidth宽度
             }
         }

         PropertyAnimation {        //属性
             id: animateColor;          //id：animateColor
             target: flashingblob;
             properties: "color";   //颜色
             to: "green";           //绿色
             duration: 1000  //持续时间1000ms
         }

         NumberAnimation {          //数值
             id: animateOpacity
             target: flashingblob
             properties: "opacity"  //透明度
             from: 0.1              //0.1-1
             to: 1.0
             duration: 2000  //持续时间1000ms
//             loops: Animation.Infinite
//             easing {type: Easing.OutBack; overshoot: 500}
        }
         NumberAnimation {          //数值
             id: animateWidth
             target: flashingblob
             properties: "width"  //透明度
             from: 50              //0.1-1
             to: 100
             duration: 2000  //持续时间1000ms
//             loops: Animation.Infinite
//             easing {type: Easing.OutBack; overshoot: 500}
        }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2）初始红色矩形,动画效果
位置、宽度、高度、透明度变化，颜色从红色变为黑色

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle{
        id: rect
        width: 10
        height: 10
        color: "red"
        opacity: 0

        PropertyAnimation on x { to:100 ; duration:1000}
        PropertyAnimation on y { to:100 ; duration:1000}
        PropertyAnimation on width { to:100 ; duration:1000}
        PropertyAnimation on height { to:100 ; duration:1000}
        PropertyAnimation on opacity { to:0.9 ; duration:1000}

        ColorAnimation on color{
//            from: "white"   //从白色开始
            to: "black"
            duration: 2000
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3）初始红色矩形,动画效果（设置动画顺序）
红色变黄色再变蓝色，时间为2S，

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle{
        id: rect
        width: 100
        height: 100
        color: "red"

        SequentialAnimation on color{

            ColorAnimation {to: "yellow";duration: 2000}
            ColorAnimation {to: "blue";duration: 2000}
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4）设置过渡动画
按钮按下后从蓝色变为黄色

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle {
        width: 75; height: 75
        id: button
        state: "RELEASED"

        MouseArea {
            anchors.fill: parent
            onPressed: button.state = "PRESSED"
            onReleased: button.state = "RELEASED"
        }

        states: [
            State {
                name: "PRESSED"     //按下状态
                PropertyChanges { target: button; color: "yellow"}
            },
            State {
                name: "RELEASED"    //松开状态
                PropertyChanges { target: button; color: "blue"}
            }
        ]

        transitions: [      //状态过度动画
            Transition {
                from: "PRESSED"     //从PRESSED到RELEASED
                to: "RELEASED"
                ColorAnimation { target: button; duration: 1000}
            },
            Transition {
                from: "RELEASED"
                to: "PRESSED"
                ColorAnimation { target: button; duration: 1000}
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

5）预先设置效果，当x,y改变时该效果跟随x,y改变

import QtQuick 2.12
import QtQuick.Window 2.12

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

    Rectangle {
         width: 75; height: 75; radius: width
         id: ball
         color: "salmon"
         MouseArea{
            anchors.fill: parent
            onClicked: {
                ball.x += 50
                ball.y += 50
            }
         }
         预先设置效果，当x,y改变时该效果跟随x,y改变
         Behavior on x {
             NumberAnimation {
                 id: bouncebehavior
                 easing {
                     type: Easing.OutElastic
                     amplitude: 1.0
                     period: 0.5
                 }
             }
         }
         Behavior on y {
             animation: bouncebehavior
         }
         Behavior {
             ColorAnimation { target: ball; duration: 1000 }
         }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

6）设置三个文本，当鼠标点击时将三个文本透明度由0.01变为1

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
设置三个文本，当鼠标点击时将三个文本透明度由0.01变为1
    Rectangle {
         id: banner
         width: 150; height: 100; border.color: "black"

         Column {
             anchors.centerIn: parent
             Text { 
                 id: code
                 text: "Code less."
                 opacity: 0.01
             }
             Text {
                 id: create
                 text: "Create more."
                 opacity: 0.01
             }
             Text {
                 id: deploy
                 text: "Deploy everywhere."
                 opacity: 0.01
             }
         }

         MouseArea {
             anchors.fill: parent
             onPressed: playbanner.start()
         }

         SequentialAnimation {
             id: playbanner
             running: false
             NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
             NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
             NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
         }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

5.Component组件、Loader动态加载

1)添加图片和动图，以及子文件，实现控件的构造及析构，图片、动图的放大缩小以及倍数播放暂停
在这里插入图片描述
MyRectangle,qml文件

import QtQuick 2.0

    Rectangle{
        id:borderRect   //矩形元素id
        property int myTopMargin : 0    //自定义上边框，可在主函数中调用
        property int myBottomMargin : 0
        width: 100
        height: 100
        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
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

main.qml文件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    	
//    Component{
//        id:com
//        Rectangle{
//            id:rect
//            width: 200
//            height: 100
//            color: "black"

//            Component.onCompleted:{     //控件生成时执行以下函数
//                console.log("onCompleted",width,height,color)   //打印
//            }
//            Component.onDestruction:{     //控件销毁时执行以下函数
//                console.log("onCompleted")   //打印
//            }
//        }
//    }
    Component{
        id:com
        AnimatedImage{     //Image加载静态图片；AnimatedImage加载动态图片
            id:img
            source: "/01.gif"   //图片控件可以使用路径加载
            width: 200
            height: 100
            speed: 0.5       //动态图片播放速度0.5倍速
            Component.onCompleted:{     //控件生成时执行以下函数
                console.log("onCompleted",width,height,color)   //打印
            }
            Component.onDestruction:{     //控件销毁时执行以下函数
                console.log("onCompleted")   //打印
            }
        }
    }
    Loader{
        id:loader
//        source: "/MyRectangle.qml"  //图片不能用添加控件路径实现
//        source: "/MyRectangle.qml"  //添加控件路径
        asynchronous: true      //设置异步加载，若当前状态为加载中则status为2，加载完成status为1
        sourceComponent: com        //添加控件id:com,不能跨文件调用
        onStatusChanged: {          //状态改变时默认为1生成控件
            console.log("status:",status)
        }
    }
    Button{
        width: 50
        height: 50
        x:200
        onClicked: {                //点击按钮时让sourceComponent为null，控件析构
//            loader.item.width = 50          //loader.item可以访问生成的控件并修改
//            loader.item.height = 50
//            loader.item.color = "red"
            loader.item.paused = !loader.item.paused  //播放状态取反
//            loader.sourceComponent = null   //销毁控件
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

6.MouseArea组件

1)MouseArea区域默认与父类窗口颜色一致，需更改颜色才能看见该区域。鼠标区域悬停使能（hoverEnabled:false具有悬浮特性的事件不会被触发，例如：onContainsMouseChanged，onMouseXChanged）

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 320
    height: 240
    visible: true
    title: qsTr("运行")
    color: "white"

    MouseArea{                   //区域一般和背景色一致
        id:mouseArea             //默认响应鼠标左键
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton //支持左右键
        hoverEnabled: true      //默认为false，设置为true时鼠标悬停使能可以触发
        cursorShape: Qt.CrossCursor //鼠标样式，十字形光标
        enabled: true				//区域内事件使能控制，false：关闭
        Rectangle{              //一个矩形区域填充父类-MouseArea区域
            anchors.fill: parent
            color: "black"
        }
        onClicked: {            //点击
            console.log("clicked")
        }
        onPressed: {            //按下
            var ret = pressedButtons & Qt.LeftButton    //左键按下赋值
            var ret2 = pressedButtons & Qt.RightButton  //右键按下赋值
            console.log(ret ? "left" : ret2 ? "right" : "other")    //判断值打印对应按键
            console.log("pressed")
        }
        onReleased: {           //松开
            console.log("released")
        }
		onDoubleClicked: {		//双击
            console.log("doubleClicked")
        }
鼠标悬停默认false鼠标区域改变不会触发(hoverEnabled: true时可以触发)，按下才行/
        onContainsMouseChanged: {		//当鼠标变化时
            console.log("onContainsMouseChanged",containsMouse)
        }

        onContainsPressChanged: {
            console.log("onContainsPressChanged",containsPress)
        }
        
        onMouseXChanged: {			//当鼠标位置变化时
            console.log("x:",mouseX)	//打印当前鼠标X轴位置
        }
        onMouseYChanged: {
            console.log("y:",mouseY)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

drag（拖动光标范围设置的矩形区域进行移动）

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Rectangle{
        id: container
        width: 480
        height: 200
        Rectangle{
                id: rect
                width: 50
                height: 50
                color: "red"
                opacity: (480.0 - rect.x) / 600 //透明度为0-1的值

                MouseArea{
                    anchors.fill:parent
                    darg可以拖动MouseArea覆盖的某一矩形的区域
                    drag.target: rect
                    drag.axis: Drag.XAxis   //移动方向,Drag.XAxis:X轴,Drag.YAxis:Y轴
                    drag.minimumX: 0        //最小为0
                    最大=矩形container宽 - 矩形rect宽
                    drag.maximumX: container.width - rect.width
                    onDoubleClicked: {		//双击随拖动的区域移动
                        console.log("doubleClicked")
                    }
                }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

设置父类可拖动区域（浅蓝色），该区域内部设置子区域（黄色）drag.filterChildren: true可以让子控件区域（黄色区域）继承拖动父控件（浅蓝色区域），若为false则子控件区域无法实现拖动但不影响该区域内的事件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Rectangle {
        width: 480
        height: 320
        Rectangle {
            x: 30; y: 30
            width: 300; height: 240
            color: "lightsteelblue"
   
            MouseArea {
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 150
                drag.filterChildren: true
   
                Rectangle {
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: console.log("Clicked")
                    }
                }
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

事件过滤：设置父类区域（黄色），该区域内部设置子区域（蓝色）propagateComposedEvents: true //将当前区域事件发送给父类
mouse.accepted = false //禁止该区域接收当前信息

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"
    Rectangle {
         color: "yellow"
         width: 100; height: 100

         MouseArea {
             anchors.fill: parent
             onClicked: console.log("clicked yellow")
         }

         Rectangle {
             color: "blue"
             width: 50; height: 50

             MouseArea {
                 anchors.fill: parent
                 propagateComposedEvents: true  //将当前区域事件发送给父类
                 onClicked: {
                     console.log("clicked blue")    
                     mouse.accepted = false     //禁止该鼠标区域接收当前信息
                 }
             }
         }
     }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

7.Button 组件

1)自定义Button

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
         id: control
         text: qsTr("Button")
         padding:0
         contentItem: Rectangle {
             Rectangle默认白色
             color: "transparent"   //设置透明色
             Text {
                id:txt
                text: control.text
             }
             Image {
                 id: img
                 source: "/05.jpg"
                 width: 50
                 height: 50
                 anchors.right: parent.right
             }
         }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2)通过background在button按钮中生成矩形框，通过改变矩形框的样式改变button按钮

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Button{
        id: btn1
        width: 100
        height: 50

        autoRepeat: true    //
        background: Rectangle{
            anchors.fill: btn1
            Image {
                id: name
                source: "/门模式AA.gif"
            }

//            color: {
//                if(btn1.pressed){
//                    return "green"
//                }
//                else{
//                    return "blue"
//                }
//            }
//            border.width: 5
//            border.color: {
//                if(btn1.pressed){
//                    return "black"
//                }
//                else{
//                    return "red"
//                }
//            }
        }


    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

autoExclusive : true	将有这条语句的按钮设置为只能单选
checkable: true	设置为可选中状态

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Button{
        id: btn1
        x: 0
        y: 300
        width: 50
        height: 50
        checkable: true     //可选中状态
        autoExclusive: true //只能选择一个按钮
        onClicked: {
            console.log("btn1")
        }
    }
    Button{
        id: btn2
        x: (btn1.x+55)
        y: 300
        width: 50
        height: 50
        checkable: true     //可选中状态
        autoExclusive: true //将有这条语句的按钮设置为只能单选
        onClicked: {
            console.log("btn2")
        }
    }
    Button{
        id: btn3
        x: (btn2.x+55)
        y: 300
        width: 50
        height: 50
        checkable: true     //可选中状态
        onClicked: {
            console.log("btn3")
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

checkable、text、Repeat、RepeatDelay、RepeatInterval（按下间隔）

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Button{
        id: btn1
        width: 50
        height: 50
        
        text: "运行"      //按钮的文字
        font.pixelSize: 24  //字号
        
        autoRepeat: true    //
        autoRepeatDelay: 3000   //第一次触发到下一次触发的间隔
        autoRepeatInterval: 1000    //每次触发之间的间隔
        checkable: true
        onDownChanged: {        //获取当前按钮是否被按下，按下返回true，松开返回false
            console.log("down:",down,"pressed:",pressed)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

5）icon和indicator为按钮添加图片

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 480
    height: 360
    visible: true
    title: qsTr("运行")
    color: "white"

    Button{
        id: btn1
        width: 50
        height: 100

        autoRepeat: true    //
        autoRepeatDelay: 3000   //第一次触发到下一次触发的间隔
        autoRepeatInterval: 1000    //每次触发之间的间隔
        checkable: true

//        icon.source: "/门模式AA - 副本.png"
//        icon.color: "red"

//        indicator: Image {
//            id: img
//            source: "/门模式AA.gif"
//        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6）DelayButton类似于进度条的按钮，需要按住一定时间

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    DelayButton{        //类似于进度条的按钮，需要按住一定时间
        width: 150
        height: 50
        delay: 3000
        onParentChanged: {
            console.log(progress)	//打印当前进度
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7）TabButton可做页面选择按钮

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    TabBar {
         TabButton {
             text: qsTr("Home")
         }
         TabButton {
             text: qsTr("Discover")
         }
         TabButton {
             text: qsTr("Activity")
         }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

8）RadioButton单选框

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column {    //单选按钮，自动排他
        RadioButton {
            checked: true
            text: qsTr("First")
        }
        RadioButton {
            text: qsTr("Second")
        }
        RadioButton {
            text: qsTr("Third")
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

9）Switch滑动按钮
可以通过ButtonGroup实现排他性
LayoutMirroring具有控件镜像功能

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ButtonGroup{
        id:btngrp
        exclusive: true
        buttons: col.children
    }

    Column {
        id:col
        Switch {    //滑动勾选
            text: qsTr("Wi-Fi")
 //           LayoutMirroring.enabled: true   //控件镜像
        }
        Switch {
            text: qsTr("Bluetooth")
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

10）checkBox勾选框
复选框，可以实现多个按钮选择，也可利用buttongroup对复选框进行排他性设置，实现多个勾选框只能选择其中一个

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ButtonGroup{  //把checkbox引入buttongroup组中可以利用button实现排他性，实现单选
        id:childGroup
        exclusive: true
       buttons: col.children   //利用id
    }

    Column{
         id:col
         CheckBox {
             checked: true
 //            tristate: true     //三态设置"v"选中、"x"未选中、"-"不可选中
             text: qsTr("First")
//             ButtonGroup.group: childGroup  //和buttons: col.children作用相同

         }
         CheckBox {
             checkable: true
             text: qsTr("Second")
//             ButtonGroup.group: childGroup
         }
         CheckBox {
             checkable: true
//             checked: true
             text: qsTr("Third")
//             ButtonGroup.group: childGroup
         }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

实现勾选状态顺序设置和类似树形图结构
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

//    CheckBox {
//         tristate: true
//         nextCheckState: function() {   //实现各种勾选状态的顺序设置
//             if (checkState === Qt.Unchecked)
//                 return Qt.Checked
//             else if(checkState === Qt.Checked)
//                 return Qt.PartiallyChecked
//             else
//                return Qt.Unchecked
//         }
//     }

    Column {
         ButtonGroup {
             id: childGroup
             exclusive: false
             checkState: parentBox.checkState
         }

         CheckBox {
             id: parentBox
             text: qsTr("Parent")
             checkState: childGroup.checkState
         }

         CheckBox {
             checked: true
             text: qsTr("Child 1")
             leftPadding: indicator.width
             ButtonGroup.group: childGroup
         }

         CheckBox {
             text: qsTr("Child 2")
             leftPadding: indicator.width
             ButtonGroup.group: childGroup
         }
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

8.Text 组件

1）文本基本属性

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Text {
        id: tex
        text: qsTr("text\ntext")  //\n  换行
        color: "red "
        font.bold: true     //粗体
        font.italic: true     //斜体
        font.letterSpacing: 10     //字体间距
        font.family: "Courier New"  //字体
//        font.pixelSize: 20     //字体大小-像素
        font.pointSize: 15     //字体大小-磅数
        font.underline: true    //下滑线
        lineHeight: 5       //上下行距
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2）elide文本省略、 wrapMode文本自动换行

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id:rect
        width: 50
        height: 100
        border.color: "black"

        Text {
            id: txt
            text: qsTr("txt shf sbd jbs kvj bsb")
            wrapMode:Text.WordWrap  //自动换行，连续的字母或数字不行
            anchors.fill: parent
            elide: Text.ElideRight  //右边省略
//            elide: Text.ElideMiddle     //中间省略
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3）Format文本类型

Column {
	
    Text {
        font.pointSize: 24
        text: "<b>Hello</b> <i>World!</i>"
    }
    Text {
        font.pointSize: 24
        textFormat: Text.RichText  //富文本
        text: "<b>Hello</b> <i>World!</i>"
    }
    Text {
        font.pointSize: 24         //纯文本显示
    	textFormat: Text.PlainText
        text: "<b>Hello</b> <i>World!</i>"
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4）超链接

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {

    width: 480
    height: 360
    visible: true
    title: qsTr("超链接")

    MouseArea {
        anchors.fill: parent
        width:200
        height: 100
        onClicked: {
            Qt.quit();
        }
    }

    MouseArea{
        anchors.centerIn: parent
        width: hp.width
        height: hp.height
        hoverEnabled: true
//        cursorShape: containsMouse ? (pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor) : Qt.ArrowCursor
        cursorShape: Qt.PointingHandCursor
        Text {
            id: hp
            text: "<a href='http://qt-project.org\'><h1>Qt网站</h1></a>"
            anchors.centerIn: parent
            onLinkActivated: Qt.openUrlExternally(link)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

9.Property 组件

1）property 可以声明基本类型，也可以声明组件，在外部需要使用时在进行参数传递；required 外部设置才能使用；readonly设置为只读不能修改

required property Component myComponent
readonly property int rectWidth: width
property Rectangle myRectangle
1
2
3

2）main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    Component {
        id:com
        Button {
            width:50
            height:50
        }

    }

    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

        myComponent:com

        myTopMargin: 10     //子函数中定义的变量可在主函数中传递参数
        myBottomMargin: 10  //上下边框距离

        Component.onCompleted: {
//            newinnerRectColor = "red"
//            newinnerRect.width = 200
            console.log(rectWidth)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

MyRectangle

import QtQuick 2.0

    Rectangle{
        id:borderRect   //矩形元素id

        property 可以声明基本类型，也可以声明组件，在外部需要使用时在进行参数传递
        property int myTopMargin : 0    //自定义上边框，可在主函数中调用
        property int myBottomMargin : 0
        property real myReal: 0.0
        property string myString: "black"
        property color myColor: "black"
        property url myUrl: "qrc:/01.jpg"
required 外部设置才能使用，readonly设置为只读不能修改
        required property Component myComponent
        property Rectangle myRectangle

        property var myVar: ["123",3,4]    //可以装载不同类型

        封装一个组件，让外部只能访问不能修改
        readonly property int rectWidth: width

        命名新id实现外部引用,某一属性也可以引用innerRect.color
        property alias newinnerRect: innerRect




        color: "black"
        Rectangle{
            Loader {
                id:loader
                sourceComponent: myComponent
            }

            id:innerRect    //矩形元素id
            color: "yellow"
            anchors.fill:parent     //填充整个父类窗口
            anchors.topMargin: myTopMargin    //距离上边框
            anchors.bottomMargin: myBottomMargin //距离下边框
            anchors.leftMargin: 5   //距离左边框0
            anchors.rightMargin: 5  //距离右边框0
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

10.ListView组件

1）可以通过model 和delegate实现对控件生成次数和生成内容的控制

ListView{

    width: 180
    height: 200

//    model: 3            //数字-控制绘制几次
    model : ["Button","Rectangle","MouseArea","CheckBox"] //数组数量为
    spacing: 10         //绘制每一个控件的间隔
    delegate: Button {    //控制每一项如何绘制，Text-文本、Button-按钮
    text: modelData
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

2）ListElement生成复杂控件（过低版本无法使用import QtQuick 2.5）

ListView{
    width: 180
    height: 200

    model: ListModel{
        ListElement{    //可以生成复杂listview
            name:"Bill Smith"
            number:"555 3246"
            myValue:111
        }
        ListElement{
            name:"vdill gbith"
            number:"vf3246"
            myValue:222
        }
        ListElement{
            name:"vsill svith"
            number:"er3246"
            myValue:333
        }
    }
    spacing: 10         //绘制每一个控件的间隔
    delegate: Button {    //控制每一项如何绘制，Text-文本、Button-按钮
        text: name + " " + number + " " + myValue   //将每一项内容复制到文本
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3）highlight生成列表背景色

import QtQuick 2.5
import QtQuick.Controls 2.5

ListView{
    width: 180
    height: 200
    id:list
    model: ListModel{
        ListElement{    //可以生成复杂listview
            name:"Bill Smith"
            number:"555 3246"
            myValue:111
        }
        ListElement{
            name:"vdill gbith"
            number:"vf3246"
            myValue:222
        }
        ListElement{
            name:"vsill svith"
            number:"er3246"
            myValue:333
        }
    }
    spacing: 20         //绘制每一个控件的间隔
// HorizontalFlick-横向回弹效果,HorizontalAndVerticalFlick-横向、纵向都有回弹效果
    flickableDirection: Flickable.HorizontalFlick
    highlight: Rectangle{   //绘制一个背景色
        color: "grey"   //颜色
        radius: 5       //圆角度
    }
    delegate: Rectangle {    //控制每一项如何绘制，Text-文本、Button-按钮
        color: "transparent"    //关闭背景色
        width:list.width
        height: 50
        Text {
            id: txt
            text: name  //将每一项内容复制到文本
        }
        MouseArea{      //设置一个鼠标区域
            anchors.fill: parent
            onClicked: {
                currentIndex = index //将index值赋给currentIndex实现点击后背景色改变
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

11.Repeater 组件

    Repeater{
 //       model: 3    //构建三个按钮，模型为数字、代表循环几次
        model : ["Button","Rectangle","MouseArea","CheckBox"] //数组数量为循环次数，内容被下方modelData调用 
        Button{
            y: index * 50
            width: 100
            height: 40
            text: modelData //调用model数组中的数据
        }

    }
1
2
3
4
5
6
7
8
9
10
11

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/805439