qml 基本元素

Item

Item（基本元素对象）通常被⽤来作为其它元素的容器使⽤，类似HTML语 ⾔中的div元素（div element）。

矩形

    Rectangle{
        id:rect
        width: 800
        height: 400
        color: "slategray"
    }

渐变⾊

    Rectangle{
        id:rect
        width: 800
        height: 400
        gradient: Gradient{
            GradientStop{ position: 0.0; color: "lightsteelblue" }
            GradientStop{ position: 1.0; color: "slategray" }
        }
    }

文本元素

    Text {
        id: text
        text: qsTr("text")
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 28
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }

图像

Image {
    id: image
    width: 500
    height: 300
    source: "images/background.png"
}

⿏标区域元素（MouseArea Element）

Rectangle{
    id: root
    width: 500
    height: 300
    color: "#b0c4de"
    MouseArea{
        id: area
        width: parent.width
        height: parent.height
        onClicked: {
            if(root.color == "#b0c4de")
            {
                root.color = "#708090"
            }
            else
            {
                root.color = "#b0c4de"
            }
        }
    }
}