QML 布局详解

1.简介

在QML中布局分为以下几种：绝对坐标、锚布局、定位器、布局管理器。

2.绝对坐标

设置x、y、width、height能够定位一个组件的位置，这种方法扩展性太差。

    Button{
        width: 50
        height: 50
        x: 10
        y:10
        background: Rectangle{
            color:"red"
        }
    }

3.锚布局

示例：实现一行按钮。

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    //做一行按钮
    Button{
        id:b1
        width: 50
        height: 50
        anchors.centerIn: parent    //在Window的中心
        background: Rectangle{
            color:"red"
        }
    }

    Button{
        id:b2
        width: 50
        height: 50
        anchors.left: b1.right      //b2放在b1的右边，左边距20
        anchors.top: b1.top
        anchors.leftMargin: 20
        background: Rectangle{
            color:"black"
        }
    }

    Button{
        id:b3
        width: 50
        height: 50
        anchors.right: b1.left      //b3放在b1的左边，右边距20
        anchors.top: b1.top
        anchors.rightMargin: 20
        background: Rectangle{
            color:"blue"
        }
    }

    Button{
        id:b4
        width: 25                //b4放在b1的中心
        height: 25
        anchors.horizontalCenter: b1.horizontalCenter
        anchors.verticalCenter: b1.verticalCenter
        background: Rectangle{
            color:"yellow"
        }
    }

}

3.定位器

Row和Column差不多

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    Rectangle{
        border.color: "black"
        border.width: 2
        width: 200
        height: 300
        Row {
            Repeater {
                model: 3
                Button {
                    width: 30
                    height: 40
                    background: Rectangle{
                        color:"yellow"
                    }
                    text:index
                }
            }
            spacing: 10 //设置间隔
            padding: 10 //设置内边距
        }
    }
}

Flow：流式布局

示例：Flow项自动将子Text项并排放置，当超出父控件边界时会自动换行。

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    Rectangle{
        border.color: "black"
        border.width: 2
        width: 200
        height: 300
        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：网格布局

可以控制绘制几行几列。

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    Rectangle{
        border.color: "black"
        border.width: 2
        width: 200
        height: 300
        Grid {
            columns: 3
            spacing: 2
            padding: 10
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "green"; width: 20; height: 50 }
            Rectangle { color: "blue"; width: 50; height: 20 }
            Rectangle { color: "cyan"; width: 50; height: 50 }
            Rectangle { color: "magenta"; width: 10; height: 10 }
        }
    }
}

4.布局管理器

有很多附加属性。

• Layout.minimumWidth：最小宽度
• Layout.minimumHeight：最小高度
• Layout.preferredWidth：首选宽度
• Layout.preferredHeight：首选高度
• Layout.maximumWidth：最大宽度
• Layout.maximumHeight：最大高度
• Layout.fillWidth：如果为true，尽可能变宽
• Layout.fillHeight：如果为true，尽可能变高
• Layout.alignment：对齐方式
• Layout.margins：外边距
• Layout.leftMargin：左外边距
• Layout.rightMargin：右外边距
• Layout.topMargin：上外边距
• Layout.bottomMargin：下外边距

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

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