Quick QML Rectangle

 

基本屬性

id	名稱
visible	可見與否，默承認見，可不設置
color	顏色
border.color	邊界顏色
border.width	邊界寬
width	寬
height	高
x	x位置
y	y位置
scale	寬高的縮放大小，取值不限，負號亦可
opacity	透明度
radius	圓角
gradient	漸變
rotation	旋轉
anchors.left	左側與誰對齊
anchors.top	上部與誰對齊
anchors.right	右側與誰對齊
anchors.bottom	下方與誰對齊
anchors.horizontalCenter
anchors.verticalCenter
anchors.centerIn	在某個對象的中心，冒號後面是一個某個對象的id
anchors.topMargin	上方留白
anchors.bottomMargin	下方留白
anchors.leftMargin	左側留白
anchors.rightMargin	右側留白
anchors.margins	四周留白，同樣大小
onWidthChanged	寬度變化信號
onHeightChanged	高度變化信號

注：

位置能夠有兩種設置方式，一種是經過x、y座標的方式，這種方式設置後，四個留白設置就不起做用了；另外一種是經過錨點方式設置，好比，經過anchors.left和anchors.top兩個屬性，便可肯定位置，若是相對於某個對象有必定的距離，能夠經過留白的方式設置。

例

main.cpp均爲

#include <QGuiApplication>
#include <QQuickView>
#include<QQmlEngine>

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

    QQuickView viewer;
    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
    viewer.setSource(QUrl("qrc:/main.qml"));
    viewer.show();
    QObject::connect(viewer.engine(), SIGNAL(quit()), &app, SLOT(quit()));
    return app.exec();
}

1.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Rectangle
{

    width:400;
    height:300;
    color:"red";

    Rectangle{

        width:100;
        height:100;
        anchors.left:rect1.right;
        anchors.top:rect1.top;
        anchors.leftMargin:10;
        color:"yellow";

    }
    Rectangle{
        id:rect1;
        width:100;
        height:100;
        x:100;
        y:100;
        color:"blue";

    }
}

效果

2.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Rectangle {
    property alias mouseArea: mouseArea;
    property alias topRect:topRect;  //定義屬性別名
    width:360;      //設置矩形的寬度和高度
    height:360;
    MouseArea  //定義鼠標的移動區域
    {
     id:mouseArea;   //定義屬性id
     anchors.fill: parent;  //佈局整個父窗口
    }
    //添加Rectangle對象
    Rectangle
    {
         rotation: 45;  //設置角度爲旋轉45
         x:40;          //x方向的座標
         y:60;          //y方向的座標
         width:100;     //寬度100
         height:100;    //高度100
         color:"red";     //顏色爲紅色
    }
    Rectangle
    {
     id:topRect; //id標誌符
     opacity: 0.6;  //設置透明度爲0.6
     scale:0.8; //縮小到原來的尺寸的80%
     x:135;  //x 方向的座標
     y:60;    //y方向的座標
     width: 100; //寬度100
     height:100;  //高度100
     radius: 8;  //繪製圓角的矩形
     gradient: Gradient //漸變填充屬性
     {
     GradientStop{position:0.0;color:"#ffffff"}  //頂部的顏色值
     GradientStop{position:1.0;color:"teal"}  //底部的顏色值
     }
        border  //爲矩形添加一個3像素的藍色邊框
        {
           width:3;
           color:blue;
        }
    }
}

效果

 3.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Rectangle {
    id:btn;    //按鈕的id值
    width: 100;  //按鈕的寬度
    height: 62;  //按鈕的高度
    color:"teal";  //設置按鈕的顏色
    border.color: "aqua";  //設置按鈕的邊界顏色
    border.width: 3; //設置按鈕的邊界寬度
    Text  //該對象做爲按鈕的文本
    {
        id:lable;  //id值
        anchors.centerIn:parent; //處在按鈕的中間位置
        font.pointSize:16; //設置按鈕文本的字體大小
        text:"開始"; //設置按鈕的文本
    }
    //定義鼠標的事件響應區域
    MouseArea
    {
        anchors.fill: parent;  //整個父窗口都是鼠標的響應區域
        onClicked:   //鼠標按下的事件處理代碼
        {
            lable.text="按鈕已按下"; //設置按鈕已經按下
            lable.font.pointSize=11; //改變按鈕的字體大小
            btn.color="aqua";  //改變按鈕的顏色
            btn.border.color="teal"; //改變按鈕的邊界色
        }
    }
}

效果