QML中常见布局方法

目录

  • 引言
  • 常见方法
    • 锚定(anchors)
    • 定位器
      • Row、Column
      • Grid
      • Flow
    • 布局管理器
      • RowLayout、ColumnLayout
      • GridLayout
      • StackLayout
  • 总结

引言

UI界面由诸多元素构成,如Label、Button、Input等等,各种元素需要按照一定规律进行排布才能提高界面的可读性、美观度,需要调整元素的绝对坐标,也就是x、y,使得界面上的元素保持一定的间距,通过间距表达元素之间的关联性或者是区别。

排布策略多种多样,诸如行排列、列排列、栅格排列等等,将元素排布的策略抽象出来,也就是我们所说的布局。Qt Quick中提供了多种布局方法,本文旨在展示不同的布局方法以及探讨其适合的使用场景。

常见方法

锚定(anchors)

在这里插入图片描述

锚定是Qt Quick中较为特殊的布局方式,通过设置Item的anchors属性去调整元素的水平、垂直位置,如上图所示比较重要的基准线AnchorLine有left、righit、top、bottom以及horizontalCenter、verticalCenter,还有一条baseline只针对Text元素不常用,类似文字下划线的位置。示例代码如下:

Rectangle {anchors.centerIn: parentwidth: 300height: 100color: Qt.rgba(247 / 255, 220 / 255, 111 / 255)Text {anchors.left: parent.leftanchors.bottom: parent.toptext: "To Be Continue"font.family: "Microsoft YaHei"}
}

需要注意的是,fill、centerIn的锚定对象不再是AnchorLine,而是Item,与上述的属性互斥。

定位器

anchors对于单个元素的布局非常灵活、适应性很高,但是对于多个元素的成组的布局而言,代码可读性不高且可拓展性较差。下面将以4个Rectangle的水平排列为例子,对比使用anchors和定位器的实现方案。

在这里插入图片描述
anchors实现代码如下:

Rectangle {id: rect1width: 200height: 100color: "gold"
}Rectangle {id: rect2anchors.left: rect1.rightwidth: 100height: 50color: "lightseagreen"
}Rectangle {id: rect3anchors.left: rect2.rightwidth: 80height: 150color: "lightcoral"
}Rectangle {anchors.left: rect3.rightwidth: 100height: 120color: "lightskyblue"
}

定位器实现代码如下:

Row {anchors.fill: parentRectangle {width: 200height: 100color: "gold"}Rectangle {width: 100height: 50color: "lightseagreen"}Rectangle {width: 80height: 150color: "lightcoral"}Rectangle {width: 100height: 120color: "lightskyblue"}
}

可以看到使用anchors的实现方式,元素之间需要依次锚定,若需要在水平布局后继续追加,则需要延续这个规则,若需要调换两个元素的位置,需要调整自身的锚定和与之相关的元素的锚定,如rect2需要调整只末尾,在调整自身的anchors.left之外,还需要调整rect3的anchors.left,在界面元素较多的情况下很容易出现遗漏且很难排查。

而使用Row定位器的实现方式,Row会调整自身的所有子元素,将它们按照水平布局进行排布,子元素内部只需要考虑自身的宽高,相互之间并没有直接耦合关系,插入和调整顺序只需要整个代码段进行调节,后期对于间距的调整也可以通过定位器的spacing属性去调节。

Row、Column

Row和Column为行定位器和列定位器,顾名思义就是水平排布以及垂直排布,前面比较中有展示,此处不再赘述。

Grid

Grid为栅格定位器,一般用在元素较多的表单布局中,示例代码如下:

Grid {anchors.fill: parentcolumns: 3spacing: 5Rectangle {width: 100height: 100color: "gold"}Rectangle {width: 100height: 100color: "lightseagreen"}Rectangle {width: 100height: 100color: "lightcoral"}Rectangle {width: 100height: 100color: "lightskyblue"}
}

在这里插入图片描述

Flow

Flow为流定位器,功能与Grid类似,用于元素较多的布局,但是可以动态调整列的数量。可以看到Grid示例中固定了列数为3列,而其右侧还有空间并未被填满,Flow则为解决这个问题,示例代码如下:

Flow {anchors.fill: parentspacing: 5Rectangle {width: 100height: 100color: "gold"}Rectangle {width: 100height: 100color: "lightseagreen"}Rectangle {width: 100height: 100color: "lightcoral"}Rectangle {width: 100height: 100color: "lightskyblue"}
}

在这里插入图片描述

布局管理器

上述两种布局方式锚定和定位器都只针对元素的坐标,除了anchors.fill之外,都没有对元素的宽高进行调整,实际很多情况下是希望元素能够铺满整个窗口的,也就是元素的宽高能够跟随窗口宽度的变化而变化的。而布局管理器则是为了处理这种情况而出现的,示例代码如下:

