Rectangle {
    x: 0;                  // 右上角横坐标，缺省为0
    y: 0;                  // 右上角纵坐标，缺省为0
    width: 300;            // 宽度，缺省为0，其子对象仍会显示（相对于0）
    height:300;            // 高度，缺省为0，其子对象仍会显示（相对于0）
    color: "red";          // 颜色，缺省为白色或透明（父窗口和其显示都是白色，未进一步判断）
    opacity: 0.5;          // 透明度，缺省为1
    rotation: 30;          // 旋转度，缺省为0，中心瞬时钟旋转
    radius: 10;            // 圆角度，缺省为0，从本元素最外框开始圆角
    border.width: 20;      // 边框宽度，缺省为0
    border.color: "white"; // 边框颜色，缺省为黑色"balck"
    z: 1;                  // 显示顺序，同一层的元素，越大越在上面
}

效果如下图：

图片.png

Text：一个显示框，必须为子对象

Rectangle {
    width: 300; 
    height: 300; 
    color: "red"; 
    Text {
        anchors.centerIn: parent; // 位置：设置显示在父窗口中间，缺省为右上角
        text: "hello world! ";    // 内容：显示字符串
    }
}

效果如下图：

图片.png

MouseArea：处理鼠标输入，必须为子对象，其父对象必须为可视的

Rectangle {
    width: 300; // 宽度，缺省为0，其子对象仍会显示（相对于0）
    height: 300; // 高度，缺省为0，其子对象仍会显示（相对于0）
    color: "red"; // 颜色
    MouseArea {
        acceptedButtons: Qt.LeftButton | Qt.MiddleButton; // 缺省为Qt.RightButton
        anchors.fill: parent; // 缺省：无
        onClicked: {
            if(mouse.button == Qt.LeftButton) {
                parent.color = "  blue  "; // 加空格也可以，机制中可能去掉所有空格
            }else{
                console.log("yellow"); // 打印到控制台
                parent.color = "yellow";
            }
        }
    }
}

效果如下图：红色=>蓝色(鼠标右键)=>黄色（鼠标左键）

图片.png

从上面几个看出来很多属性是类似的，从qt帮助文件中看出很多属性是继承的，那么先了解属性，我们从帮助文件开始，查看Rectangle相关的帮助文件：

图片.png

Rectangle的定制属性只有4项，其中边框有宽度和颜色两个子项；其他都是继承于Item，我们查看Item的帮助文件，继承关系如下：

图片.png

Item类，帮助文件中描述“The Item type is the base type for all visual items in Qt Quick.”，所以我们，学习属性先从Item开始，Item有属性和方法，其详解将在下一篇章介绍，属性和方法列表如下：

Properties

anchors.top : AnchorLine
anchors.alignWhenCentered : bool
anchors.baselineOffset : real
anchors.verticalCenterOffset : real
anchors.horizontalCenterOffset : real
anchors.rightMargin : real
anchors.leftMargin : real
anchors.bottomMargin : real
anchors.topMargin : real
anchors.margins : real
anchors.centerIn : Item
anchors.fill : Item
anchors.baseline : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.horizontalCenter : AnchorLine
anchors.right : AnchorLine
anchors.left : AnchorLine
anchors.bottom : AnchorLine

clip : bool
data : list<Object>
enabled : bool
focus : bool
height : real

implicitHeight : real

implicitWidth : real
layer.effect : Component
layer.enabled : bool
layer.format : enumeration
layer.mipmap : bool
layer.samplerName : string
layer.smooth : bool
layer.sourceRect : rect
layer.textureSize : size
layer.wrapMode : enumeration
opacity : real
parent : Item
resources : list<Object>
rotation : real
scale : real
smooth : bool
state : string
states : list<State>
transform : list<Transform>
transformOrigin : enumeration
transitions : list<Transition>
visible : bool
visibleChildren : list<Item>
width : real
x : real
y :real
z :real

Methods

childAt(real x, real y)
object contains(point point)
forceActiveFocus(Qt::FocusReason reason)
forceActiveFocus()
object mapFromItem(Item item, real x, real y, real width, real height)
object mapFromItem(Item item, real x, real y)
object mapToItem(Item item, real x, real y, real width, real height)
object mapToItem(Item item, real x, real y)、
nextItemInFocusChain(bool forward)