QML(二)-Item与Rectangle

本文内容基于：QML教程-P2QML-Item与Rectangle

Qt助手

虽然我们可以在Qt Creator中来搜索内容

但是也可以通过Qt助手来查询，Qt助手的位置就在Qt安装目录中，当然需要根据自己的编译方式不同选择不同目录下的Qt助手，例如，我选择使用mingw8.1版本的64位进行编译，我的就在mingw81_64目录下。

Rectangle

rectangle顾名思义是矩形，我们在Qt助手中查看其Properties(属性)，发现只有几个。

但同时，我们也可以发现其Inherits(继承)自Item，所以Rectangle也拥有Item的属性。

Item

从下图中可以看出，Item继承自QtObject，本身也拥有众多属性，因为特别多，所以下图并没有展示全。

今日练习

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "white"

    Rectangle {
        x: 100
        y: 100
        z: 1
        width: 100
        height: 50
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }

    Rectangle {
        x: 120
        y: 120
        width: 100
        height: 50
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "pink" }
        }
    }

    Rectangle {
        id: conterRect
        anchors.centerIn: parent
        width: 200
        height: 50
        color: "#c4c4c4"
        Text {
            id: center
            text: qsTr("居中")
            color: "white"
            anchors.centerIn: parent
        }
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 200
        height: 50
        color: Qt.rgba(77/255,76/255,167/255,1)
        Text {
            id: horizontal
            text: qsTr("水平居中")
            color: "white"
            anchors.centerIn: parent
        }
    }

    Rectangle {
        id: verticalRect
        anchors.verticalCenter: parent.verticalCenter
        width: 200
        height: 50
        color:"#0857C9"
        Text {
            id: vertical
            text: qsTr("垂直居中")
            color: "white"
            anchors.centerIn: parent
        }
    }


    Rectangle {
        anchors.top: verticalRect.bottom
        anchors.topMargin: 20
        width: 200
        height: 50
        color: "#7b7b7b"
        radius: 20
    }

    Rectangle {
        anchors.top: conterRect.bottom
        anchors.topMargin: 20
        anchors.left: verticalRect.right
        anchors.leftMargin: 20
        width: 200
        height: 50
        color: "#7b7b7b"
        radius: 20
        antialiasing: false
    }
    
    Rectangle {
        width: 100
        height: 20
        color: "#5de16b"
        scale: 2
        rotation: 30
    }
}

有注释版本：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "white"

    Rectangle {                 // 矩形控件
        x: 100
        y: 100
        z: 1                    // z坐标，层级。默认为0，且后面控件覆盖前面控件
        width: 100
        height: 50
        gradient: Gradient {    // 用Gradient控件实现渐变效果
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }

    Rectangle {
        x: 120
        y: 120
        width: 100
        height: 50
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 1.0; color: "pink" }
        }
    }

    Rectangle {
        id: conterRect
        anchors.centerIn: parent        // 相对父控件水平垂直居中
        width: 200
        height: 50
        color: "#c4c4c4"
        Text {
            id: center
            text: qsTr("居中")
            color: "white"
            anchors.centerIn: parent
        }
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter       //  相对父控件水平居中
        width: 200
        height: 50
        color: Qt.rgba(77/255,76/255,167/255,1)
        Text {
            id: horizontal
            text: qsTr("水平居中")
            color: "white"
            anchors.centerIn: parent
        }
    }

    Rectangle {
        id: verticalRect
        anchors.verticalCenter: parent.verticalCenter           //  相对父控件垂直居中
        width: 200
        height: 50
        color:"#0857C9"
        Text {
            id: vertical
            text: qsTr("垂直居中")
            color: "white"
            anchors.centerIn: parent
        }
    }


    Rectangle {
        anchors.top: verticalRect.bottom                    //  本控件的上方是verticalRect控件的下方
        anchors.topMargin: 20                               //  本控件的上方外边距20
        width: 200
        height: 50
        color: "#7b7b7b"
        radius: 20
    }

    Rectangle {
        anchors.top: conterRect.bottom
        anchors.topMargin: 20
        anchors.left: verticalRect.right                    //  本控件的左方是verticalRect控件的右方
        anchors.leftMargin: 20                              //  本控件的左方外边距20
        width: 200
        height: 50
        color: "#7b7b7b"
        radius: 20                                          //  圆角
        antialiasing: false                                 //  是否抗锯齿
    }

    Rectangle {
        width: 100
        height: 20
        color: "#5de16b"
        scale: 2                    // 缩放倍数
        rotation: 30                // 旋转角度
    }
}