Qt Quick Layouts Overview

Qt快速布局概述

#【中秋征文】程序人生,中秋共享#

Qt快速布局是用于在用户界面中排列项目的项目。由于Qt快速布局还可以调整其项目的大小,因此它们非常适合可调整大小的用户界面。

开始

可以使用文件中的以下导入语句将 QML 类型导入到应用程序中。.qml

import QtQuick.Layouts 1.11

主要特点

一些主要功能是:

  • 可以使用属性指定项目数
  • 可以使用 和 属性指定。
  • 可以使用 、 和属性指定(“宽度”可以替换为“高度”,以指定与高度类似的约束)。
  • 可以使用 或 指定

除了上述功能外,还添加了以下功能:

  • 可以使用 和 属性指定。
  • 与 、 和 属性一起使用。
  • 可以使用 和 属性跨行或跨列指定。

简单的布局

Window {RowLayout {anchors.fill: parentspacing: 6Rectangle {color: 'azure'Layout.preferredWidth: 100Layout.preferredHeight: 150}Rectangle {color: "plum"Layout.fillWidth: trueLayout.fillHeight: true}}
}

由于使用布局的目的是在布局更改大小时重新排列其子项,因此应用程序应确保调整布局的大小。在上面的代码片段中,通过指定 .但是,也可以通过其他方式,例如直接指定和属性。在同一代码段中,矩形具有固定大小的像素,矩形将扩展以占用它分配的所有空间。anchors.fill: parentazure(100, 150)plum

注意: 布局负责其子几何图形。因此,不应指定 、 、 或任何其他可能影响这些属性的属性(如 )。否则就会有利益冲突,结果是不确定的。如果子项是布局,也是如此。因此,只有没有父布局的布局才能具有 。anchors.fill: parent

布局中的所有项目之间将有 6 个像素的间距:

spacing: 6

大小约束

由于可以通过其布局调整项目的大小,因此布局需要知道 或 设置为 的所有项目的大小。例如,以下内容将生成一个布局,其中两个并排放置且水平延伸的矩形。天蓝色矩形的大小可以从 50x150 调整为 300x150,梅花矩形的大小可以从 100x100 调整为 ∞x100。true

RowLayout {id: layoutanchors.fill: parentspacing: 6Rectangle {color: 'azure'Layout.fillWidth: trueLayout.minimumWidth: 50Layout.preferredWidth: 100Layout.maximumWidth: 300Layout.minimumHeight: 150Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}Rectangle {color: 'plum'Layout.fillWidth: trueLayout.minimumWidth: 100Layout.preferredWidth: 200Layout.preferredHeight: 100Text {anchors.centerIn: parenttext: parent.width + 'x' + parent.height}}
}

组合每个项的约束将为布局元素提供以下隐式约束:

最低首选最大
隐式约束(宽度)156306∞ (Number.POSITIVE_INFINITY)
隐式约束(高度)150150150

因此,布局不能小于 156,也不能高于或小于 150,而不会破坏其子项的任何约束。

指定首选大小

对于每个项目,有效的首选大小可能来自几个候选属性之一。为了确定有效的首选大小,它将按以下顺序查询这些候选属性,并使用具有有效宽度或高度的第一个候选属性。

候选属性描述
如果默认隐式大小未提供最佳排列,则应用程序应修改这些属性。
这些属性应该由每个项目提供,以提供有意义的理想大小,例如显示类型的所有内容所需的大小。隐式宽度或高度被解释为无效。0
如果上述属性都无效,则布局将采用 和 属性。

项目可以指定,而不必指定 。在这种情况下,有效首选高度将从 (或最终) 确定。

注意: 诉诸 or 属性仅作为最终回退提供。如果要覆盖首选大小,建议使用 或 。依赖 or 属性来指定首选大小可能会产生一些意外行为。例如,更改 or 属性不会触发布局重新排列。此外,当布局被迫进行完全重建时,它可能使用实际宽度和高度,而不是 QML 文件中指定的宽度和高度。

连接窗口和布局

您可以只使用普通的锚定概念来确保布局将遵循窗口大小调整。

