首页 > 代码库 > QML官方教程——Qt Quick Layouts Overview

QML官方教程——Qt Quick Layouts Overview

2024-07-08 06:46:24   224人阅读

附网址：http://qt-project.org/doc/qt-5/qtquicklayouts-overview.html


Qt Quick Layouts Overview —— Qt Quick Layouts概述

Qt Quick Layouts是用来对用户界面中的组件进行布局的一套组件。由于Qt Quick Layouts会根据实际情况动态调整其内部组件的尺寸，因此它非常适合被用在尺寸可变的用户界面中。


Getting Started

在.qml文件里使用如下声明将其引入到你的应用程序中。

import QtQuick.Layouts 1.1

·

Key features —— 关键特征值

部分关键特征值如下：

· 项目的Alignment可以由Layout.alignment属性指定。

· Resizable items（尺寸可变的项目）可以由Layout.fillWidth和Layout.fillHeight属性指定。

· Size constraints（尺寸限制）可以由Layout.minimumWidth，Layout.preferredWidth，以及Layout.maximumWidth属性指定。（当然，“Height”也是一样）。

· Spacings（间隔）可以由spacing，rowSpacing或columnSpacing指定。


除了上面这些，GridLayout还添加了这些特征值：

· Grid coordinates可以由Layout.row和Layout.column指定。

· Automatic grid coordinates与flow，rows，columns属性共同工作。

· Spans为行列的跨度，可以由Layout.rowSpan和Layout.columnSpan属性指定。


Size Constraints —— 尺寸限制

由于一个对象的布局可以调整它的尺寸，因此当Layout.fillWidth或者Layout.fillHeight被设置为真时，layout需要知道所有组件的minimum，preferred和maximum尺寸。例如下面的代码展示了在一个布局中，两个水平方向相邻的矩形。

蔚蓝色的矩形的尺寸可以由50x150变化到300x150，而紫红色矩形的尺寸可以由100x100变化到 无穷x100。

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

·



结合各项目的约束，我们就能得到这个layout元素的隐式约束。

 最小优先最大
隐式限制（宽度）156306无穷(Number.POSITIVE_INFINITY)
隐式限制（高度）150150150

因此这个布局不会窄于156或者高于、低于150，来保证它不会打破其任何子部件的约束。


Specifying Preferred Size —— 指定优先尺寸

对于每个项目，有效的优先尺寸可能由多个候选属性决定。为了决定有效的首选尺寸，layout将按顺序查询下列候选尺寸，并挑选第一个宽高有效的候选者。

候选属性描述
Layout.preferredWidth 或 Layout.preferredHeight如果默认的隐式尺寸没有给出最佳的安排，
程序应该修改这两个属性值。
implicitWidth 或 implicitHeight该属性是由其内部组件所决定的一个理想的数值，
例如一个这个尺寸需要显示Text的所有内容。
如果隐式的宽度和高度为0 则被认为是无效的。
width 和 height如果上面属性的值都无效，
layout再来求助于width 和 height属性。

一个组件可以在指明Layout.preferredWidth的同时而不指明Layout.preferredHeight。在这种情况下，有效的首选高度将由implicitHeight（或者是最终的height）来决定。


注：修改width或者height的属性值仅仅提供了一个最终的决定量，如果你想要重写优先尺寸，建议是使用Layout.preferredWidth或者Layout.preferredHeight。依赖width或者height属性值来指定首选尺寸可能会造成不可预料的行为。例如，改变width和height的值并不能引起布局的重排。并且当布局被使用来进行一次完整重建时，它可能使用实际的宽度和高度，而不是QML文件中定义的width和height值。


Connecting windows and layouts—— 连接窗口和布局

你可以使用锚的方式来使这个布局可以跟随窗口尺寸的改变。

RowLayout {
    id: layout
    anchors.fill: parent

·

布局的尺寸约束可以被用来保证窗口的尺寸变化不会超出布局尺寸约束。你可以通过使用窗口元素的minimumWidth，minimumHeight，maximumWidth，以及maximumHeight来修改这些约束。下面的代码保证了窗口尺寸的调整不会超过这个布局的限制。

<span style="font-size:18px;">minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight</span>

·

注：由于这个例子中layout.Layout.maximumWidth是无穷大的，我们不能将其与窗口的maximumWidth属性进行绑定，因此我们将最大宽度设置为一个固定的整数1000。

最后，你通常希望窗口的初始大小与布局的隐式尺寸一致：

width: layout.implicitWidth
height: layout.implicitHeight


联系
我们