Qt Quick - GridLayout 网格布局
创始人
2024-06-02 23:10:22
0

GridLayout 理论总结

  • 一、概述
  • 二、依赖属性
  • 三、例子
    • 1. 不含跨行的
    • 2. 带跨行列的
    • 3. 从右到左

一、概述

GridLayout 是最常用的布局器,也叫网格布局器,如果网格布局被调整大小,布局中的所有 Item 将被重新排列。它类似于基于widget的QGridLayout。GridLayout元素的所有可见子元素都将属于该布局。如果你想要一个只有一行或一列的布局,可以使用RowLayout或ColumnLayout。这些提供了更方便的API,并提高了可读性。

默认情况下, Item 将根据 flow 属性进行排列。flow属性的默认值是GridLayout.LeftToRight,就是从左到右排列。

如果指定了columns属性,它将被视为布局可以拥有的列数的最大限制,在自动定位包装回下一行的开始之前。columns属性只在flow为GridLayout.LeftToRight时使用。rows 属性的工作方式类似,但 Item 是自动垂直定位的。只有当flow为GridLayout.TopToBottom时,才会使用rows属性。

您可以通过设置布局来指定您想要 Item 占用的单元格。行和布局。列的属性。您还可以通过设置布局来指定行跨度或列跨度。rowSpan或Layout。columnSpan属性。

其实网格布局就 要指定多少行列,由此来计算出网格数,我们还可以设置这个网格之间的距离,网格外部的距离之类的,就是设置东西,布局就是能缩放大小,不布局就可以通过 x, y , anchor 来布局也可以,只是不会随着窗口变化

二、依赖属性

这些的依赖属性是指 在这个布局器 里面的元素可以写在里面的属性些。就是这些宽高 要注意,
这里有一个注意事项:不要在布局中绑定 Item 的x、y、width或height属性,因为这将与布局的目标冲突,也可能导致绑定循环。布局引擎使用 width 和 height 属性来存储根据 minimum/preferred/maximum 计算出的 Item 的当前大小,并且在每次布局 Item 时都会被重写。使用Layout.preferredWidth 和 Layout.preferredHeight, 或者 implicitWidth and implicitHeight 指定元素的首选尺寸。

  • Layout.row
  • Layout.column
  • Layout.rowSpan
  • Layout.columnSpan
  • Layout.minimumWidth
  • Layout.minimumHeight
  • Layout.preferredWidth
  • Layout.preferredHeight
  • Layout.maximumWidth
  • Layout.maximumHeight
  • Layout.fillWidth
  • Layout.fillHeight
  • Layout.alignment
  • Layout.margins
  • Layout.leftMargin
  • Layout.rightMargin
  • Layout.topMargin
  • Layout.bottomMargin

三、例子

1. 不含跨行的

效果
在这里插入图片描述
代码

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: rootvisible: truewidth: 319height: 570title: qsTr("Hello World")GridLayout{rows: 3columns: 3anchors.fill: parentButton{text: "1"Layout.column: 0Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "2"Layout.column: 1Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "3"Layout.column: 2Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "4"Layout.column: 0Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "5"Layout.column: 1Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "6"Layout.column: 2Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "7"Layout.column: 0Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "8"Layout.column: 1Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "9"Layout.column: 2Layout.row: 2Layout.alignment: Qt.AlignHCenter}}
}

2. 带跨行列的

效果
在这里插入图片描述
代码

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: rootvisible: truewidth: 319height: 570title: qsTr("Hello World")GridLayout{id: mainlayoutrows: 3columns: 3anchors.fill: parentButton{id:slidertext: "1"Layout.column: 0Layout.row: 0Layout.rowSpan: 3Layout.preferredWidth: 80Layout.preferredHeight: mainlayout.heightLayout.alignment: Qt.AlignHCenter}Button{text: "2"Layout.column: 1Layout.row: 0Layout.columnSpan: 2Layout.preferredWidth: mainlayout.width-slider.widthLayout.preferredHeight: 80Layout.alignment: Qt.AlignTop}Button{text: "5"Layout.column: 1Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "6"Layout.column: 2Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "8"Layout.column: 1Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "9"Layout.column: 2Layout.row: 2Layout.alignment: Qt.AlignHCenter}}
}

3. 从右到左