RowLayout {anchors.fill: parentspacing: 5Rectangle {Layout.preferredWidth: 100Layout.fillHeight: truecolor: "gold"}Rectangle {Layout.fillWidth: trueLayout.fillHeight: truecolor: "lightseagreen"}Rectangle {Layout.preferredWidth: 100Layout.fillHeight: truecolor: "lightcoral"}
}

在这里插入图片描述

可以看到,左右两个元素设置了固定的宽度Layout.preferredWidth为100,而中间的元素设置Layout.fillWidth填充宽度,在窗口调整时改变的是中间的元素而两侧不变。

布局管理器实现方式与定位器类似,都是管理子元素的位置信息,在使用时需要注意,原本的width、height将不再生效,取而代之的是附加属性Layout.preferredWidth、Layout.preferredHeight或是隐式宽高implicitWidth、implicitHeight,推荐使用附加属性。

Layout.preferredWidth : real
This property holds the preferred width of an item in a layout. If the preferred width is -1 it will be ignored, and the layout will use implicitWidth instead. The default is -1.

在实际使用时还有一个小技巧,可以使用空的Item元素设置Layout.fillWidth: true或Layout.fillHeight: true作为水平布局和垂直布局的弹簧使用,类似QBoxLayout::addStretch()去使用。

RowLayout、ColumnLayout

RowLayout、ColumnLayout为行布局和列布局,用法与Row、Column类似,附加属性Layout有很多参数可以调节,如fillWidth、maximumWidth、minimumWidth、margins等等。

GridLayout

GridLayout为栅格布局,用法与Grid类似,主要是通过附加属性Layout.row、Layout.column调整行号、列号,以此完成特殊的表单布局。

StackLayout

StackLayout为栈布局,主要用于多页签切换使用,示例代码如下:

StackLayout {id: stackLayoutanchors.fill: parentRectangle {color: "gold"}Rectangle {color: "lightseagreen"}Rectangle {color: "lightcoral"}Rectangle {color: "lightskyblue"}
}Button {text: "Swich"font.family: "Microsoft YaHei"onClicked: {stackLayout.currentIndex = (stackLayout.currentIndex + 1) % stackLayout.count}
}

在这里插入图片描述

总结

对于单个相对独立的元素而言,推荐使用anchors。对于多个元素而言,布局定位器的功能更为强大,考虑到后续的可拓展性,多数情况下布局管理器比定位器更好,推荐使用布局管理器,根据开发需要可以酌情使用定位器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/209068.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring MVC学习随笔-控制器(Controller)开发详解:控制器跳转与作用域(二)视图模板、静态资源访问

学习视频:孙哥说SpringMVC:结合Thymeleaf,重塑你的MVC世界!|前所未有的Web开发探索之旅 衔接上文Spring MVC学习随笔-控制器(Controller)开发详解:控制器跳转与作用域(一) SpingMVC中…

创建JDK8版本的SpringBoot项目的方法

目录 一.通过阿里云下载 二.通过IDEA创建 1.下载安装JDK17 2.创建SpringBoot 3.X的项目 3.把JDK17改成JDK8 截止到2023.11.24,SpringBoot不再支持3.0X之前的版本,3.0X之后的版本所对应的JDK版本为JDK17,下面介绍如何在idea上继续使用JDK…

python动态圣诞下雪图

运行图片 代码 import pygame import random# 初始化Pygame pygame.init()# 创建窗口 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(Christmas Tree)# 定义颜色 GREEN (34, 139, 34) RED (255, 0, 0) WHITE (255…

彻底删除VsCode配置和安装过的插件与缓存

前言 当你准备对 Visual Studio Code(VSCode)进行重新安装时,可能遇到一个常见问题:重新安装后,新的安装似乎仍然保留了旧的配置信息,这可能会导致一些麻烦。这种情况通常是由于卸载不彻底所致&#xff0c…

视图层与模板层

视图层 1 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应。响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是…

android studio安装SDK时无法勾选

这两天帮助学妹安装android studio安装SDK时无法勾选,记录一下最终解决办法。头大。 核心 360 问题 网上所有方法都尝试了包括挂梯子,改hosts,盘符权限等等。 最终解决下载360 使用这两个,DNS注意要用8.8.8.8的 成功解决

C语言——指针(三)

📝前言: 上篇文章C语言——指针(二)中对:指针的运算和指针变量类型对指针使用的影响开展了进一步的探讨,这篇文章我们继续学习一下指针与一维数组之间的关系: 1,对数组名的理解 2&am…

