1. 前言

Qt Quick編程，提供了多種布局方式。
如，靜態(tài)布局，可以使用組件的x、y屬性進(jìn)行設(shè)置，或者進(jìn)行綁定。
還可以使用錨anchors進(jìn)行布局。
此外，還可以使用定位器以及定位管理器為多組件進(jìn)行布局。
但使用布局管理器和錨會占用內(nèi)存和實例化時間，若使用x、y、width、height等屬性能完成需求，兩者相較取其輕，則盡量就不要用布局管理器和錨進(jìn)行布局了。

2. 定位器

定位器(Positioner)是管理聲明式用戶界面中項目位置的容器項目。位置定位器的行為方式類似于用于標(biāo)準(zhǔn)Qt小部件的布局管理器，但它們本身也是容器。
當(dāng)需要按照規(guī)律的布局安排許多項目時，位置定位器使得工作更加簡單。
Qt Quick布局也可以用于在用戶界面中布置Qt Quick項目。它們管理聲明式用戶界面上項目的位置和大小，非常適合可調(diào)整大小的用戶界面。
包含一些布局：

2.1. Column布局

Column布局用于垂直排列項。以下示例使用列項在外部項定義的區(qū)域中排列三個矩形項。spacing屬性設(shè)置各矩形間的間隔。

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item {
        width: 310; height: 170

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { color: "lightblue"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "Hello" } }
            Rectangle { color: "gold"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "World" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "China" } }
        }
    }
}

2.2. Row布局

Row布局用于水平排列項。以下示例使用行項在由外部彩色矩形定義的區(qū)域中排列三個帶有圓角的矩形項。spacing屬性設(shè)置為在矩形項之間包含一小段空間。
要確保父矩形足夠大，以便在水平居中的行項周圍留有一些空間。

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Rectangle {
        width: 320; height: 110
        color: "#c0c0c0"

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "#024c1c" }
            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "#42a51c" }
            Rectangle { width: 100; height: 100; radius: 20.0
                        color: "white" }
        }
    }

2.3. Grid布局

Grid布局用于將項以網(wǎng)格或表格形式放置。以下示例使用網(wǎng)格項將四個矩形項放置在一個2x2的網(wǎng)格中。與其他位置管理器一樣，可以使用spacing屬性指定項之間的間距。

 import QtQuick 2.0

 Rectangle {
     width: 112; height: 112
     color: "#303030"

     Grid {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         columns: 2
         spacing: 6

         Rectangle { color: "#aa6666"; width: 50; height: 50 }
         Rectangle { color: "#aaaa66"; width: 50; height: 50 }
         Rectangle { color: "#9999aa"; width: 50; height: 50 }
         Rectangle { color: "#6666aa"; width: 50; height: 50 }
     }
 }

水平和垂直間距之間沒有任何區(qū)別，因此任何額外的空間都必須在項本身內(nèi)添加。
網(wǎng)格中的任何空單元格都必須通過在網(wǎng)格定義的適當(dāng)位置定義占位符項來創(chuàng)建。

2.4. Flow布局

Flow布局用于在頁面上放置像單詞一樣的項，其中行或列中的項不重疊。
Flow布局以類似于網(wǎng)格項的方式排列項，項沿一個軸（次要軸）排列在一行中，并且以另一個軸（主要軸）沿著彼此放置的項的線排列。流動的方向以及項之間的間距由流和間距屬性控制。
以下示例顯示包含多個文本子項的Flow布局。這些項以類似于屏幕截圖中顯示的方式排列。

    Rectangle {
        color: "lightblue"
        width: 300; height: 200

        x : parent.x + 350
        y : 200

        Flow {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 10

            Text { text: "Text"; font.pixelSize: 40 }
            Text { text: "items"; font.pixelSize: 40 }
            Text { text: "flowing"; font.pixelSize: 40 }
            Text { text: "inside"; font.pixelSize: 40 }
            Text { text: "a"; font.pixelSize: 40 }
            Text { text: "Flow"; font.pixelSize: 40 }
            Text { text: "item"; font.pixelSize: 40 }
        }
    }

