P2-QML-Item与Rectangle

Item的属性

设置z来控制控件显示

接收键盘信息（回车键）

填充父控件

设置控件之间的距离

Window {
    visible: true              // 是否隐藏
    width: 640                 // 宽度
    height: 480                // 高度
    title: qsTr("Hello World") // 设置应用程序名称

    /* 设置控件之间的距离 */
    Rectangle{
        id: rect1
        width: 50;
        height: 50;
        color: "black"
    }

    Rectangle{
        id: rect2
        width: 50;
        height: 50;
        anchors.left: rect1.right
        anchors.leftMargin: 20    //rect2在rect1右边的20个单位
        color: "black"
    }

    Rectangle{
        id: rect3
        width: 50;
        height: 50;
        anchors.top: rect1.bottom
        anchors.topMargin: 20    //rect2在rect1右边的20个单位
        color: "black"
    }
}

相对于父控件的位置

控件的旋转和放缩

Rectangle属性

Rectangle的边框宽度和颜色，边框圆角

全部代码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true              // 是否隐藏
    width: 640                 // 宽度
    height: 480                // 高度
    title: qsTr("Hello World") // 设置应用程序名称

    /* Item属性 */


    /* 可以设置z来控制控件显示层级 */
    Rectangle{
        x: 100;
        y: 100;
        z: 1        // 这个是调节页面显示的优先级，默认为0
        width: 100;
        height: 50;
        color: "black";
    }

    Rectangle{
        x: 120;
        y: 120;
        width: 100;
        height: 50;
        color: "red"
    }


    /* 如果我们的控件想接收键盘信息的时候，我们就需要先获取到焦点 */
    Rectangle{
        x: 200;
        y: 200;
        width: 100;
        height: 50;
        color: "blue";
        focus: true

        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("on clicked")
            }
        }

        Keys.onReturnPressed: {
            console.log("on return pressed")
        }
    }

    /* 填充父控件 */
    Rectangle{
        anchors.fill: parent // 整个窗口被这个控件填充
        color: "blue";
    }


    /* 设置控件之间的距离 */
    Rectangle{
        id: rect1
        width: 50;
        height: 50;
        color: "black"
    }

    Rectangle{
        id: rect2
        width: 50;
        height: 50;
        anchors.left: rect1.right
        anchors.leftMargin: 20    //rect2在rect1右边的20个单位
        color: "black"
    }

    Rectangle{
        id: rect3
        width: 50;
        height: 50;
        anchors.top: rect1.bottom
        anchors.topMargin: 20    //rect2在rect1右边的20个单位
        color: "black"
    }

    /* 相对于父控件的位置 */
    Rectangle{
        id: rect4
        width: 50;
        height: 50;
        color: "black"
        anchors.horizontalCenter: parent.horizontalCenter  // 控件在父窗口顶部居中
        anchors.centerIn: parent// 父窗口中心居中
    }

    /* 控件的旋转和放缩 */
    Rectangle{
        id: rect5
        width: 50
        height: 50;
        scale: 2         // 放大两倍
        rotation: 30     // 旋转30°
        color: "black"
        anchors.centerIn: parent
    }


    /* Rectangle属性 */

    /* Rectangle的边框宽度和颜色，边框圆角 */
    Rectangle{
        id: rect6
        width: 50
        height: 50;
        color: "black"
        radius: 15 // 圆角15
        border.width: 2;
        border.color: "yellow"  // 边框宽度为2，颜色为黄色
    }
}