• Qt Quick Layouts Overview

    Qt快速布局概述

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

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

    开始

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

    import QtQuick.Layouts 1.11

    主要特点

    一些主要功能是：

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

    除了上述功能外，还添加了以下功能：

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

    简单的布局

    1. Window {
    2.     RowLayout {
    3.         anchors.fill: parent
    4.         spacing: 6
    5.         Rectangle {
    6.             color: 'azure'
    7.             Layout.preferredWidth: 100
    8.             Layout.preferredHeight: 150
    9.         }
    10.         Rectangle {
    11.             color: "plum"
    12.             Layout.fillWidth: true
    13.             Layout.fillHeight: true
    14.         }
    15.     }
    16. }

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

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

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

    spacing: 6

    大小约束

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

    1. RowLayout {
    2.     id: layout
    3.     anchors.fill: parent
    4.     spacing: 6
    5.     Rectangle {
    6.         color: 'azure'
    7.         Layout.fillWidth: true
    8.         Layout.minimumWidth: 50
    9.         Layout.preferredWidth: 100
    10.         Layout.maximumWidth: 300
    11.         Layout.minimumHeight: 150
    12.         Text {
    13.             anchors.centerIn: parent
    14.             text: parent.width + 'x' + parent.height
    15.         }
    16.     }
    17.     Rectangle {
    18.         color: 'plum'
    19.         Layout.fillWidth: true
    20.         Layout.minimumWidth: 100
    21.         Layout.preferredWidth: 200
    22.         Layout.preferredHeight: 100
    23.         Text {
    24.             anchors.centerIn: parent
    25.             text: parent.width + 'x' + parent.height
    26.         }
    27.     }
    28. }

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

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

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

    指定首选大小

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

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

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

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

    连接窗口和布局

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

    1. RowLayout {
    2.     id: layout
    3.     anchors.fill: parent

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

    1. minimumWidth: layout.Layout.minimumWidth
    2. minimumHeight: layout.Layout.minimumHeight
    3. maximumWidth: 1000
    4. maximumHeight: layout.Layout.maximumHeight

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

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

    1. width: layout.implicitWidth
    2. height: layout.implicitHeight
  • 相关阅读:
    LeetCode-328. Odd Even Linked List [C++][Java]
    京东数据平台：2023年9月京东智能家居行业数据分析
    组织机器学习代码
    Rust中FFI编程知识点整理总结
    基于 Web 的 RADIUS 认证服务
    智慧交通，迎来产业谍战丨产业特稿
    K8S自建LoadBalancer
    常见的12种二次曲面方程及可视化
    密码相关----对称加密，非对称加密
    StarRocks从入门到精通系列一：StarRocks简介、系统架构和产品特性
  • 原文地址：https://blog.csdn.net/Helloorld_1/article/details/132880022