2.5. Transition使用過渡

以上四個定位器添加或刪除一個子項目時，可以使用過渡（Transition）,使操作具有動畫效果。
四個定位都有add、move、populate屬性，在給屬性分配一個Transition對象。
add過渡：在定位器創(chuàng)建完畢后，向定位器添加一個子項，或是將子項通過更換父對象的方式變?yōu)槎ㄎ黄鞯淖雍⒆訒r；
move過渡：在刪除定位器中的子項時，或?qū)⒆禹椄鼡Q父對象從定位器移除時；
populate過渡：定位器第一次創(chuàng)建時，只會運行一次。
此外，將項目的透明度設(shè)置為0時，會使用move過渡隱藏項目；當(dāng)項目的透明度設(shè)為非0時，使用add過渡顯示項目，定位器過渡只會影響項目的位置（x,y）。

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 112; height: 112
        anchors.centerIn: parent
        color: "#303030"

        Grid {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            columns: 2
            spacing: 6

            Rectangle { id:aa6666; color: "#aa6666"; width: 50; height: 50 }
            Rectangle { color: "#aaaa66"; width: 50; height: 50 }
            Rectangle { color: "#9999aa"; width: 50; height: 50 }
            Rectangle { color: "#6666aa"; width: 50; height: 50 }


            move: Transition {
                NumberAnimation{
                    properties: "x,y"
                    duration: 2000
                }

            }
            focus:true
            Keys.onSpacePressed: aa6666.visible = ! aa6666.visible
        }
    }
}

當(dāng)按下空格鍵時，矩形的visible值會改變，矩形會使用move過渡進(jìn)行移動
初始化：

按下：

結(jié)果：

2.6. Repeater

Repeater類型用來創(chuàng)建大量重復(fù)或相似的項目。Repeater包含一個model和一個delegate屬性。
delegate屬性用來將model中的每個項進(jìn)行可視化顯示，Repeater通常會用于定位器中進(jìn)行布局。

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Grid{
        columns: 4
        spacing: 20
        Repeater{
            model: 12
            Rectangle {
                width: 50; height: 50
                color: "#aaaa66"
            }
        }
    }
}

設(shè)置model為12，列是4列，會自動計算為3行，可以用count屬性獲取項目數(shù)量，該屬性為只讀。

2.7. Positioner

Column、Row、Grid、Flow這四個定位器都會附加一個Positioner類型的對象作為頂層子項，Positioner可以提供子項的索引等信息。
如下代碼所示：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Grid{
        columns: 4
        spacing: 20
        Repeater{
            model: 12
            Rectangle {
                width: 50; height: 50
                color: Positioner.isLastItem ?"red" : "#aaaa66"
            }
        }
    }
}

創(chuàng)建12個子項，當(dāng)是最后一個子項時，設(shè)置為red，其他為aaaa66

#3. 錨anchors布局
除了更傳統(tǒng)的Grid、Row和Column之外，Qt Quick還提供了一種使用錨的概念來布局項目的方法。每個項目都有7條不可見的“錨線”:左、水平中心、右、頂、垂直中心、基線和底。

基線對應(yīng)于文本所在的想象線。對于沒有文本的項目，它與top相同。
Qt快速錨定系統(tǒng)允許定義不同項目的錨線之間的關(guān)系。例如，可以這樣寫:

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; ... }

rect2的左邊緣綁定到rect1的右邊緣，如下:

或者

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

