QML锚点位置

anchors group

顶部        anchors.top : AnchorLine       

 底部       anchors.bottom : AnchorLine

左边        anchors.left : AnchorLine

右边        anchors.right : AnchorLine

水平中心        anchors.horizontalCenter : AnchorLine

垂直中心        anchors.verticalCenter : AnchorLine

基线        anchors.baseline : AnchorLine

铺满        anchors.fill : Item

居中        anchors.centerIn : Item

边距        anchors.margins : real 

上间距        anchors.topMargin : real

下间距        anchors.bottomMargin : real

左间距        anchors.leftMargin : real

右间距        anchors.rightMargin : real

水平中心偏移        anchors.horizontalCenterOffset : real

垂直中心偏移        anchors.verticalCenterOffset : real

基线偏移        anchors.baselineOffset : real

居中对其        anchors.alignWhenCentered : bool

鼠标事件

containsMouse : bool //containsMouse属性用来表明当前的鼠标是否在MouseArea中。

Qt.LeftButton
Qt.RightButton
Qt.MiddleButton

drag //拖动类别
drag.target : Item         //指定拖动的目标对象id
drag.active : bool         //目标对象是否正在被拖动
drag.axis : enumeration //拖动方式，Drag.XAxis、Drag.YAxis 、Drag.XandYAxis
drag.minimumX : real     //指定拖动的最小X坐标
drag.maximumX : real    //指定拖动的最大X坐标
drag.minimumY : real     //指定拖动的最小Y坐标
drag.maximumY : real    //指定拖动的最大Y坐标

drag.filterChildren : bool     //是否过滤掉子对象，过滤掉：鼠标点击先触发父对象后触发子对象
enabled : bool                //是否接受鼠标事件。默认为真，即接受鼠标事件。

mouseX : real    //当前鼠标的位置
mouseY : real    
//鼠标按下事件
Rectangle {
     100; height: 100
    color: "green"

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            if (mouse.button == Qt.RightButton)
                parent.color = 'blue';
            else if ((mouse.button == Qt.LeftButton)
                     && (mouse.modifiers & Qt.ShiftModifier))
                parent.color = 'green';
            else
                parent.color = 'red';
        }
    }
}
//键盘按下事件
Rectangle {
     100; height: 100
    focus: true

    Keys.onPressed: {
        if (event.key == Qt.Key_A) {
            console.log('Key A was pressed');
            event.accepted = true;
        }
    }
}
//拖拽事件
 Rectangle {
        id: container
         600; height: 200
        Rectangle {
            id: rect
             50; height: 50
            color: "red"
            opacity: (600.0 - rect.x) / 600

            MouseArea {
                anchors.fill: parent
                drag.target: rect
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: container.width - rect.width
            }
        }
    }
//切换焦点
Grid {
     100; height: 100
    columns: 2

    Rectangle {
        id: topLeft
         50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.right: topRight
        KeyNavigation.down: bottomLeft
    }

    Rectangle {
        id: topRight
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.left: topLeft
        KeyNavigation.down: bottomRight
    }

    Rectangle {
        id: bottomLeft
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.right: bottomRight
        KeyNavigation.up: topLeft
    }

    Rectangle {
        id: bottomRight
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.left: bottomLeft
        KeyNavigation.up: topRight