当前位置:   article > 正文

Qml学习——布局_qml gridlayout 动态布局

qml gridlayout 动态布局

最近在学习Qml,但对Qml的各种用法都不太熟悉,总是会搞忘,所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频:https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章:
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件


1 锚点布局

Qt Quick控件的基类Item提供了anchor(锚点),可以用来布局控件的位置。
下面是一个简单的锚点布局示例,将矩形块布局到窗口的右下角。

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        width: 50; height: 50; color: "blue";

        anchors.right: parent.right      //矩形的右锚定线对齐窗口的右锚定线
        anchors.bottom: parent.bottom	 //矩形的下锚定线对齐窗口的下锚定线
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述
在这个示例中,矩形的右锚定线和下锚定线分别被设置为了窗口的右锚定线和下锚定线,所以最终矩形出现在窗口的右下角。

anchors提供了以下属性。

属性名类型描述
anchors.alignWhenCenteredbool居中时是否对齐
anchors.baselineAnchorLine基准线,作用和anchors.top一样
anchors.baselineOffsetreal基准线偏移量
anchors.bottomAnchorLine下锚定线
anchors.bottomMarginreal下锚定线间距
anchors.centerInItem位于目标控件中心
anchors.fillItem填满目标控件
anchors.horizontalCenterAnchorLine水平方向的中心锚定线
anchors.horizontalCenterOffsetreal水平方向的中心锚定线偏移量
anchors.leftAnchorLine左锚定线
anchors.leftMarginreal左锚定线间距
anchors.marginsreal上下左右四根锚定线的间距
anchors.rightAnchorLine右锚定线
anchors.rightMarginreal右锚定线间距
anchors.topAnchorLine上锚定线
anchors.topMarginreal上锚定线间距
anchors.verticalCenterAnchorLine垂直方向的中心锚定线
anchors.verticalCenterOffsetreal垂直方向的中心锚定线偏移量

1.1 锚定线和间距

以anchors.top为例。
若没有设置anchors.topMargin或anchors.topMargin为0。
在这里插入图片描述
若设置了anchors.topMargin不为0。
在这里插入图片描述

1.2 示例

控件之间相对位置

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        id: r1
        width: 50; height: 50; color: "red";
        /* 以r2为基准布局 */
        anchors.right: r2.left
        anchors.top: r2.top
    }

    Rectangle {
        id: r2
        width: 50; height: 50; color: "blue";
		/* 布局到窗口中央 */
        anchors.centerIn: parent
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这里插入图片描述

设置间隙

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        width: 50; height: 50; color: "blue";

        /* 设置矩形位置在parent的右下角,间隙为10 */
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

填满窗口

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        color: "blue";
        anchors.fill: parent
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

混合使用

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        id: r1
        color: "blue";
        anchors.fill: parent
        anchors.topMargin: 50
        anchors.rightMargin: 50
    }
    Rectangle {
        id: r2
        color: "red";
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: r1.top
    }
    Rectangle {
        id: r3
        color: "green";
        anchors.top: r1.top
        anchors.left: r1.right
        anchors.right: parent.right
        anchors.bottom: parent.verticalCenter
    }
    Rectangle {
        id: r4
        color: "orange";
        anchors.top: parent.verticalCenter
        anchors.left: r1.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}
  • 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

请添加图片描述

2 Qt Quick Layouts布局

Qt Quick Layouts提供了以下几种布局方式。

名称描述
GridLayout提供一种在网格中动态排列项目的方法
ColumnLayout与GridLayout相同,但只有一列
RowLayout与GridLayout相同,但只有一行
StackLayout只会同时显示一个控件的控件堆栈

2.1 GridLayout(网格布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120
    GridLayout {
        id: grid
        columns: 2

        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这里插入图片描述

2.2 ColumnLayout(列布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120

    ColumnLayout {
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

2.3 RowLayout(行布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120

    RowLayout {
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

2.3 StackLayout(栈布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    visible: true; width: 200; height: 120

    StackLayout {
        id: stack
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }

    RowLayout {
        anchors.bottom: parent.bottom
        
        Button {
            text: '上一个'
            onClicked: stack.currentIndex > 0 ? stack.currentIndex-- : 0
        }
        
        Button {
            text: '下一个'
            onClicked: stack.currentIndex < 4 ? stack.currentIndex++ : 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
  • 30
  • 31

请添加图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/117519
推荐阅读
相关标签
  

闽ICP备14008679号