QML佈局總結

1. 錨佈局

錨佈局(anchors)提供了一種方式，讓你可以指定一個元素與其他元素的關係來確定原色在界面中的位置。 
每個Item都用7條不可見的錨線：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直居中（verticalCenter）;除了錨線外，還可以指定4個區域的留白：上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin） 
還可以使用anchors.fill來填充整個區域，使用anchors.center使某個Item居中 
下面是關於錨佈局的一個簡單的示例，顯示效果如下 

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Rectangle {
        // 填充整個區域
        anchors.fill: parent
        color: '#505050'

        Rectangle {
            // 左上角
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 右上角
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 左下角
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 右下角
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 居中
            anchors.centerIn: parent
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 中上
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 左中
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 右中
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            color: 'blue'
            width: 100
            height: 100
        }

        Rectangle {
            // 中下
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            color: 'blue'
            width: 100
            height: 100
        }
    }
}

2. 定位器

常用的定位器有如下幾種，Row、Column、Grid、Flow。

  
  Row: 沿一行放置它的子Item。
  Column: 垂直放置一列Item。
  Grid: 在網格上放置它的子Item。可以使用rows和columns指定表格的行數和列數。使用rowSpacing和columnSpacing指定行、列間距；flow指定表格的流模式，Grid.LeftToRight爲默認值，從左到右放置Item，當設置爲Grid.TopToBottom時，表示從上到下放置Item。
  Flow： 與Grid類似不同之處在於，不用指定行數和列數，他會計算Item的尺寸然後與自身尺寸比較自動換行。
  上面的幾個編輯器都具有如下屬性：add、move、populate
  都具有Positioner的附加屬性，可以通過Positioner的index、isFirstItem、isLastItem獲取當前顯示Item的信息。
  

下面是一個簡單的關於定位器佈局的示例： 

完整的QML代碼如下：

 

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    id: mianWindow

    width: 800
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        color: '#505050'

        Row {
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            spacing: 5

            Repeater {
                model: 4
                Rectangle {
                    width: 50
                    height: 50
                    id: positionerRow
                    color: getRectColor()

                    function getRectColor() {
                        if (Positioner.index === 0)
                            return 'red'
                        else if (Positioner.index === 1)
                            return 'yellow'
                        else if (Positioner.index === 2)
                            return 'blue'
                        else
                            return 'green'
                    }
                }
            }
        }
    }

    Column {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.left: parent.left
        anchors.leftMargin: 5
        spacing: 5

        Repeater {
            model: 4

            Rectangle {
                width: 50
                height: 50
                color: getRectColor()

                function getRectColor() {
                    if (Positioner.index === 0)
                        return 'red'
                    else if (Positioner.index === 1)
                        return 'yellow'
                    else if (Positioner.index === 2)
                        return 'blue'
                    else
                        return 'green'
                }
            }
        }
    }

    Grid {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.right: parent.right
        anchors.rightMargin: 5
        columns: 4
        spacing: 5

        Repeater {
            model: 14
            Rectangle {
                width: 50
                height: 50
                color: getRectColor()

                function getRectColor() {
                    if (Positioner.index % 5 === 0)
                        return 'red'
                    else if (Positioner.index % 5 === 1)
                        return 'yellow'
                    else if (Positioner.index % 5 === 2)
                        return 'blue'
                    else if (Positioner.index % 5 === 3)
                        return '#00FFFF'
                    else
                        return 'green'
                }
            }
        }
    }

    Flow {
        anchors.top: parent.top
        anchors.topMargin: 5
        anchors.right: parent.right
        anchors.rightMargin: 5
        width: 200
        spacing: 5

        Repeater {
            model: 14
            Rectangle {
                width: 50
                height: 50
                color: getRectColor()

                function getRectColor() {
                    if (Positioner.index % 5 === 0)
                        return 'red'
                    else if (Positioner.index % 5 === 1)
                        return 'yellow'
                    else if (Positioner.index % 5 === 2)
                        return 'blue'
                    else if (Positioner.index % 5 === 3)
                        return '#00FFFF'
                    else
                        return 'green'
                }
            }
        }
    }
}
 

 

3. 佈局管理器

佈局管理器與Qt QWidget中的佈局類似，它與定位器佈局之間的不同就是，佈局管理器會自動調節界面的尺寸適應界面的大小。要使用佈局管理器，需要導入Layout模塊，使用如下語句import QtQuick.Layouts 1.1，主要常用的佈局管理器有RowLayout、ColumnLayout和GridLayout

下面以RowLayout爲例說明一下Layout的一些屬性；

Layout.minimumWidth
Layout.minimumHeight
Layout.preferredWidth
Layout.preferredHeight
Layout.maximumWidth
Layout.maximumHeight
Layout.fillWidth
Layout.fillHeight
Layout.alignment

Layout.minimumWidth、Layout.minimumHeight、*Layout.maximumWidth、Layout.maximumHeight指明最大最小寬度和高度；當Layout.fillWidth爲true時，Item的寬度爲儘可能爲最大，爲false時，Item的寬度大小爲Layout.preferredWidth。Layout.fillHeight的用法同Layout.fillWidth類似。Layout.alignment表示佈局的Item的對齊方向。

對於GridLayout來講，flow可以指定排列方式，rows和columns可以指定行數和列數，Layout.columnSpan所跨的列數，Layout.rowSpan所跨的行數

下面是一個關於佈局管理器的示例，效果如下： 

完整代碼如下：

 

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

Window {
    id: mianWindow

    width: 800
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        color: '#505050'

        RowLayout {
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            width: 500

            Rectangle {
                color: 'teal'
                Layout.fillWidth: true
                Layout.minimumWidth: 50
                Layout.preferredWidth: 100
                Layout.maximumWidth: 200
                Layout.minimumHeight: 150
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }

            Rectangle {
                color: 'plum'
                Layout.fillWidth: false
                Layout.minimumWidth: 100
                Layout.preferredWidth: 200
                Layout.preferredHeight: 100
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }

        ColumnLayout {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            height: 300

            Rectangle {
                color: 'teal'
                Layout.fillHeight: true
                Layout.minimumHeight: 50
                Layout.preferredWidth: 200
                Layout.preferredHeight: 100
                Layout.maximumWidth: 250
                Layout.maximumHeight: 150
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }

            Rectangle {
                color: 'plum'
                Layout.fillHeight: false
                Layout.minimumWidth: 100
                Layout.preferredWidth: 100
                Layout.preferredHeight: 120
                //horizontalCenter: parent.horizontalCenter
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }

        GridLayout {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            anchors.right: parent.right
            anchors.rightMargin: 5
            flow: GridLayout.LeftToRight
            height: 200

            columns: 3

            Rectangle {
                color: 'red'
                Layout.columnSpan: 2
                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                width: 50
                height: 50
            }

            Rectangle {
                color: 'yellow'
                width: 50
                height: 50
            }

            Rectangle {
                color: 'blue'
                Layout.rowSpan: 2
                width: 50
                height: 50
            }

            Rectangle {
                color: 'green'
                width: 50
                height: 50
            }
        }
    }
}