QT之QML从入门到精通（第二章）
本章介绍QML部件（component）和加载（Loader）的基本使用
引言
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component.onCompleted: {
console.log("onCompleted：",width,height,color) //控件生成时，输出信息 构造函数
}
Component.onDestruction: {
console.log("onDestruction",color) //控件销毁时，输出信息,析构函数
}
Component{ //部件 不会自己创建，使用时才会加载loader
id:com
Rectangle{
width: 200
height: 100
color: "black"
}
}
Loader{
// source: "../qml_Rectangle/MyRectangle.qml" //加载时需要在qrc文件夹中，写入资源
sourceComponent: com //加载Component的控件
}
}
组件的动态加载实例
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: 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:com
Image { //加载 图片
// id: img
source:"/test.png" //这里加载不了
width: 200
height: 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: 50
height: 50
x:200
onClicked: {
// 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 Platform
Window{
width:600
height:600
title: "Mouse Area"
visible: true
MouseArea{
id:mouseArea
width: 200
height: 200
//Qt::MouseButtons可以查看右键操作,由以下函数控制
acceptedButtons: Qt.LeftButton | Qt.RightButton
Rectangle{
anchors.fill: parent
color: "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:800
height:800
title: "Mouse Area"
visible: true
MouseArea{
id:mouseArea
width: 200
height: 200
//Qt::MouseButtons可以查看右键操作,由以下函数控制
acceptedButtons: Qt.LeftButton | Qt.RightButton
Rectangle{
anchors.fill: parent
color: "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: container
width: 600; height: 200
y:200
Rectangle {
id: rect
width: 50; height: 50
color: "red"
opacity: (600.0 - rect.x) / 600
MouseArea {
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: container.width - rect.width
}
}
}
Rectangle {
width: 480
height: 320
y:300
Rectangle {
x: 30; y: 30
width: 300; height: 240
color: "lightsteelblue"
MouseArea {
anchors.fill: parent
drag.target: parent;
drag.axis: "XAxis" //拖拽x轴
drag.minimumX: 15
drag.maximumX: 250
drag.filterChildren: true //true时拖拽子控件自己也会动，false不会动
Rectangle {
color: "yellow"
x: 50; y : 50
width: 100; height: 100
MouseArea {
anchors.fill: parent
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 Platform
Window{
width:800
height:800
title: "Mouse Area"
visible: true
MouseArea{
id:mouseArea
width: 200
height: 200
//Qt::MouseButtons可以查看右键操作,由以下函数控制
acceptedButtons: Qt.LeftButton | Qt.RightButton
Rectangle{
anchors.fill: parent
color: "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: { //长按触发此信号，默认为800ms
console.log("andhold")
}
Rectangle {
id: container
width: 600; height: 200
y:200
Rectangle {
id: rect
width: 50; height: 50
color: "red"
opacity: (600.0 - rect.x) / 600
MouseArea {
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: container.width - rect.width
}
}
}
Rectangle {
width: 480
height: 320
y:300
Rectangle {
x: 30; y: 30
width: 300; height: 240
color: "lightsteelblue"
MouseArea {
anchors.fill: parent
drag.target: parent;
drag.axis: "XAxis" //拖拽x轴
drag.minimumX: 15
drag.maximumX: 250
drag.filterChildren: true //true时拖拽子控件自己也会动，false不会动
Rectangle {
color: "yellow"
x: 50; y : 50
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked")
}
}
}
}
}
Rectangle{
color: "black"
width: 50;height: 50
y:600
z:0
}
Rectangle {
color: "yellow"
width: 100; height: 100
y:600
MouseArea {
anchors.fill: parent
onClicked: console.log("clicked yellow")
}
Rectangle {
color: "blue"
width: 50; height: 50
MouseArea {
anchors.fill: parent
propagateComposedEvents: 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: 640
height: 480
x: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-1
Button{
id:btn1 //提供名称，可以根据ID来访问别的控件
objectName: "btn1"
width: 50
height: 50
background: 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 :100
width: 50
height: 50
objectName: "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 Platform
Window{
width:500
height:500
title: "Mouse Area"
visible: true
Button{
id:btn
width: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的属性为true
console.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 Platform
Window{
width:500
height:500
title: "Mouse Area"
visible: true
Button{
id:btn
width:50;height: 50;
checkable: true
autoExclusive: true //设置排他属性，两个不能同时被选中，类似于QRadioButton
}
Button{
id:btn2
x:60
width:50;height: 50;
checkable: true
autoExclusive: true
}
Button{
id:btn3
x:120
width:100;height: 50;
checkable: true
autoRepeatDelay: 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 Platform
Window{
width:500
height:500
title: "Mouse Area"
visible: true
Button{
id:btn3
x:120
width:100;height: 50;
checkable: true
background:Rectangle{
anchors.fill: parent
color:{
if(btn3.pressed)
{
return "red"
}else
{
return "blue"
}
}
border.color: {
if(btn3.pressed)
return "black"
else
return "red"
}
}
}
}