QML 元素布局

一、概述

QML中有两套与布局有关的类库,一套叫做定位器,一套叫做布局。
定位器包括Row(行定位器)、Column(列定位器)、Grid(表格定位器)、Flow(流式定位器)。
布局管理器有RowLayout(行布局)、ColumnLayout(列布局)、GridLayoout(表格布局)。

二、定位器

定位器是一种容器元素,专门管理界面中的其他元素,与传统的QtWidget中的布局管理器类似。使用定位器,你可以很方便得把众多的元素组织在一起,形成非常规则的界面效果。注意,定位器不会改变元素的大小,即使用户调整界面,也不会干涉孩子的尺寸。

Row

沿着一行安置孩子们,当你需要在水平设置一系列Item时,可以使用行定位器。
示例代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Row{
            anchors.verticalCenter: parent.verticalCenter
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

由此可见,行定位器单单把元素组织在一起,并不会根据界面大小,自动调节孩子们的尺寸。
在这里插入图片描述

Column

Column和Row类似,不过是在垂直方向上安排它的子项。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Column{
            anchors.verticalCenter: parent.verticalCenter
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

在这里插入图片描述

Grid

Grid是在一个网格上放置它的子项。它会创建一个拥有多个单元格的网格,足够容纳所有的子项,Grid会从左到右,从上到下把Item一个个塞到单元格里,Item默认会被放到单元格左上角,即(0,0)的位置。

rows、columns来设置表格的行数和列数,默认是4列,行数自动计算。
rowSpacing、columnSpacing指定行列间距;

更多属性的设置可以查看Qt官方文档!

Flow

Flow和Grid类似,不同之处是,Flow没有显式的行数、列数,它会计算Item的尺寸,然后与自身的尺寸比较,按需折行。Flow的flow属性,默认取值是Flow.leftToRight,从左至右安排Item,直到Flow本身的宽度不能容乃新的子Item时,折行。当flow取Flow.ToptoBotton时,从上到下安排Item,直到Flow本身的高度不能容纳新的Item时,开始在下一列上安排Item.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 300
    height: 200
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        anchors.margins: 10
        color: "#EEEEEF"
        border.color: "blue"
        Flow{
            anchors.fill: parent
            anchors.margins: 10
            spacing: 6
            Button{
                text: "button1"
                width: 60
            }
            Button{
                text: "button2"
                width: 100
            }
            Button{
                text: "button3"
                width: 60
            }
            Button{
                text: "button3"
                width: 100
            }
        }
    }
}

在这里插入图片描述

三、布局管理器

QML 中的布局管理器和QWidget中国的相似,与定位器不同的是,布局管理器会自动调整子Item的尺寸来适应界面大小的变化。
使用布局管理器需要导入Layout模块
import QtQuick.Layouts 1.1

RowLayout

行布局可以看作只有一行的GridLayout,它与Row的行为类似,不同之处在于,RowLayout所管理的元素可以使用下列附加属性

ColumnLayout

列布局可以看作只有一列的GridLayout,它的行为与Column类似,不同之处在于,它所管理的元素可以有下列附加属性:

Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1,为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1,为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true
Layout.alignment:

GridLayout

GridLayout与QWidget中的QGridLayout功能类似,它在一个表格中安排它管理的Item,如果用户调整界面尺寸,GridLayout会自动调整Item的位置。
GridLayout管理的Item,可以使用下列附加属性:

Layout.row: 0 //行号
Layout.column: 0 //列号
Layout.rowSpan: 1 //所占行数
Layout.columnSpan: 1 //所占列数
Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1,为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1,为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true

四、其他布局方式

Qt Quick中的Item都有x、y、width、height属性,其实可以使用他们来定位Item,就是我们常用的绝对坐标布局。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值