盛世清平~Qt quick学习笔记_03

基本元素：Rectangle,Text,Button,Image, ButtonStyle , MouseArea

渐变色：Gradient

Item:Qt Quick中所有可视元素的基类，定义了绘制图元所需要的大部分通用属性：

x,y,width,height,锚定（anchoring）和按键处理

z:图元在场景中的Z序。z属性的类型是real,数值越小，图元就越垫底（远离我们）

opacity:图元透明度，0.0-1.0之间

锚布局

import QtQuick 2.3

import QtQuick.Window 2.2

Window {

    visible: true

    MouseArea {

        anchors.fill: parent

        onClicked: {

            Qt.quit();

        }

    }

    Rectangle{

        id:rect1;

        anchors.left: parent.left;

        anchors.leftMargin: 20;

        anchors.top: parent.top;

        anchors.topMargin: 20;

        width:120;

        height: 123;

        rotation: 90;

        gradient:Gradient{

            GradientStop{position: 0.0;color:"#202020";}

            GradientStop{position: 0.33;color:"blue";}

            GradientStop{position: 1.0;color:"#FFFFFF";}

        }

    }

    Rectangle{

        anchors.left: rect1.right;

        anchors.leftMargin: 20;

        anchors.top:rect1.top;

        width:120;

        height:120;

        rotation:90;

        gradient:Gradient{

            GradientStop{position:0.0;color:"#202020";}

            GradientStop{position:1.0;color:"#A0A0A0";}

        }

    }

}

按键响应

 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;

                break;

            }

        }

        Text{

            id:keyView;

            font.bold:true;

            font.pixelSize: 24;

            text:qsTr("text");

            anchors.centerIn: parent;

        }

Text

font、text,color,elide,textFormat,wrapMode,horizontalAllignment,verticalAllignment

决定Text元素如何显示文本

Button

Component{

        id:btnStyle;

        ButtonStyle{

            background: Rectangle{

                implicitHeight: 25;

                implicitWidth: 70;

                border.width: control.pressed?2:1;

                border.color: (control.hovered||control.pressed)?"green":"#888888";

            }

        }

    }

    Rectangle{

        width:320;

        height:240;

        color:"gray";

        Button{

            text:"Quit";

            anchors.centerIn: parent;

            style:btnStyle;

            onClicked: {

                Qt.quit();

            }

        }

    }

}

Image--静态图片

AnimatedSprite(AnimatedImage)--动态图片