初学QML(一）

来几段很官方的话

Qt 是一个跨平台的用于创建精彩用户界面和强大原生应用的框架。它包括一套跨平台的 类库、一套整合的开发工具和一个跨平台的集成幵发环境（IDE)。 

Qt Quick 是 Qt 提供的一种高级用户界面工具包，它包括描述性语言 QML、语言运行时、 大量的用户界面元素、Qt Creator 对 QML 的完美支持、 Qt Quick 设计器、 QML 与 C++混合 编程支持等众多技术，使用它你可以轻松、快速地为移动和嵌入式设备创建流畅的用户界面。 

QML (Qt Meta-Object Language), 是 Qt Quick 技术的核心与基础， 是一种简便易学的标 记性语言，用来描述一个程序的用户界面。

再放放我敲的demo

1.

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
       color: "blue";
       anchors.fill: parent;
       border.width: 6;
       border.color: "#888888"

       Rectangle {
           anchors.centerIn: parent;
           width: 120;
           height: 120;
           radius: 8;
           border.color: "pink";
           antialiasing: true;
           color: "red";
       }
    }
}

2.

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        id: rect1;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        width: 120;
        height: 120;
        gradient: Gradient{
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }

    Rectangle {
        anchors.left: rect1.right;
        anchors.leftMargin: 20;
        anchors.top : rect1.top;
        width: 120;
        height: 120;
        rotation: 90;  //旋转90
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }
}

3.

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    color: "#c0c0c0";
    focus: true;
    Keys.enabled: true;
    Keys.onEscapePressed: Qt.quit();             //
    Keys.onBackPressed: Qt.quit();               //
    Keys.onPressed: {                            //按下事件
        switch(event.key)
        {
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            event.accepted = true;
            keyView.text = event.key - Qt.Key_0; // id为keyView的text改变
            break;
        }
    }
    Text {
        id: keyView;
        color: "#000000";
        font.bold: true;
        text: qsTr("I know");
        anchors.centerIn: parent;
    }
}

刚出来时

按下数字后

,

4.

import QtQuick 2.0

Rectangle {
    id : forwarder;
    width: 100;
    height: 100;

    signal send();
    onSend: console.log("Send clicked");

    MouseArea{
        id: mouserea;
        anchors.fill: parent;
        onClicked: console.log("MouseArea clicked");
    }

    Component.onCompleted:{//附加信号处理器
        mouserea.clicked.connect(send);
    }
}

当Rectangle区域被点击则。。。

5.

import QtQuick 2.0

Rectangle {
    id: root;
    width: 300;
    height: 200;

    Text{
        text: "simple demo";
    }

    Rectangle{
        anchors.bottom: parent.bottom;
        color: "red";
        width: 50;
        height: 30;
    }

    Component.onCompleted:{
        console.log("%1 visual children:".arg(children.length));
        for(var i = 0; i < children.length; i++){
            console.log(children[i]);
        }
    }
}

不想解释

6.

import QtQuick 2.0

Rectangle {
    width: 320;
    height: 240;

    MouseArea{
        anchors.fill: parent;
        acceptedButtons: Qt.LeftButton | Qt.RightButton;
        onClicked: {
            if(mouse.button == Qt.RightButton){
                Qt.quit();
            }
            else if(mouse.button == Qt.LeftButton){
                color = Qt.rgba( (mouse.x % 255) / 255.0,
                                 (mouse.y % 255) / 255.0,
                                  0.6,
                                  1.0 );
            }
        }
        onDoubleClicked: {
             color = Qt.rgba(Math.random(),
                             Math.random(),//随机颜色
                             Math.random(), 1);
        }
    }
}

按下左键随机色，双击随机色，右键按下关闭

7.

import QtQuick 2.0
import QtQuick.Controls 1.2

Rectangle {
    width: 320;
    height: 240;
    color: "gray";

    Text {
        id: text1;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        text: "Text One";
        color: "blue";
        font.pixelSize: 28;
    }

    Text {
        id: text2;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: text1.bottom;
        anchors.topMargin: 8;
        text: "Text Two";
        color: "blue";
        font.pixelSize: 28;
    }

    Button {
        id: changeButton;
        anchors.top: text2.bottom;
        anchors.topMargin: 8;
        anchors.horizontalCenter: parent.horizontalCenter;
        text: "Change";
    }

    Connections {
        target: changeButton;
        onClicked: {
            text1.color = Qt.rgba(Math.random(),
                                  Math.random(),//构造随机颜色
                                  Math.random(), 1);
            text2.color = Qt.rgba(Math.random(),
                                  Math.random(),
                                  Math.random(), 1);
        }
    }
}

按下Button则Text One , Text Two会改变颜色

8. 

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    width: 320;
    height: 480;
    color: "gray";

    focus: true;
    Keys.enabled: true;
    Keys.onEscapePressed: {
        Qt.quit();
    }
    Keys.forwardTo: [moveText, likeQt];

    Text {
        id: moveText;
        x: 20;
        y: 20;
        width: 200;
        height: 30;
        text: "Moving Text";
        color: "blue";
        font {
            bold: true;
            pixelSize: 24;
        }
        Keys.enabled: true;//enabled用来控制是否处理鼠标事件,默认值是true,如果你设置为false,那么它所代理的Item就会无视鼠标事件
        Keys.onPressed: {
            switch(event.key)
            {
            case Qt.Key_Left:
                x -= 10;
                break;
            case Qt.Key_Right:
                x += 10;
                break;
            case Qt.Key_Down:
                y += 10;
                break;
            case Qt.Key_Up:
                y -= 10;
                break;
            default:
                return;
            }
            event.accepted = true;
        }
    }

    CheckBox {
        id: likeQt;
        text: "Like Qt Quick";
        anchors.left:  parent.left;
        anchors.leftMargin: 10;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 10;
        z: 1;
    }
}

按上下左右动，没有边界的动，可以加代码防御

 

有点没点的

加点知识点

Keys 有三个属性：

     enabled 属性控制是否处理按键。 

     forwardTo 属性是列表类型， 它及示传递按键事件给列表内的对象， 如果某个对象 accept 了某个按键，那位列其后的对象就不会收到该按键事件。

     priority 属性允许你设置 Keys 附加厲性的优先级， 有两种： 在 Item 之前处理按键（默认 行为） 、 在 Item 之后处理按键。 

9.

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    width: 320;
    height: 240;
    color: "gray";
    QtObject{
        id: attrs;
        property int counter;
        Component.onCompleted:{
            attrs.counter = 10;
        }
    }
    Text {
        id: countShow;
        anchors.centerIn: parent;
        color: "blue";
        font.pixelSize: 40;
    }
    Timer{                            //定时器
        id: countDown;
        interval: 1000;
        repeat: true;
        triggeredOnStart: true;
        onTriggered:{                //定时器的属性
            countShow.text = attrs.counter;
            attrs.counter -= 1;
            if(attrs.counter < 0)
            {
                countDown.stop();
                countShow.text = "Clap Now!";
            }
        }
    }

    Button {
        id: startButton;
        anchors.top: countShow.bottom;
        anchors.topMargin: 20;
        anchors.horizontalCenter: countShow.horizontalCenter;
        text: "Start";
        onClicked: {
            attrs.counter = 10;
            countDown.start();
        }
    }
}

点击后