本篇文章是对来自🤝BiliBili-清晨与猫鱼的QML教程的学习笔记，原视频链接👇
https://www.bilibili.com/video/BV1Ay4y1W7xd?spm_id_from=..search-card.all.click&vd_source=4079f59f2068471b4d379822052e0270

QML的布局

　　元素是以其父对象的左上角为基点,分别向左和向下进行延伸,可使用 x: 及 y: 进行位置的定义
　　Z: 是对堆叠顺序进行定义,数字越大越靠顶部

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
Window {
    width: 300
    height: 300
    visible: true
    title: qsTr("Hello World")

    Rectangle {             //定义一个矩形
        id: rect0           //定义ID
        x: 50               //定义x位置,相对于Window
        y: 30               //定义x位置,相对于Window
        width:100           //定义宽度
        height: 100         //定义高度
        border.width: 2     //定义边框宽度

        Rectangle{          //定义一个矩形
            id:rect1        //定义ID
            x: 0            //定义x位置,相对于rect0
            y: 0            //定义y位置,相对于rect0
            z: 1            //定义堆叠顺序
            width: 40
            height: 40
            color: "red"    //定义颜色
                 }
        Rectangle{          //定义一个矩形
            id:rect2        //定义ID
            x: 20           //定义x位置,相对于rect0
            y: 20           //定义x位置,相对于rect0
            z: 0            //定义堆叠顺序
            width: 40
            height: 40
            color: "green"  //定义颜色
                }
             }
}

QML的布局

动态表达式绑定

　　当B对象属性调用了A对象的属性，那么当A的属性变化时，B的属性会自动随之变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Rectangle{
    id:rect1
    x: 0
    y: 0
    width: 40
    height: 40
    color: "red"
        }
Rectangle{
    id:rect2
    x: rect1.x              //采用rect1的x值
    y: rect1.y+rect1.height //紧贴rect1的下部
    width: 40
    height: 40
    color: "green"
}
//鼠标区域
MouseArea{
    anchors.fill: rect1 //鼠标锚点
    drag.target: rect1  //rect1跟随鼠标进行更新
}

　　当鼠标移动rect1时,rect2会自动跟随rect1进行移动
动态表达式绑定

锚点布局

　　可视组件必须有宽度 高度 x y的值
　　如不设定x y的值,默认为0

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
Rectangle{          //没设定x,y和锚点,默认在0,0位置
    id:rect1
    width: 40
    height: 70
    color: "red"
        }
Rectangle{
    id:rect2
    width: 60
    height: 40
    color: "green"
    //设置rect2的垂直中心锚点与rect1的垂直中心锚点对齐
    anchors.verticalCenter: rect1.verticalCenter
    anchors.left: rect1.right   //设置rect2的左边锚点与rect1的右边锚点对齐
    anchors.leftMargin: 5       //设置rect2的左外边距5px
        }

Item {      //不可视元素,不设置默认也会自带一个
    anchors.fill: parent //设置填充整个窗口

    Rectangle{
        id: rect3
        width: 30
        height: 30
        color: "blue"
        anchors.right: parent.right//设置rect3的右边锚点与窗口右边锚点对齐
        anchors.top: parent.top//设置rect3的顶部锚点与窗口顶部锚点对齐
    }
}

锚点布局

使用锚点代替宽、高设置

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
Item {
      anchors.fill: parent

      Rectangle{          //没设定x,y和锚点,默认在0,0位置
          id:rect1
          width: parent.width/3
          height: parent.height
          color: "red"
             }
      Rectangle{
          id:rect2
          width: parent.width/3
          height: parent.height
          color: "green"
          anchors.left: rect1.right
                }
      Rectangle{
          id: rect3
          color: "blue"
          anchors.right: parent.right //设置rect3的右边锚点与窗口右边锚点对齐
          anchors.left: rect2.right   //设置rect3的顶部锚点与窗口顶部锚点对齐
          anchors.top: parent.top     //设置rect3的顶部锚点与rect2顶部锚点对齐
          anchors.bottom: parent.bottom//设置rect3的底部锚点与窗口底部锚点对齐

              }
    }

锚点代替宽高

行、列布局

　　

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
Item {
            anchors.fill: parent

            ColumnLayout{           //列布局
                id: layout1

                RadioButton{
                    checked: true
                    text: '火锅'
                }
                RadioButton{
                    text: '水饺'
                }
                RadioButton{
                    text: '混沌'
                }
            }
            RowLayout{              //行布局
                id: layout2
                anchors.left: layout1.right
                anchors.leftMargin: 30
                
                RadioButton{
                    checked: true
                    text: '火锅'
                }
                RadioButton{
                    text: '水饺'
                }
                RadioButton{
                    text: '混沌'
                }
            }
        }

行、列布局

FLOW流式布局

　　将元素按照顺序依次排列，默认从左向右，元素宽度超过FLOW宽度后，自动向下排列
　　可通过｀flow: Flow.TopToBottom｀改变为从上向下

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
Item {
        anchors.fill: parent
        id:root

        Flow {
            id:flow1
            anchors.left: parent.left
            anchors.right: parent.right

            Rectangle {
                id:rect1
                width:root.width/2
                height:100
                color: 'red'
            }
            Rectangle {
                id:rect2
                width:root.width/2
                height:100
                color: 'green'
            }
            Rectangle {
                id:rect3
                width:root.width/2
                height:100
                color: 'blue'
            }
        }
        Flow {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: flow1.bottom
            flow: Flow.TopToBottom
            
            Rectangle {
                id:rect4
                width:root.width/2
                height:100
                color: 'red'
            }
            Rectangle {
                id:rect5
                width:root.width/2
                height:100
                color: 'green'
            }
        }
    }

flow流式布局

网格布局

　　将元素按照网格方式排列,默认从左向右依次排列,超过设置列数后自动向下排列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Item {
        anchors.fill: parent
        id:root

        Grid {
            columns: 3      //设置3列
            spacing: 2      //设置每个元素之间的间距
            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 }
        }
    }

Grid网格布局