有很多种方法可以在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 欢迎一起进群讨论