RowLayout {id: layoutanchors.fill: parent

布局的大小约束可用于确保窗口的大小不能超出布局约束。您可以从布局中获取大小约束,并在 Window 元素的最小宽度、最小高度、最大宽度和最大高度上设置这些约束。以下代码确保窗口大小不能超出布局的约束:

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

注意: 由于布局。在这种情况下,Layout.maximumWidth 是无限的,我们不能将其绑定到 Window 的 maximumWidth 属性,因为这是一个整数。因此,我们将固定的最大宽度设置为 1000。

最后,您通常希望窗口的初始大小为布局的隐式大小:

width: layout.implicitWidth
height: layout.implicitHeight

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

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

相关文章

python: excel假期时间提取统计

# encoding: utf-8 # 版权所有 2023 涂聚文有限公司 # 许可信息查看: # 描述: # Author : geovindu,Geovin Du 涂聚文. # IDE : PyCharm 2023.1 python 311 # Datetime : 2023/9/3 7:04 # User : geovindu # Product : PyCharm # Proje…

Vulkan入门——编译Shaderc

编译 Vulkan-Samples时,遇到了如下shaderc编译报错。 ninja: error: /Users/xiaxl/Library/Android/sdk/ndk/21.1.6352462/sources/third_party/shaderc/libs/c_static/armeabi-v7a/libshaderc.a, needed by ../../../../build/intermediates/cmake/debug/obj/arme…

【CVPR2021】MVDNet论文阅读分析与总结

Challenge: 现有的目标检测器主要融合激光雷达和相机,通常提供丰富和冗余的视觉信息 利用最先进的成像雷达,其分辨率比RadarNet和LiRaNet中使用的分辨率要细得多,提出了一种有效的深度后期融合方法来结合雷达和激光雷达信号。 MV…

还没用熟 TypeScript 社区已经开始抛弃了

根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte 这篇文章的报道, Svelte 计划要把代码从 TS 换到 JS 了。 The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate…

SpingMyc项目如何搭建

目录 一、创建项目 二、环境搭建 (1)引入相关依赖 (2)在web.xml中配置前端控制器DispatcherServlet (3)编写SpringMVC核心配置文件springmvc.xml 三、测试是否成功 (1)编写控…

WebGL 正确处理对象前后的关系——隐藏面消除(深度测试)/ 深度冲突

目录 前言 验证WebGL处理对象前后关系的规则——后绘制的图形覆盖先绘制的图形 隐藏面消除(深度测试) 开启隐藏面消除功能,需要遵循以下两步: 1.开启隐藏面消除功能。 gl.enable()函数规范 2.在绘制…

Linux常用命令字典篇

Linux命令 1. 翻页查看文件 less [-N] 文件名:可以向后翻页,也可以向前翻页,-N表示显示行号 more 文件名:仅可以向后翻页 2. 端口占用信息查看 netstat -tunlp | grep 端口号:查看端口号对应的信息 lsof i: 端口号…

sqlserver查询表中所有字段信息

精简 SELECT 字段名 a.name,主键 case when exists(SELECT 1 FROM sysobjects where xtypePK and parent_obja.id and name in (SELECT name FROM sysindexes WHERE indid in( SELECT indid FROM sysindexkeys WHERE id a.id AND colida.colid))) then √ else …

zabbix 钉钉微信企微告警(动作操作消息内容模板)

一、环境配置 1、配置zabbix服务端 2、配置监控主机&监控项&监控模板 zabbix配置安装_this page is used to test the proper operation of _疯飙的蜗牛的博客-CSDN博客 二、触发器 触发器的本质就是一个条件判断,对于不同的监控数据来说,我…

k8s集群中部署服务之部署描述文件准备

微服务部署描述文件Deploy.yaml 一、各微服务创建部署描述文件 1.1 mall-auth-server --- apiVersion: apps/v1 kind: Deployment metadata:name: mall-auth-servernamespace: sangomalllabels:app: mall-auth-server spec:replicas: 1selector:matchLabels:app: mall-auth-s…

算法通过村第七关-树(递归/二叉树遍历)白银笔记|递归实战

文章目录 前言1. 深入理解前中后序遍历从小到大递推分情况讨论,明确结束条件组合出完整的方法:从大到小 画图推演 总结 前言 提示:没有客观公正的记忆这回事,所有的记忆都是偏见,都是为自己的存活而重组过的经验。--国…

springboot 自动装配原理

一.原理解释 Spring Boot的自动配置是Spring框架的一个重要特性,它旨在简化应用程序的开发和部署过程。自动配置通过基于类路径中的依赖关系和配置文件内容来预先配置Spring应用程序的各种组件和功能。这样,我们可以在无需显式配置大量参数的情况下&…