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"; //改变按钮的边界色
        }
    }
}

效果