上一章笔记链接: QT Quick QML入门笔记(一)应用程序结构分析和QML基础
1. 信号与槽
介绍两种信号与槽的触发
①、控件或元素,触发一个信号,比如按键触发(视频中暂未介绍实例)
②、对象属性发生改变,比如window的宽高发生变化
新建 “signalslot.qml”文件:
//对象属性发生改变的实例
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
id:win;
visible: true;
width: 400;
height: 200;
color: "white"
Text {
id:txt;
text: "Center Text";
font.pointSize: 18;
color: "red";
}
//信号处理器,代码块的形式:
//on<Property>Changed 或 on<Signal>
onWidthChanged: {
txt.x = (win.width - txt.x)/2;
}
//信号处理器,函数方法的形式:
//on<Property>Changed 或 on<Signal>
onHeightChanged: heightChanged();
function heightChanged(){
txt.y = (win.height - txt.y)/2;
}
}
当在“ onWidthChanged: {” 中输入 onW的时候就自动补全了
输入指令:
运行结果:
调整界面大小,文字宽高始终在中间。
2. 信号与槽的连接
直接上例子:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
id:win;
visible: true;
width: 400;
height: 200;
color: "white"
Button {
x:0;
y:0;
id:btn;
text:"btn";
}
function btnClick() {
btn.text = "btnClicked";
}
//方法1:connect
Component.onCompleted: {
btn.clicked.connect(btnClick);
}
//方法2:Connections
Connections {
target: btn;
onClicked: btnClick();
}
}
● 方法1:connect
Component.onCompleted:{
xxx.clicked.connect(doSomething);
}
● 方法2:Connections
Connections {
target: xxx; //发出信号的对象
on<Signal>: function or code block //是target指向的对象
}
//好处
//1.一个target,多个槽,实现一对多的关系
//2.信号与槽连接的地方放到其他地方
输入指令:
运行结果:
使用方法1和方法2都是一样的:
按键按键后:文字改变
QT QUICK QML 其它文章:
● QT Quick QML入门笔记(一)应用程序结构分析和QML基础
● QT Quick QML入门笔记(四)锚(anchors)布局