通過指定多個水平或垂直錨點，可以控制項的大小。下面，rect2錨定在rect1的右側(cè)和rect3的左側(cè)。如果其中一個藍(lán)色矩形被移動，rect2將根據(jù)需要拉伸和收縮:

 Rectangle { id: rect1; x: 0; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
 Rectangle { id: rect3; x: 150; ... }

錨定系統(tǒng)還允許為一個項目的錨指定邊距和偏移量。邊距指定要留給項目錨點外部的空白量，而偏移量允許使用中心錨線來操縱定位。一個項目可以通過leftMargin、rightMargin、topMargin和bottomMargin分別指定錨邊距，或者使用錨。為所有四條邊指定相同的邊距值。錨點偏移量由horizontalCenterOffset, verticalCenterOffset和baselineOffset指定。

如：

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

4. 布局管理器

Qt Quick布局管理器與定位器不同，布局管理器繼承于Item,因此可以嵌套。Qt Quick 布局管理器與傳統(tǒng)Qt Widgets 應(yīng)用中的布局管理器很相似。
使用：

 import QtQuick.Layouts

4.1 特性

布局管理器有一些關(guān)鍵特性。這些特性使得開發(fā)者可以更靈活地控制組件（例如按鈕、標(biāo)簽等UI元素）在界面上的排列和尺寸。

1. 對齊方式：通過Layout.alignment屬性，開發(fā)者可以指定組件的對齊方式。這決定了組件在網(wǎng)格中的位置。
2. 可調(diào)整大小：Layout.fillWidth和Layout.fillHeight屬性允許開發(fā)者設(shè)置組件的尺寸可以隨著容器尺寸的變化而變化，以填充整個行或列。
3. 尺寸約束：Layout.minimumWidth、Layout.preferredWidth和Layout.maximumWidth屬性允許開發(fā)者設(shè)置組件的最小、首選和最大寬度。這些屬性可以用于確保組件不會太小或太大。同樣，對于高度，可以將“Width”替換為“Height”。
4. 間距：spacing、rowSpacing或columnSpacing屬性允許開發(fā)者設(shè)置組件之間的間距，行與行之間的間距，以及列與列之間的間距。
5. 網(wǎng)格坐標(biāo)：通過Layout.row和Layout.column屬性，開發(fā)者可以指定組件所在的網(wǎng)格行和列。
6. 自動網(wǎng)格坐標(biāo)：結(jié)合使用flow, rows, 和 columns屬性，GridLayout可以自動確定組件的行和列位置。
7. 跨行或跨列：通過Layout.rowSpan和Layout.columnSpan屬性，開發(fā)者可以指定組件跨越的行數(shù)或列數(shù)。這使得組件可以在網(wǎng)格中跨越多個行或列。

4.2 大小

通過布局管理器調(diào)整大小，需要指定最小寬高，最佳寬高，最大寬高，如下：

import QtQuick
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


        RowLayout {
            anchors.fill: parent
            spacing: 6
            Rectangle {
                color: 'blue'
                Layout.preferredWidth: 100
                Layout.preferredHeight: 150
            }
            Rectangle {
                color: "plum"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
}

4.3 stackLayout

StackLayout?？丶梢怨芾矶鄠€項目，但只能顯示一個，如下：

import QtQuick
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    StackLayout {
        id: layout
        anchors.fill: parent
        currentIndex: 1
        Rectangle {
            color: 'teal'
            implicitWidth: 200
            implicitHeight: 200
        }
        Rectangle {
            color: 'plum'
            implicitWidth: 300
            implicitHeight: 200
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            if(layout.currentIndex === 1){
                layout.currentIndex = 0;
            }else{
                layout.currentIndex = 1;
            }
        }
    }
}

當(dāng)點擊屏幕時，來回切換視圖

5. 布局鏡像

布局鏡像屬性用來在水平方向上鏡像項目的錨布局、定位器和視圖等。
LayoutMirroring.enabled: true：默認(rèn)鏡像只影響項目本身；
LayoutMirroring.childrenInherit: true：該項目下的所有子項目都會啟用鏡像
如下：將Rectangle從右往左顯示

import QtQuick

Rectangle {
    width: 640
    height: 480
    visible: true

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true


    Row{
        anchors{
            left:parent.left;margins: 5
        }
        y:5; spacing: 5; padding: 5

        Repeater{
            model: 5
            Rectangle{
                color:"red"
                opacity: (5-index)/5
                width: 50;height: 50

                Text {
                    text: index +1
                    anchors.centerIn: parent
                    font{
                        bold: true
                    }
                }
            }
        }
    }
}

文章來源地址http://www.zghlxwxcb.cn/news/detail-822604.html

到了這里，關(guān)于【Qt之Quick模塊】8. Quick基礎(chǔ)、布局管理、布局管理器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！