QML入门教程(3): anchors的用法

QML的布局方法是anchors，锚。

例如界面上四个按钮，可以用绝对坐标 (x, y) 设置他们的位置，

  代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 320
    height: 480
    title: qsTr("Hello World")
    color: "gray"

    Button
    {
        id:btn1
        x:100
        y:100
        text:"按钮1"
        width: 100
        height: 30

        background: Rectangle {
               color:"#0857C9"
               }
    }

    Button
    {
        id:btn2
        x:200
        y:160
        text:"按钮2"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(77/255,76/255,167/255,1)
               }
    }

    Button
    {
        id:btn3
        x:10
        y:220
        text:"按钮3"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(54/255,54/255,167/255,1)
               }
    }

    Button
    {
        id:btn4
        x:100
        y:280
        text:"按钮4"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(177/255,76/255,67/255,1)
               }
    }
}

 但是这种比较麻烦，用锚的话，比较方便。QML提供的anchors如下：

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  

例如，把界面做成如下样式：

        anchors需要通过控件的id来设计布局，例如上面的实现思路：先指定第一个控件的位置，其它控件根据它的位置进行布局。btn2的顶部和btn1的顶部对其，btn2的左边处在btn1的右边，距离为10.btn3,btn4类似的设计

        代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 320
    height: 480
    title: qsTr("Hello World")
    color: "gray"

    Button
    {
        id:btn1
        x:10
        y:10
        text:"按钮1"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: "blue"
               }
    }

    Button
    {
        id:btn2
//        x:200
//        y:160
        text:"按钮2"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(77/255,76/255,167/255,1)
               }

        anchors.left: btn1.right
        anchors.leftMargin: 20
        anchors.top: btn1.top
    }

    Button
    {
        id:btn3
//        x:10
//        y:220
        text:"按钮3"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(54/255,54/255,167/255,1)
               }

        anchors.top: btn1.bottom
        anchors.topMargin: 10
        anchors.left: btn1.left
    }

    Button
    {
        id:btn4
//        x:100
//        y:280
        text:"按钮4"
        width: 100
        height: 30

        //设置按钮背景颜色
        background: Rectangle {
               color: Qt.rgba(177/255,76/255,67/255,1)
               }

        anchors.left: btn2.left
        anchors.top: btn2.bottom
        anchors.topMargin: 10
    }
}