Go语言 值传递

官方说法,Go中只有值传递,没有引用传递 而Go语言中的一些让你觉得它是引用传递的原因,是因为Go语言有值类型和引用类型,但是它们都是值传递。 值类型 有int、float、bool、string、array、sturct等 引用类型有slice&#xff0c…

Python笔记1.2(with open() as file和open()、logging、os、shutil、glob、decode和encode)

Python笔记1.1(字符串日期转换、argparse、sys、overwrite、eval、json.dumpsloads、os.system(cmd)、zfill、endswith、深浅拷贝) Python笔记2(函数参数、面向对象、装饰器、高级函数、捕获异常、dir) Python笔记1.2 13、with …

PyLMKit(3):基于角色扮演的应用案例

角色扮演应用案例RolePlay 0.项目信息 日期: 2023-12-2作者:小知课题: 通过设置角色模板并结合在线搜索、记忆和知识库功能,实现典型的对话应用功能。这个功能是大模型应用的基础功能,在后续其它RAG等功能中都会用到这个功能。功…

Linux的基本指令(3)

目录 制作小文件&查看 nano指令 cat指令 tac指令 制作大文件&查看 一切皆文件 echo指令 > 输出重定向 以写"w"的形式打开文件 以追加"a"的形式打开文件 cat指令 < 输入重定向 创建big.txt more指令 less指令&#xff08;推…

Docker—更新应用程序

在本部分中&#xff0c;你将更新应用程序和映像。您还将了解如何停止和移除容器。 一、更新源代码 在以下步骤中&#xff0c;当您没有任何待办事项列表项时&#xff0c;您将把“空文本”更改为“您还没有待办事项&#xff01;在上面添加一个&#xff01;” 1、在src/static/…

HTML5 的全局属性 hidden 和 display:none 的关系

目录 1&#xff0c;hidden 和 display:none 的关系2&#xff0c;其他隐藏元素的方式2.1&#xff0c;语意上的隐藏2.2&#xff0c;视觉上的隐藏 1&#xff0c;hidden 和 display:none 的关系 hidden - MDN 参考 一句话总结&#xff1a;hidden 是HTML5 新增的全局布尔属性&…

数据挖掘之时间序列分析

一、 概念 时间序列&#xff08;Time Series&#xff09; 时间序列是指同一统计指标的数值按其发生的时间先后顺序排列而成的数列&#xff08;是均匀时间间隔上的观测值序列&#xff09;。 时间序列分析的主要目的是根据已有的历史数据对未来进行预测。 时间序列分析主要包…

Java数据结构之《构造哈夫曼树》题目

一、前言&#xff1a; 这是怀化学院的&#xff1a;Java数据结构中的一道难度中等(偏难理解)的一道编程题(此方法为博主自己研究&#xff0c;问题基本解决&#xff0c;若有bug欢迎下方评论提出意见&#xff0c;我会第一时间改进代码&#xff0c;谢谢&#xff01;) 后面其他编程题…

unity学习笔记17

一、动画组件 Animation Animation组件是一种更传统的动画系统&#xff0c;它使用关键帧动画。你可以通过手动录制物体在时间轴上的变换来创建动画。 一些重要的属性&#xff1a; 1. 动画&#xff08;Animation&#xff09;&#xff1a; 类型&#xff1a; Animation组件允许…

七、Lua字符串

文章目录 一、字符串&#xff08;一&#xff09;单引号间的一串字符&#xff08;二&#xff09;local str "Hello, "&#xff08;三&#xff09;[[ 与 ]] 间的一串字符&#xff08;四&#xff09;例子 二、字符串长度计算&#xff08;一&#xff09;string.len&…

2023年第十二届数学建模国际赛小美赛B题工业表面缺陷检测求解分析

2023年第十二届数学建模国际赛小美赛 B题 工业表面缺陷检测 原题再现&#xff1a; 金属或塑料制品的表面缺陷不仅影响产品的外观&#xff0c;还可能对产品的性能或耐久性造成严重损害。自动表面异常检测已经成为一个有趣而有前景的研究领域&#xff0c;对视觉检测的应用领域有…

TimiGP细胞互作算法

介绍&#xff1a; 通过推断细胞间相互作用和免疫细胞预后价值来研究时间的计算方法。我们的方法将存活统计数据与批量转录组学图谱相结合&#xff0c;以构建免疫细胞-细胞相互作用网络&#xff0c;其中边缘&#xff08;例如&#xff0c;X → Y&#xff09;表明高 X/Y 比值与良…

数据结构之堆排序以及Top-k问题详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力 目录 1.前言 2.堆排序 2.1降序排序 2.2时间复杂…