在这里插入图片描述

代码

只需要加一点 layoutDirection: Qt.RightToLeft 就可以啦

...GridLayout{rows: 3columns: 3layoutDirection:  Qt.RightToLeft
....

上一篇:ffmpeg使用

下一篇:分布式锁学习笔记

相关内容

热门资讯

安卓13系统更新蓝牙,蓝牙功能... 你有没有发现,最近你的安卓手机好像变得不一样了?没错,就是那个神秘的安卓13系统更新,它悄悄地来到了...
安卓系统钉钉打开声音,安卓系统... 你有没有遇到过这种情况?手机里装了钉钉,可每次打开它,那声音就“嗖”地一下跳出来,吓你一跳。别急,今...
理想汽车操作系统安卓,基于安卓... 你有没有想过,一辆汽车,除了能带你去你想去的地方,还能像智能手机一样,给你带来智能化的体验呢?没错,...
安卓系统越狱还能升级吗,升级之... 你有没有想过,你的安卓手机越狱后,还能不能愉快地升级系统呢?这可是不少手机爱好者关心的大问题。今天,...
安卓系统蓝牙耳机拼多多,畅享无... 你有没有发现,最近蓝牙耳机在市场上可是火得一塌糊涂呢!尤其是安卓系统的用户,对于蓝牙耳机的要求那可是...
安卓变苹果系统桌面,桌面系统变... 你知道吗?最近有个大新闻在科技圈里炸开了锅,那就是安卓用户纷纷转向苹果系统桌面。这可不是闹着玩的,这...
鸿蒙系统怎么下安卓,鸿蒙系统下... 你有没有想过,你的手机里那个神秘的鸿蒙系统,竟然也能和安卓世界来一场亲密接触呢?没错,今天就要来揭秘...
手机安卓系统流程排行,便捷操作... 你有没有发现,现在手机的世界里,安卓系统就像是个大舞台,各种版本层出不穷,让人眼花缭乱。今天,就让我...
安卓系统左上角hd,左上角HD... 你有没有发现,每次打开安卓手机,左上角那个小小的HD标识总是默默地在那里,仿佛在诉说着什么?今天,就...
安卓系统软件文件,架构解析与功... 你有没有发现,手机里的安卓系统软件文件就像是一个神秘的宝库,里面藏着无数的宝藏?今天,就让我带你一起...
安卓系统输入法回车,探索安卓输... 你有没有发现,在使用安卓手机的时候,输入法回车键的奇妙之处?它就像是我们指尖的魔法师,轻轻一点,文字...
安卓修改系统时间的软件,轻松掌... 你有没有想过,有时候手机上的时间不对劲,是不是觉得生活节奏都被打乱了?别急,今天就来给你揭秘那些神奇...
安卓系统能改成鸿蒙吗,系统迁移... 你有没有想过,你的安卓手机能不能变成一个鸿蒙系统的“小清新”呢?这可不是天方夜谭哦,今天就来聊聊这个...
安卓机怎么从新装系统,从零开始... 亲爱的安卓手机用户们,你是否在某个瞬间突然觉得手机卡顿得像个老古董,急需给它来个“大变身”?别急,今...
安卓手机安装Linux双系统,... 你有没有想过给你的安卓手机来个变身大法?没错,就是安装Linux双系统!想象一边是流畅的安卓,一边是...
安卓系统关闭更新补丁,轻松提升... 亲爱的手机用户们,你们有没有发现,最近你的安卓手机好像有点儿“懒”了呢?更新补丁的速度明显慢了下来,...
麒麟os是不是安卓系统,揭秘与... 最近手机圈里可是热闹非凡呢!不少朋友都在问我:“麒麟OS是不是安卓系统?”这个问题可真是让人好奇,咱...
安卓系统卸载快应用,安卓系统轻... 你有没有发现,手机里的应用越来越多,有时候真的让人眼花缭乱呢?尤其是安卓系统里的那些“快应用”,虽然...
安卓14系统更新包,全新功能与... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓14系统更新包!这可不是一个小打小闹的更新,而是满...
oppo安卓11.1系统新功能... 你知道吗?最近OPPO手机又来了一次大升级,安卓11.1系统的新功能简直让人眼前一亮!今天,就让我带...