上次已经有EmitButton 这个工程了,为了区分,就叫 RealizeEmitButton 吧
今天为了讲信号与槽,涉及的知识点有点杂,那就想到哪说哪吧 实现了通过三个Button控制一个gif动画在主界面中的位置,向左、向右、缓缓移动到中心点
首先来看 程序main.cpp
#include <QApplication>
#include"quickwidget.h" //继承自 QQuickWidget 这个类继承自QWidget 有什么用呢 看这个实现
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QuickWidget widget;
widget.show();
return app.exec();
}
quickWidget.h
class QuickWidget : public QQuickWidget
{
Q_OBJECT // 所有用到信号与槽的类都必须写这个宏 非常重要
public:
QuickWidget();
void initConnection(); //实现信号与槽的联系
signals: //信号
void moveToLeft();
void moveToRight();
void resetCenter();
public slots: //槽方法
void closeWindow();
void leftButtonEvent();
void centerButtonEvent();
void rightButtonEvent();
};
quickwidget.cpp
QuickWidget::QuickWidget()
{
QScreen *screen=qApp->primaryScreen(); //获取当前屏幕尺寸
rootContext()->setContextProperty("mainWidth",screen->size().width()); //注册到QML中
rootContext()->setContextProperty("mainHeight", screen->size().height());
rootContext()->setContextProperty("mainWidthCell",screen->size().width()/64);
rootContext()->setContextProperty("mainHeightCell", screen->size().height()/36);
setResizeMode(QQuickWidget::SizeRootObjectToView);
setSource(QUrl("qrc:/main.qml")); \\有没有很熟悉的感觉,前面一直在main.cpp 就是通过这句将QML与Widget结和
setWindowFlags(Qt::FramelessWindowHint);
initConnection();
}
void QuickWidget::initConnection()
{
QQuickItem *root = this->rootObject(); //获取QML 作为一个对象
connect(root,SIGNAL(closeWindow()),this,SLOT(closeWindow())); //建立槽与信号之间的联系 如影随形
//第一个变量 信号发出者 二发出的信号,三信号接收者,四 信号接收者响应的槽函数
connect(root,SIGNAL(leftButtonEvent()),this,SLOT(leftButtonEvent()));
connect(root,SIGNAL(centerButtonEvent()),this,SLOT(centerButtonEvent()));
connect(root,SIGNAL(rightButtonEvent()),this,SLOT(rightButtonEvent()));
connect(this,SIGNAL(moveToLeft()),root,SLOT(moveToLeft()));
connect(this,SIGNAL(moveToRight()),root,SLOT(moveToRight()));
connect(this,SIGNAL(resetCenter()),root,SLOT(resetCenter()));
}
void QuickWidget::closeWindow()
{
this->close();
}
void QuickWidget::leftButtonEvent()
{
qDebug()<<tr("向左走");
emit moveToLeft();
}
void QuickWidget::centerButtonEvent()
{
qDebug()<<tr("几米的世界");
emit resetCenter();
}
void QuickWidget::rightButtonEvent()
{
qDebug()<<tr("向右走");
emit moveToRight();
// 在 C++ 下 信号的需要 emit 触发 在QML 中 只用写自身就行
}
再看看main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
Rectangle {
id:mainUI
width: mainWidth \\在quickWidget 中注册过 现在可以直接使用奥 1920
height: mainHeight
Image {
id: backGroundImage
z:0 \\层级标志 背景当然在最底层
source: "qrc:/image/loginBackGround.png"
}
CButton{
id:closeButton
normalSource: "qrc:/image/close.png"
hoverSource: "qrc:/image/close_hover.png"
anchors.right: parent.right
anchors.top: parent.top
anchors.topMargin: 10
anchors.leftMargin: 10
width: mainWidthCell*2
height: mainHeightCell*2
}
Rectangle{
id:buttonGroup
z:1
CButton{
id:leftButton
buttonIndex:0
currentButtonIndex :0
buttonText:qsTr("左")
anchors.left: parent.left //anchors 布局神器
anchors.top: parent.top
anchors.topMargin: 10
anchors.leftMargin: 10
normalSource:"qrc:/image/Button.png"
hoverSource:"qrc:/image/Button_hover.png"
}
CButton{
id:centerButton
buttonIndex:1
currentButtonIndex :0
buttonText:qsTr("中")
anchors.left: leftButton.right
anchors.top: leftButton.top
anchors.leftMargin: 10
normalSource:"qrc:/image/Button.png"
hoverSource:"qrc:/image/Button_hover.png"
}
CButton{
id:rightButton
buttonIndex:2
currentButtonIndex :0
buttonText:qsTr("右")
anchors.left: centerButton.right
anchors.top: centerButton.top
anchors.leftMargin: 10
normalSource:"qrc:/image/Button.png"
hoverSource:"qrc:/image/Button_hover.png"
}
}
AnimatedImage{ \\动画播放 是不是简单到 心花怒放 播放gif 动画
id:busyGif
z:1
x:parent.width/2 -width/2 \\ 不设置大小,就会使用gif文件的大小 x,y 是距左顶点的距离 一个小小的居中
y:parent.height/2- height/2
source: "qrc:/image/Busy.gif"
}
signal closeWindow()
signal leftButtonEvent()
signal centerButtonEvent()
signal rightButtonEvent()
function moveToLeft()
{
busyGif.x=busyGif.x-50;
}
function moveToRight()
{
busyGif.x=busyGif.x+50;
}
function resetCenter()
{
animation.running = true
}
PropertyAnimation \\在 resetCenter中调用 动画移动只需你设置
{
id: animation;
target: busyGif;
property: "x";
to: mainUI.width/2 -busyGif.width/2;
duration: 2000
}
function buttonClick( index) // QML 中定义 函数(方法) 注意 参数不用加类型 js 写法
{
leftButton.currentButtonIndex= index
centerButton.currentButtonIndex= index
rightButton.currentButtonIndex= index
}
Component.onCompleted: { // QML 信号 与 槽(函数)的连接方法 QtWidgets 会详细介绍这一核心机制
leftButton.buttonClick.connect(buttonClick)
centerButton.buttonClick.connect(buttonClick)
rightButton.buttonClick.connect(buttonClick)
leftButton.buttonClick.connect(leftButtonEvent)
centerButton.buttonClick.connect(centerButtonEvent)
rightButton.buttonClick.connect(rightButtonEvent)
closeButton.buttonClick.connect(closeWindow)
}
}
CButton.qml
Rectangle {
color: "#00000000"
width: 200
height: 50
id:cButton
signal buttonClick(int index) // QML 信号的声明
property int buttonIndex: -1 //这里做了修改,不言而明
property int currentButtonIndex: 0 //buttonGroup 序号
}