QT之QML从入门到精通（第二章）

本章介绍QML部件（component）和加载（Loader）的基本使用

引言

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Component.onCompleted: {console.log("onCompleted：",width,height,color) //控件生成时，输出信息 构造函数}Component.onDestruction: {console.log("onDestruction",color) //控件销毁时，输出信息,析构函数}Component{ //部件 不会自己创建，使用时才会加载loaderid:comRectangle{width: 200height: 100color: "black"}}Loader{
//        source: "../qml_Rectangle/MyRectangle.qml" //加载时需要在qrc文件夹中，写入资源sourceComponent: com //加载Component的控件}
}

 组件的动态加载实例

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")//    Component.onCompleted: {
//        console.log("Component onCompleted：",width,height,color) //控件生成时，输出信息 构造函数
//    }
//    Component.onDestruction: {
//        console.log("Component onDestruction") //控件销毁时，输出信息,析构函数
//    }
//    Component{ //部件 不会自己创建，使用时才会加载loader
//        id:com
//        Rectangle{
//            id:rect1
//            width: 100
//            height: 100
//            color: "black"
//            Component.onCompleted: {
//                console.log("Component onCompleted：",width,height,color) //控件生成时，输出信息 构造函数
//            }
//            Component.onDestruction: {
//                console.log("Component onDestruction") //控件销毁时，输出信息,析构函数
//            }
//        }
//    }Component{id:comImage { //加载 图片
//            id: imgsource:"/test.png" //这里加载不了width: 200height: 200}
//        AnimatedImage{ //加载动态的图片 可以加载
//            source: "../../../python/爬虫/爬取文件测试/表情包/冰墩墩抖抖冰雪动图表情包.gif"//需要加入qml目录
//            width: 50
//            height: 50
//        }}Loader{id:loader
//        source: "../qml_Rectangle/MyRectangle.qml" //加载时需要在qrc文件夹中，写入资源sourceComponent: com //加载Component的控件asynchronous: true //异步的onStatusChanged: {console.log("status：",status) //1是存在0是不存在2是正在加载中}}Button{width: 50height: 50x:200onClicked: {
//            loader.item.width =20
//            loader.item.height = 20 //loader.item就是加载的对象
//            rect1.width=20 //这种方式修改不了：ReferenceError: rect1 is not defined
//            loader.sourceComponent = null}}
}

