Qt Quick Layouts Overview

2023-10-20 00:40
文章标签 qt quick overview layouts

本文主要是介绍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

这篇关于Qt Quick Layouts Overview的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/243478

相关文章

Qt 中 isHidden 和 isVisible 的区别与使用小结

《Qt中isHidden和isVisible的区别与使用小结》Qt中的isHidden()和isVisible()方法都用于查询组件显示或隐藏状态,然而,它们有很大的区别,了解它们对于正确操... 目录1. 基础概念2. 区别清见3. 实际案例4. 注意事项5. 总结1. 基础概念Qt 中的 isHidd

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对

Qt 中集成mqtt协议的使用方法

《Qt中集成mqtt协议的使用方法》文章介绍了如何在工程中引入qmqtt库,并通过声明一个单例类来暴露订阅到的主题数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一,引入qmqtt 库二,使用一,引入qmqtt 库我是将整个头文件/源文件都添加到了工程中进行编译,这样 跨平台

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》:本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho

QT实现TCP客户端自动连接

《QT实现TCP客户端自动连接》这篇文章主要为大家详细介绍了QT中一个TCP客户端自动连接的测试模型,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录版本 1:没有取消按钮 测试效果测试代码版本 2:有取消按钮测试效果测试代码版本 1:没有取消按钮 测试效果缺陷:无法手动停

基于Qt实现系统主题感知功能

《基于Qt实现系统主题感知功能》在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置(如深色模式或浅色模式)自动调整其外观,Qt作为一个跨平台的C++图形用... 目录【正文开始】一、使用效果二、系统主题感知助手类(SystemThemeHelper)三、实现细节