【QML】

简介

Item内通过id互相访问
使用封装好的控件，通过Item的成员函数访问，不能通过id访问。

事件循环

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickStyle>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));
    engine.load(QUrl(QStringLiteral("qrc:/Main.qml")));//加载根窗口
    return app.exec();//渲染和监听事件
}

根窗口

import QtQuick.Window 2.2
Window {
    id: root
    visible: true
    width: 320
    height: 320
}

父子关系

Window {
    id: root
    visible: true
    width: 320
    height: 320
    Button{
        id: button
        anchors.right: parent.right
        text: qsTr("button")
    }
}

生命周期

Window {
     Component.onCompleted: {//构造函数
         function slotslot(){
             myItem.setText();
         }
         myItem.sendSig.connect(slotslot)
     }
     Component.onDestruction: {//析构函数
         console.log("destruct")
     }    
}

控件

Window {
    id: root
    visible: true
    width: 320
    height: 320

    property int age: 18 //自定义属性
    function say(){  //自定义函数
        console.log("hello")
    }
    signal sendSig() //自定义信号，首字母必须小写
    onSendSig: {//on+sendSig绑定，首字母换成大写
        console.log("this is slot"); 
    }
}

事件绑定

Button{
    id: button
    anchors.right: parent.right
    text: qsTr("button")
    function say(){  //自定义函数
   			console.log("hello")
		}
    onClicked: {//on+信号名，绑定
        console.log("i am button")
    }
    clicked.connect(say)//connect绑定
}

布局

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

自定义控件

控件通信

控件之间通过id相互访问，可以通过id.<member>的方式访问控件对象成员函数、成员属性。