MouseArea控件深入学习

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformWindow{width:600height:600title: "Mouse Area"visible: trueMouseArea{id:mouseAreawidth: 200height: 200//Qt::MouseButtons可以查看右键操作,由以下函数控制acceptedButtons: Qt.LeftButton | Qt.RightButtonRectangle{anchors.fill: parentcolor: "black"}onClicked: {}onDoubleClicked: {console.log("double click")}onPressed: {var ret = pressedButtons & Qt.LeftButton //必须在按下时写，不能在click中写var ret2 = pressedButtons & Qt.RightButton //必须在按下时写，不能在click中写console.log("press",ret)
//            console.log(ret?"左键":"右键")console.log(ret?"左键":ret2?"右键":"其他")}onReleased:{console.log("release")}}
}

Window{width:800height:800title: "Mouse Area"visible: trueMouseArea{id:mouseAreawidth: 200height: 200//Qt::MouseButtons可以查看右键操作,由以下函数控制acceptedButtons: Qt.LeftButton | Qt.RightButtonRectangle{anchors.fill: parentcolor: "black"}cursorShape: Qt.CrossCursor //设置十字光标hoverEnabled: true //设置可以触发悬停事件true会触发onContainsMouseChanged，false不触发onHoveredChanged: {console.log("Hover changle")}onContainsMouseChanged: {console.log("onContainsMouseChanged",containsMouse)}onContainsPressChanged: {console.log("onContainsPressChanged",containsMouse)}onClicked: {console.log(" click")}Rectangle {id: containerwidth: 600; height: 200y:200Rectangle {id: rectwidth: 50; height: 50color: "red"opacity: (600.0 - rect.x) / 600MouseArea {anchors.fill: parentdrag.target: rectdrag.axis: Drag.XAxisdrag.minimumX: 0drag.maximumX: container.width - rect.width}}}Rectangle {width: 480height: 320y:300Rectangle {x: 30; y: 30width: 300; height: 240color: "lightsteelblue"MouseArea {anchors.fill: parentdrag.target: parent;drag.axis: "XAxis"  //拖拽x轴drag.minimumX: 15drag.maximumX: 250drag.filterChildren: true //true时拖拽子控件自己也会动，false不会动Rectangle {color: "yellow"x: 50; y : 50width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("Clicked")}}}}}}
}

        

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformWindow{width:800height:800title: "Mouse Area"visible: trueMouseArea{id:mouseAreawidth: 200height: 200//Qt::MouseButtons可以查看右键操作,由以下函数控制acceptedButtons: Qt.LeftButton | Qt.RightButtonRectangle{anchors.fill: parentcolor: "black"}cursorShape: Qt.CrossCursor //设置十字光标hoverEnabled: false //设置可以触发悬停事件true会触发onContainsMouseChanged，false不触发，只有点击时触发onHoveredChanged: {console.log("Hover changle")}onContainsMouseChanged: {console.log("onContainsMouseChanged",containsMouse)}
//        onContainsPressChanged: {
//            console.log("onContainsPressChanged",containsMouse)
//        }onMouseXChanged:{console.log("x:",mouseX)}onMouseYChanged:{console.log("y:",mouseY)}onClicked: {console.log(" click")}pressAndHoldInterval: 300 //修改长按的时间间隔 Qt Quick2.9以上才支持onPressAndHold: { //长按触发此信号，默认为800msconsole.log("andhold")}Rectangle {id: containerwidth: 600; height: 200y:200Rectangle {id: rectwidth: 50; height: 50color: "red"opacity: (600.0 - rect.x) / 600MouseArea {anchors.fill: parentdrag.target: rectdrag.axis: Drag.XAxisdrag.minimumX: 0drag.maximumX: container.width - rect.width}}}Rectangle {width: 480height: 320y:300Rectangle {x: 30; y: 30width: 300; height: 240color: "lightsteelblue"MouseArea {anchors.fill: parentdrag.target: parent;drag.axis: "XAxis"  //拖拽x轴drag.minimumX: 15drag.maximumX: 250drag.filterChildren: true //true时拖拽子控件自己也会动，false不会动Rectangle {color: "yellow"x: 50; y : 50width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("Clicked")}}}}}Rectangle{color: "black"width: 50;height: 50y:600z:0}Rectangle {color: "yellow"width: 100; height: 100y:600MouseArea {anchors.fill: parentonClicked: console.log("clicked yellow")}Rectangle {color: "blue"width: 50; height: 50MouseArea {anchors.fill: parentpropagateComposedEvents: true //false事件不传播,true可以传播onClicked: {console.log("clicked blue")mouse.accepted = false //false不接受事件继续向上传递，事件的处理顺序是由内向外,true不传递}}}}//        onDoubleClicked: {
//            console.log("double click")
//        }//        onPressed: {
//            var ret = pressedButtons & Qt.LeftButton //必须在按下时写，不能在click中写
//            var ret2 = pressedButtons & Qt.RightButton //必须在按下时写，不能在click中写//            console.log("press",ret)
//            console.log(ret?"左键":ret2?"右键":"其他")//        }
//        onReleased:{
//            console.log("release")
//        }}
}/*Window{ //root控件 主界面signal mySig(); //自定义一个信号onMySig: {   //触发信号所执行的函数，信号名加on，并且第一个字母大写console.log("mySig test")}onWidthChanged: {  //窗口的宽度改变时会触发这个函数console.log("width change ",width)  //打印语句，打印宽度myValue = width;}property int  myValue: 0  // 创建一个int类型的属性，他也会自动生成信号和槽onMyValueChanged: {console.log("myVale",myValue)}width: 640height: 480x:500 ;y:500  // x 和y用于设置对于父控件的位置，0 0 为左上角，如果要在一行写多条语句，要用分号；隔开visible: true //设置是否可见title: qsTr("Hello Quick ApplicaitonWindows") //设置标题
//    color: "darkGray" //设置背景色为深灰色
//    maximumWidth: 600 //设置最大宽度
//    maximumHeight: 600 //设置最大高度
//    minimumWidth: 600 //设置最小宽度
//    minimumHeight: 600 // 设置最小高度
//    opacity: 0.5 //设置透明度 范围是0-1Button{id:btn1  //提供名称，可以根据ID来访问别的控件objectName: "btn1"width: 50height: 50background: Rectangle{border.color:btn1.focus?"blue":"red"  //这个按钮的边框演示，如果有焦点是蓝色，否则是红色}onClicked: { //按钮的点击时间console.log("Btn1 click")}//块注释：注意因为是qml不是cpp所以不能使用宏编译注释//按下键盘的Tab键，也可以切换焦点Keys.onRightPressed: {  //焦点如果在当前控件时，按下(键盘右键->)切换焦点btn2.focus = true;}}Button{id:btn2  //提供名称，可以根据ID来访问别的控件x :100width: 50height: 50objectName: "btn2"background: Rectangle{border.color:btn2.focus?"blue":"red"  //这个按钮的边框演示，如果有焦点是蓝色，否则是红色}onClicked: {console.log("Btn2 click")}Keys.onLeftPressed://焦点如果在当前控件时，按下(键盘左键<-)切换焦点{btn1.focus = true;}}onActiveFocusItemChanged:{console.log("获取焦点改变后的控件：",activeFocusItem.objectName) //item是对象，打印不出id，需要设置名称}
}*/

Button控件深入学习 

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButton{id:btnwidth:50;height: 50;// flat: true;  //true不会绘制背景色，点击时会显示，实际项目不会用到// highlighted:true //ture周围会多一圈边框颜色，实际项目不会用到//一般用于他继承的AbstractButton中的属性// checkable: true //1.设置是否可以被选中checked: true //true状态是选中的，false没有选中onCheckableChanged: {console.log("press ",checkable)}onPressed: {console.log("checked = ",btn.checked)btn.checked = !btn.checked//checked的属性置为true可以强制checkable的属性为trueconsole.log("checked = ",btn.checked)}}
}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButton{id:btnwidth:50;height: 50;checkable: trueautoExclusive: true //设置排他属性，两个不能同时被选中，类似于QRadioButton}Button{id:btn2x:60width:50;height: 50;checkable: trueautoExclusive: true}Button{id:btn3x:120width:100;height: 50;checkable: trueautoRepeatDelay: 3000// 按下的时间autoRepeatInterval: 1000// 触发事件的间隔，每隔1秒触发一次autoRepeat: true;//鼠标按住不释放 不断触发按下，释放，点击事件icon.source: "../../C++.png"icon.color: "red"//图片颜色text:"presses"// indicator:Image {//  id:ind;//  anchors.fill: parent//  source: "../../C++.png"// }onDownChanged: {//onPressed事件是必须在控件上按下生效，离开无效，onDownChanged离开也会生效。console.log("down:",down,"press",pressed) //down按下是true,松开是false和pressed一样,}onClicked: {console.log("clicked")}}
}

 

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformWindow{width:500height:500title: "Mouse Area"visible: trueButton{id:btn3x:120width:100;height: 50;checkable: truebackground:Rectangle{anchors.fill: parentcolor:{if(btn3.pressed){return "red"}else{return "blue"}}border.color: {if(btn3.pressed)return "black"elsereturn "red"}}}
}