Qt Quick学习笔记

Drawer（抽屉）

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Drawer {
        id: drawer
        width: 0.5 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        //从Text上继承下来的属性，使Label中文字水平和垂直居中，Label换成Text也行
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

        //从Item继承下来的属性，保存转化属性，
        //这部分的内容实时调整Label的坐标，不然Label中的字在拖动Drawer时不会动
        transform: Translate {
            x: drawer.position * content.width * 0.33
        }
    }

}

Component

是一个组件类供引用，一个QML文件本质上也是一个组件

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Item {
        width: 100; height: 100

        Component {
            id: redSquare

            Rectangle {
                color: "red"
                width: 10
                height: 10
            }
        }

        Loader { sourceComponent: redSquare }
        Loader { sourceComponent: redSquare; x: 20 }
    }

}

QtObject

提供轻量级的用户自定义属性集合

Binding（绑定）

将一个对象的属性绑定到另一个不是由QML直接实例化的对象上，如由C++导出到QML中的类

Loader（加载程序）

动态加载QML组件
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Item {
        width: 200
        height: 200
        Loader {
           id: pageLoader
           width: 200
           height: 100
        }

        MouseArea {
            anchors.fill: parent
            onClicked: pageLoader.source = "Page1.qml"
        }
    }
}

Page1.qml

import QtQuick 2.0

Rectangle {
    border.width: 1
}

点击控件后加载Page1.qml文件

Connection（连接）

在QML传递事件时通常只要创建一个on即可，如下点击鼠标改变背景颜色

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Rectangle {
        id: rec
        anchors.fill: parent
        color: "red"
        MouseArea {
            anchors.fill: parent
            onClicked: {
               rec.color = "black"
            }
        }
    }
}

Connection适用以下情况
Multiple connections to the same signal are required
Creating connections outside the scope of the signal sender
Connecting to targets not defined in QML
如我点击按钮改变Rectangle的颜色

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Rectangle {
        id: rec
        anchors.fill: parent
        color: "red"

        Button {
            id: button
            anchors.bottom: rec.bottom
            text: "按钮"
            width: 200
            height: 50
        }
    }

    Connections {
        //发出信号的对象
        target: button;
        onClicked : {
            rec.color = "black"
        }
    }
}

Timer（计时器）

定时器，下面是一个实时显示时间的应用

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")

    Item {
        Timer {
            //设置触发时间
            interval: 1000
            //是否启用定时器,对于一个不重复的定时器触发后设置为false
            running: true
            //是否重复
            repeat: true
            //使用JavaScript的Date()对象来访问当前时间
            onTriggered: time.text = Date().toString()
        }

        Text { id: time }
    }
}

SwipeView

显示当前页是第几页的控件

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //一个滑动的页面
    SwipeView {
        id: view

        currentIndex: 1
        anchors.fill: parent

        Item {
            id: firstPage
            Text {
                text: qsTr("firstPage")
            }
        }
        Item {
            id: secondPage
            Text {
                text: qsTr("secondPage")
            }
        }
        Item {
            id: thirdPage
            Text {
                text: qsTr("thirdPage")
            }
        }
    }

    PageIndicator {
        id: indicator
        //保存页面的个数
        count: view.count
        currentIndex: view.currentIndex

        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

Repeator（重复者）

重复排列某一个控件，如下面一行排列3个一样的Rectangle，如要编程列，把Row变成Column即可

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row {
        Repeater {
            model: 3
            Rectangle {
                width: 100; height: 40
                border.width: 1
                color: "yellow"
            }
        }
    }
}

Flickable

里面的控件可以拖动

Canvas（画布）

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Canvas {
        width: 400
        height: 200
        onPaint: {
            //得到画师ctx是一个Context2d对象
            var ctx = getContext("2d");
            //设置画笔的宽度
            ctx.lineWidth = 2;
            //设置画笔的颜色
            ctx.strokeStyle = "red";
            //设置画刷的颜色
            ctx.fillStyle = "blue";
            ctx.beginPath();
            //a rectangle at  (x, y), with the given width w and height h
            ctx.rect(100,80,120,80);
            ctx.fill();
            ctx.stroke();
        }
    }

}

用JavaScript动态构建QML对象

动态创建组件

点击main.qml上的按钮，将窗口上的内容变为SecondPage.qml上的内容
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import "MyJs.js" as My

ApplicationWindow {
    id: app
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        text: "Button"
        onClicked: {
            My.createSecondPage();
        }
    }
}

SecondPage.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0


Rectangle {
    width: 640
    height: 480

    Text {
        anchors.fill: parent
        text: "Second Page"
    }
}

MyJs.js

function createSecondPage() {
    var component = Qt.createComponent("SecondPage.qml");
    //必须指定父类对象不然不会显示
    var sprite = component.createObject(app);
}

动态删除对象

main.qml
控件显示5个红色的正方形，显示完直接销毁

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: app
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: container
        width: 500; height: 100

        Component.onCompleted: {
            var component = Qt.createComponent("SecondPage.qml");
            for (var i=0; i<5; i++) {
                var object = component.createObject(container);
                object.x = (object.width + 10) * i;
            }
        }
    }
}

SecondPage.qml

import QtQuick 2.7

Rectangle {
    id: rect
    width: 80; height: 80
    color: "red"

    NumberAnimation on opacity {
        to: 0
        duration: 1000

        onRunningChanged: {
            if (!running) {
                console.log("Destroying...")
                rect.destroy();
            }
        }
    }
}