QML教程（六）布局-蒲公英云

一、手动布局

二、锚

三、定位器

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提供了一些定位器类型。放置在定位器中的物品会以某种方式自动定位;例如，“行”将项目定位为水平相邻（形成一行）。

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" } }
    }
}

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 }
    }
}

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 }
    }
}

LayoutMirroring 用于镜像布局行为的属性
Positioner 提供附加属性，这些属性包含有关项在定位器中存在的位置的详细信息

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" }
    }
}

四、布局

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 }
}

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
        }
    }
}

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
    }
}