QML 快速入门

顶层窗口：

所有qml元素活动的舞台

可以通过Window，或QQuickView创建

QML 基本元素

Rectangle:

    Rectangle {
        id: r1
        x: 114
        y: 37
        width: 300
        height: 200
//        color: "blue"
        // 使用渐变色: 垂直方向渐变
        gradient: Gradient {
             GradientStop {
                position: 0.0
                color: "#202020"
             }
             GradientStop {
                 position: 0.5
                 color: "red"
             }

             GradientStop {
                position: 1.0
                color: "#A0A0A0"
             }
        }
        //边框
        border {
            color: "#808080"
            width: 20
        }
        //圆角矩形
        radius: 15
    }

Item

锚布局 anchors

解决x, y坐标固定，无法自适应不同分辨率设备，相对坐标（指定相对于其他元素的位置）

每个Item都有7个锚线：left, horizontalCenter, top, bottom, right, verticalCenter, baseline

四个留白：topMargin, bottomMargin, leftMargin, rightMargin

    Rectangle {
        id: r2
//        x: 200
//        y: 100
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: 20
        anchors.leftMargin: 30
        width: 150
        height: 100
        color: "blue"
        opacity: 0.6
        z: 1.0
    }

- 其他属性：
anchors.centerIn: 居中于父对象
anchors.full: 充满