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"
}
}

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

锚定

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"
}
}

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

定位器

对于想要以常规模式定位一组类型的常见情况,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" }
}
}

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

布局类型

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产品教程、下载、正版授权资讯,请点击获取

上一篇:Leetcode: 84. Largest Rectangle in Histogram


下一篇:c#多态性