qml 布局管理:anchors Row Column Grid Flow RowLayout ColumnLayout GridLayout StackLayout_anchors.fill:parent

作者：凡人多烦事01 | 2024-02-20 00:10:55

踩

anchors.fill:parent

锚布局anchors

锚点锚线：left, horizontalCenter, right, top, verticalCenter, baseline, bottom

baseline的作用和top一致

锚定方式：
anchors.fill：使一个元素填充到另一个元素，即同时指定上下左右四个锚点
anchors.centerIn：将一个元素放到另一个元素中心，即指定了水平中心和垂直中心
四个边界的边距
anchors.margins：同时指定四个边界的边距
leftMargin, rightMargin, topMargin和bottomMargin：设置单独一边的边距
设置部件的偏移
horizontalCenterOffset：水平中心的偏移
verticalCenterOffset：垂直中心的偏移
baselineOffset：基线的偏移

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

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

    Rectangle {
        anchors.fill: parent    //填充到整个窗口
        anchors.margins: 20 //边距，与界面边界到间隙
        color: "blue"
        radius: 20

        Text {
            id: text
            anchors.centerIn: parent    //锚定方式：界面到中心
            text: qsTr("Welcome To My World！")
            font.pointSize: 30
            color: "orange"
            anchors.verticalCenterOffset: -50   //垂直中心的偏移负数表示往上偏移
        }

        Button{
            id:button1
            anchors.top: text.bottom    //button到上边界就是text到底部
            anchors.topMargin: 70   //与text到间距
            text: "进入"
            font.pixelSize: 20
            anchors.horizontalCenter: text.horizontalCenter //以text到垂直中心为中心
            anchors.horizontalCenterOffset: -150    //向左偏移150


            background: Rectangle {
                  color: "orange"
                  radius: 15
                  border.color: "black"
                 }
        }

        Button{
            id:button2
            anchors.top: text.bottom
            anchors.topMargin: 70
            text: "退出"
            font.pixelSize: 20
            anchors.left: button1.right
            anchors.leftMargin: 250


            background: Rectangle {
                  color: "orange"
                  radius: 15
                  border.color: "black"
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

定位器

一种容器，很方便把众多控件组合在一起
无法根据界面尺寸自动改变定位器管理的控件大小

Row
水平放置管理的控件。layoutDirection属性设置排列的方向；spacing指定管理的组件之间的间隔

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Row{
        anchors.centerIn: parent
        spacing: 10

        Rectangle{
            width: 100
            height: 100
            color: "blue"
        }
        Rectangle{
            width: 100
            height: 100
            color: "orange"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Column
竖直放置管理的控件，属性和使用方法和Row一样

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Column{
        anchors.centerIn: parent
        spacing: 10

        Rectangle{
            width: 100
            height: 100
            color: "blue"
        }
        Rectangle{
            width: 100
            height: 100
            color: "orange"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Grid
将所有子项目放到一个包括足够多单元格的网格中，会从上到下，从左到右的把其管理的元素放到单元格中
- 属性
  rows和Columns：属性设置表格的行数和列数，如果不设置的话默认是只有四列，行数则会根据实际的元素数量自动的进行计算。
  rowSpacing 和 columnSpacing：指定行、列间距
  flow：描述表格的流模式，默认模式为Grid.LeftToRight，表示按行放置，一行满了再放下一行。
  Grid.TopToBottom表示按列放置
  horizontalItemAlignment 和 verticalItemAlignment：指定单元格对其方式

在这里插入图片描述

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Grid{
            anchors.centerIn: parent
            rows: 2
            rowSpacing: 10
            columns: 2
            columnSpacing: 10

            Rectangle{
                width: 100
                height: 100
                color: "blue"
            }
            Rectangle{
                width: 100
                height: 100
                color: "orange"
            }
            Rectangle{
                width: 100
                height: 100
                color: "green"
            }
            Rectangle{
                width: 100
                height: 100
                color: "purple"
            }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Flow
与Grid类似，不同之处是：没有明确的行、列数，Flow的子项目会在超出边界后会自动换行，每行的控件数量不一定是相同的
可以添加一个width属性来改变大小

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Flow{
            anchors.centerIn: parent
            spacing: 10
            width: 400

            Rectangle{
                width: 100
                height: 100
                color: "blue"
            }
            Rectangle{
                width: 100
                height: 100
                color: "orange"
            }
            Rectangle{
                width: 100
                height: 100
                color: "green"
            }
            Rectangle{
                width: 100
                height: 100
                color: "purple"
            }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

布局管理器

Qt5.1开始
需要导入模块
import QtQuick.Layouts 1.3

RowLayout
在水平方向上布局，属性如下：
Layout.minimumWidth：设置最小宽度
Layout.minimumHeight：设置最小高度
Layout.preferredWidth：设置建议的宽度
Layout.preferredHeight：设置建议的高度
Layout.maximumWidth：设置最大宽度
Layout.maximumHeight：设置最大高度
Layout.fillWidth：设置填充宽度，当界面被拉伸出现更多空间时，该控件的宽度会自动增加来填充这些空间
Layout.fillHeight：设置填充高度
Layout.alignment：设置对其方式

在这里插入图片描述

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    RowLayout{
        anchors.fill: parent
        spacing: 20


        Rectangle{
            Layout.alignment: Qt.AlignTop   //对齐方式 默认居中对齐
            color: "orange"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }

        Rectangle{
            Layout.alignment: Qt.AlignTop
            color: "blue"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }

        Rectangle{
            Layout.alignment: Qt.AlignBottom
            color: "green"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }

        Rectangle{
            Layout.alignment: Qt.AlignBottom
            color: "purple"
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

ColumnLayout
垂直布局管理器与RowLayout用法类似，应用例如一列选项。比groupbox更加灵活

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    ColumnLayout{
            anchors.centerIn: parent
            spacing: 20

            Text{
                text: "请选择喜欢的科目"
                font.pointSize: 20
                color: "purple"
                font.bold: true
                Layout.leftMargin: 30
            }

            CheckBox{
                text: "语文"
                Layout.leftMargin: 30
                font.pixelSize: 15
            }
            CheckBox{
                text: "数学"
                Layout.leftMargin: 30
                font.pixelSize: 15
            }
            CheckBox{
                text: "英语"
                Layout.leftMargin: 30
                font.pixelSize: 15
            }
            CheckBox{
                text: "物理"
                Layout.leftMargin: 30
                font.pixelSize: 15
            }
            CheckBox{
                text: "计算机"
                Layout.leftMargin: 30
                font.pixelSize: 15
            }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

GridLayout
和上面的Grid一样，新增了行列和sapcing的配置。应用例如登陆界面

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    GridLayout{
            anchors.centerIn: parent
            columns: 2
            rows: 3
            columnSpacing: 20
            rowSpacing: 20
            Layout.rowSpan: 20

            //第一行
            Label{
                text:"用户名"
                font.pixelSize: 20

            }
            Rectangle{
                 id:rect1
                 border.color: "black"
                 width: 200
                 height: 30

                 TextEdit{
                     anchors.fill: rect1
                     font.pixelSize: 20
                 }
            }

            //第二行
            Label{
                text:"密码"
                font.pixelSize: 20

            }
            Rectangle{
                 id:rect2
                 border.color: "black"
                 width: 200
                 height: 30

                 TextEdit{
                     anchors.fill: rect2
                     font.pixelSize: 20
                 }
            }

            //第三行
            Button{
                text: "登录"
                font.pixelSize: 20
                Layout.leftMargin: -30
                Layout.topMargin: 50
            }

            Button{
                text: "退出"
                font.pixelSize: 20
                Layout.leftMargin: 140
                Layout.topMargin: 50
            }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

StackLayout
提供了一个一次只能显示一个项目堆栈。只包含两个特有属性，count用来获取子项目的数量，currentIndex用来设置当前显示项目的索引。放在StackLayout中的子项目默认设置为Layout.fillWidth和 Layout.fillHeight ，也就是说默认会填充整个布局区域

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    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: {
                    layout.currentIndex === 1 ?
                                layout.currentIndex = 0
                              : layout.currentIndex = 1
                }
            }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/117442