C++图形用户界面开发框架Qt 6.x - QML中的定位器和布局

点击获取Qt下载

有很多种方法可以在QML中定位项目，以下是简要的概述。

手动定位

通过设置项目的 x,y 属性，可以将项目放置在屏幕上的特定 x,y 坐标处。 根据可视化坐标系规则，这将设置它们相对于父级左上角的位置。

结合使用绑定替代这些属性的常量值，通过将 x 和 y 坐标设置为适当的绑定，也可以轻松实现相对定位。

import QtQuick

Item {
width: 100; height: 100

Rectangle {
// Manually positioned at 20,20
x: 20
y: 20
width: 80
height: 80
color: "red"
}
}  

锚定

Item类型提供了锚定到其他Item类型的功能，每个项目有7条锚线：左、右、垂直居中、顶部、底部、基线和水平居中。三个垂直锚线可以锚定到另一个项目的三个垂直锚线中的任何一个，四个水平锚线可以锚定到另一个项目的水平锚线。

import QtQuick

Item {
width: 200; height: 200

Rectangle {
// Anchored to 20px off the top right corner of the parent
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 20 // Sets all margins at once

width: 80
height: 80
color: "orange"
}

Rectangle {
// Anchored to 20px off the top center corner of the parent.
// Notice the different group property syntax for 'anchors' compared to
// the previous Rectangle. Both are valid.
anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }

width: 80
height: 80
color: "green"
}
}  

定位器

对于想要以常规模式定位一组类型的常见情况，Qt Quick提供了一些定位器类型。放置在定位器中的物品会以某种方式自动定位； 例如， Row将项目定位为水平相邻（形成一行）。

import QtQuick

Item {
width: 300; height: 100

Row { // The "Row" type lays out its child items in a horizontal line
spacing: 20 // Places 20px of space between items

Rectangle { width: 80; height: 80; color: "red" }
Rectangle { width: 80; height: 80; color: "green" }
Rectangle { width: 80; height: 80; color: "blue" }
}
}  

布局类型

Layout types功能与定位器类似，但允许进一步细化或限制布局。 具体来说，Layout types允许您：

• 设置文本和其他项目的对齐方式
• 自动调整和填充分配的应用程序区域
• 设置尺寸限制，例如最小或最大尺寸
• 设置布局内项目之间的间距

GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true

GridLayout {
id: gridLayout
rows: 3
flow: GridLayout.TopToBottom
anchors.fill: parent
Label { text: "Line 1" }
Label { text: "Line 2" }
Label { text: "Line 3" }

TextField { }
TextField { }
TextField { }

TextArea {
text: "This widget spans over three rows in the GridLayout.\n"
+ "All items in the GridLayout are implicitly positioned from top to bottom."
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}  

上面的代码片段来自基本布局示例，该代码段显示了在布局中添加各种字段和项目的简单性。 GridLayout 可以调整大小，并且可以通过各种属性自定义其格式。

Qt商用组件推荐

• QtitanRibbon - Ribbon UI组件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart - Qt类图表组件：是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
• QtitanDataGrid - Qt网格组件：提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中，支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
• QtitanNavigation：QtitanNavigationDesignUI 组件是一组 GUI 控件，它实现了菜单、导航框、命令栏等导航界面，并让您以更少的滚动和点击次数有效地查看所有实体（工作区、网格或其他项目）。
• QtitanDocking：允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题！

Qt技术交流群：166830288      欢迎一起进群讨论

更多Qt产品教程、下载、正版授权资讯，请点击获取