布局元素（ Layout Items）

QML使⽤anchors（ 锚） 对元素进⾏布局。 anchoring（ 锚定） 是基础元素对
象的基本属性， 可以被所有的可视化QML元素使⽤。

0_1526279655538_6af14d2c-5aa7-4a25-ba09-68d55e5f69ef-image.png

⼀个元素有6条锚定线（ top顶， bottom底， left左， right右， horizontalCenter⽔平中， verticalCenter垂直中） 。
每⼀条锚定线都有⼀个偏移（ offset） 值， 在top（ 顶） ， bottom（ 底） ， left（ 左） ， right（ 右） 的锚定线中它们也被称作边距。 对于horizontalCenter（ ⽔平中） 与verticalCenter（ 垂直中） 与baseline（ ⽂本基线） 中被称作偏移值。

左对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.left: parent.left
        }
    }

0_1526280121427_67a00b6f-debf-4b30-98e9-b0c16e7d3fad-image.png

右对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.right: parent.right
        }
    }

0_1526280161571_719a7f48-876d-4b24-8814-d63a4f8051cd-image.png

左下对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.left: parent.left
            anchors.bottom: parent.bottom
        }
    }

0_1526280248691_7236703c-20c8-4146-96ce-a93b2dad2a4b-image.png

右上对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.right: parent.right
            anchors.top: parent.top
        }
    }

0_1526280276938_9d1addde-36a7-43b7-8e68-8899c5707002-image.png

居中

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.centerIn: parent
        }
    }

0_1526280314970_c9450bd0-716c-4540-8cae-69d58720c250-image.png

垂直对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.verticalCenter: parent.verticalCenter
        }
    }

0_1526280510930_b15f52b5-ab9d-455f-87d5-c6500f38a842-image.png

水平对齐

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

0_1526280548249_1def8f81-9d16-4b97-8ec4-5842867895aa-image.png

左外对齐，加边距

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.right: parent.left
            anchors.rightMargin: 10
        }
    }

0_1526280445330_b7d38f37-28a8-4537-8494-32f975bb0080-image.png

右下对齐，加边距

BigSquare{
        anchors.centerIn: parent
        SmallSquare{
            anchors.right: parent.right
            anchors.top: parent.bottom
            anchors.topMargin: 10
        }
    }

0_1526280621953_7961d44f-f7b0-46ed-b570-ce7447cd4fa5-image.png

情况不一一列举

输⼊元素（ Input Element）

⽂本输⼊（ TextInput） 单行

⽂本输⼊允许⽤户输⼊⼀⾏⽂本。 这个元素⽀持使⽤正则表达式验证器来限制输⼊和输⼊掩码的模式设置

Rectangle{
        width: 200
        height: 100
        color: "linen"

        TextInput{
            id: input
            x: 10; y: 10
            width: 180
            height: 80
            //裁切-防止超出边界
            clip: true
            //焦点
            focus: true
            text: "Text Input"
        }
    }

0_1526281675764_20180514_150620.gif

⽂本编辑（ TextEdit）多行

显示一块可编辑、格式化的文本

Rectangle{
        width: 200
        height: 100
        color: "linen"

        TextEdit{
            id: input
            x: 10; y: 10
            width: 180
            height: 80
            //裁切-防止超出边界
            clip: true
            //焦点
            focus: true
            //设置换行模式
            wrapMode: TextEdit.Wrap
            text: "Text Edit"
        }
    }

0_1526281918494_20180514_151045.gif

按键元素（ Key Element）

MySquare{
        x: 20; y: 20
        focus: true
        Keys.onLeftPressed: x-=5
        Keys.onRightPressed: x+=5
        Keys.onUpPressed: y-=5
        Keys.onDownPressed: y+=5
    }

源代码

Fork me on Gitee