Qml-Item几何属性

Qml-Item几何相关属性

Item的位置和锚（定位）属性主要是对Item的几何位置相关；在qml中组件的位置坐标轴是以左上角为原点，水平向右为X正方向，垂直向下为Y轴正方向。

Item的位置相关属性

Item的位置属性主要由x,y,width,height 四个属性控制

1. 属性x ：组件X轴位置；
2. 属性Y ：组件Y轴位置；
3. 属性width ：组件的宽度；
4. 属性height ：组件的高度；
5. Item中如果存在可视的子组件，子组件的原点是相对于父组件的左上角为原点

Item位置属性实例代码

此处以Rectangle类作为实验demo;原因：Rectangle继承于Item，且可视。

	 Rectangle{
        id:idRootRe
        x:50
        y:50
        width: 200
        height:200
        color:"lightblue"

        //子Rectangel的原点（0，0）是父对象的左上脚
        Rectangle{
            id:idChild
            width: 50
            height: 50
            color:"red"
        }
    }

Item位置属性效果

Item锚布局(anchor)相关的属性

1.与四个方向的anchor属性：anchors.left、anchors.right、anchors.top、anchors.bottom
2.与四个方向的margin属性: anchors.leftMargin、anchors.rightMargin、anchors.topMargin、anchors.bottomMargin、anchors.margins
3.与居中相关的：anchors.horizontalCenter、anchors.verticalCenter、anchors.centerIn
4.与居中相关的偏移：anchors.horizontalCenterOffset、anchors.verticalCenterOffset
5.填充布局：anchors.fill
6.注意事项：anchors.margins属性对anchors.fill 是4个方向都生效，如果有四个方向相应的某个属性，只对某个方向的margin生效：如使用了 anchors.left 属性，只影响到leftMargin。
7.可以通过 anchors 属性组的各种数据组合，构成qml中各种相对布局。

Item锚布局（anchor）属性的实例代码

Rectangle{
        id:idRootRe
        anchors.fill: parent
        color:"lightblue"

        Rectangle{
            id:idLeft
            anchors.left: parent.left
            //anchors.leftMargin: 10
            anchors.margins: 10                 //只影响left有10px偏差
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idLeftTop
            anchors.left: idLeft.right
            anchors.top: parent.top
            anchors.margins: 10                 //影响left top有10px偏差
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idRight
            anchors.right: parent.right
            anchors.rightMargin: 10
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idCenterIn
            anchors.centerIn: parent                //centerIn 需要指定组件大小
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idLeftBot
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.margins: 10                 //影响left bottom有10px偏差
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idRightBot
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.margins: 10                 //影响right bottom有10px偏差
            width: 50
            height: 50
            color:"red"
        }

        Rectangle{
            id:idHorCenterR
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 60          //+60 是外 中心靠右 负中心靠左
            width: 50
            height: 50
            color:"lightgreen"
        }
        Rectangle{
            id:idHorCenterL
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -60
            width: 50
            height: 50
            color:"lightgreen"
        }

        Rectangle{
            id:idVerCenterBot
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset:60
            anchors.horizontalCenter: parent.horizontalCenter
            width: 50
            height: 50
            color:"lightgreen"
        }
        Rectangle{
            id:idVerCenterTop
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset:-60
            anchors.horizontalCenter: parent.horizontalCenter
            width: 50
            height: 50
            color:"lightgreen"
        }

        Rectangle{
            id:idVerCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 60          //+60 是外 中心靠右 负中心靠左
            width: 50
            height: 50
            color:"lightgreen"
        }
    }

Item锚布局（anchor）属性效果