QML教程（六）布局

ゝ一世哀愁。 2024-03-30 13:51 81阅读 0赞

**目录**

一、手动布局

二、锚

三、定位器

Column 将其子级放置在列中

Flow 并排放置其子项，必要时进行换行

Grid 将其子项定位在网格形成中

LayoutMirroring 用于镜像布局行为的属性

Positioner 提供附加属性，这些属性包含有关项在定位器中存在的位置的详细信息

Row 将其子项放置在一排中

四、布局

GridLayout

RowLayout

ColumnLayout

--------------------

### 一、手动布局 ###

通过设置项目的 x，y 属性，可以将项目放置在屏幕上的特定 x，y 坐标处。这将根据视觉坐标系规则设置其相对于父项左上角的位置。

结合对这些属性使用绑定而不是常量值，还可以通过将 x 和 y 坐标设置为适当的绑定来轻松实现相对定位。

import QtQuick
    
    Item {
        width: 100; height: 100
    
        Rectangle {
            // Manually positioned at 20,20
            x: 20
            y: 20
            width: 80
            height: 80
            color: "red"
        }
    }

### 二、锚 ###

该类型提供定位到其他项类型的能力。每个项目有七条锚线：左、右、垂直中心、顶部、底部、基线和水平中心。三条垂直锚点线可以锚定到另一个项目的三个垂直锚点线中的任何一条，四个水平锚点线可以锚定到另一个项目的水平锚点线。

import QtQuick
    
    Item {
        width: 200; height: 200
    
        Rectangle {
            // Anchored to 20px off the top right corner of the parent
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 20 // Sets all margins at once
    
            width: 80
            height: 80
            color: "orange"
        }
    
        Rectangle {
            // Anchored to 20px off the top center corner of the parent.
            // Notice the different group property syntax for 'anchors' compared to
            // the previous Rectangle. Both are valid.
            anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }
    
            width: 80
            height: 80
            color: "green"
        }
    }

### 三、定位器 ###

对于想要以常规模式定位一组类型的常见情况，Qt Quick提供了一些定位器类型。放置在定位器中的物品会以某种方式自动定位;例如，“行”将项目定位为水平相邻（形成一行）。

1.  #### Column 将其子级放置在列中 ####
    
        import QtQuick 2.0
        
        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: "Books" } }
                Rectangle { color: "gold"; radius: 10.0
                            width: 300; height: 50
                            Text { anchors.centerIn: parent
                                   font.pointSize: 24; text: "Music" } }
                Rectangle { color: "lightgreen"; radius: 10.0
                            width: 300; height: 50
                            Text { anchors.centerIn: parent
                                   font.pointSize: 24; text: "Movies" } }
            }
        }
2.  #### Flow 并排放置其子项，必要时进行换行 ####
    
        import QtQuick 2.0
        
        Rectangle {
            color: "lightblue"
            width: 300; height: 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 }
            }
        }
3.  #### Grid 将其子项定位在网格形成中 ####
    
        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 }
            }
        }
4.  #### LayoutMirroring 用于镜像布局行为的属性 ####
5.  #### Positioner 提供附加属性，这些属性包含有关项在定位器中存在的位置的详细信息 ####
6.  #### Row 将其子项放置在一排中 ####
    
        import QtQuick 2.0
        
        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" }
            }
        }

### 四、布局 ###

1.  #### GridLayout ####
    
        GridLayout {
            id: grid
            columns: 3
        
            Text { text: "Three"; font.bold: true; }
            Text { text: "words"; color: "red" }
            Text { text: "in"; font.underline: true }
            Text { text: "a"; font.pixelSize: 20 }
            Text { text: "row"; font.strikeout: true }
        }
2.  #### RowLayout ####
    
        RowLayout {
            id: layout
            anchors.fill: parent
            spacing: 6
            Rectangle {
                color: 'teal'
                Layout.fillWidth: true
                Layout.minimumWidth: 50
                Layout.preferredWidth: 100
                Layout.maximumWidth: 300
                Layout.minimumHeight: 150
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
            Rectangle {
                color: 'plum'
                Layout.fillWidth: true
                Layout.minimumWidth: 100
                Layout.preferredWidth: 200
                Layout.preferredHeight: 100
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }
3.  #### ColumnLayout ####
    
        ColumnLayout{
            spacing: 2
        
            Rectangle {
                Layout.alignment: Qt.AlignCenter
                color: "red"
                Layout.preferredWidth: 40
                Layout.preferredHeight: 40
            }
        
            Rectangle {
                Layout.alignment: Qt.AlignRight
                color: "green"
                Layout.preferredWidth: 40
                Layout.preferredHeight: 70
            }
        
            Rectangle {
                Layout.alignment: Qt.AlignBottom
                Layout.fillHeight: true
                color: "blue"
                Layout.preferredWidth: 70
                Layout.preferredHeight: 40
            }
        }