C++图形用户界面开发框架Qt 6.x- QML中的可视化元素 Qtc++界面开发QML
程序员文章站
2022-05-30 09:59:55
...
Rectangle类型
对于最基本的可视化效果,Qt Quick提供了一个Rectangle 类型来绘制矩形,这些矩形可以用颜色或垂直渐变着色,Rectangle 类型还可以在矩形上绘制边框。
要绘制矩形以外的自定义形状,请参阅Canvas类型或使用 Image 类型显示预渲染图像。
import QtQuick Item { width: 320 height: 480 Rectangle { color: "#272822" width: 320 height: 480 } // This element displays a rectangle with a gradient and a border Rectangle { x: 160 y: 20 width: 100 height: 100 radius: 8 // This gives rounded corners to the Rectangle gradient: Gradient { // This sets a vertical gradient fill GradientStop { position: 0.0; color: "aqua" } GradientStop { position: 1.0; color: "teal" } } border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn } // This rectangle is a plain color with no border Rectangle { x: 40 y: 20 width: 100 height: 100 color: "red" } }
Image类型
Qt Quick提供了一个Image类型,可用于显示图像。 Image类型有一个source属性,其值可以是远程或本地URL,或者嵌入在编译资源文件中的图像文件的URL。
// This element displays an image. Because the source is online, it may take some time to fetch Image { x: 40 y: 20 width: 61 height: 73 source: "http://codereview.qt-project.org/static/logo_qt.png" }
对于更复杂的图像,还有其他类似于Image的类型。 BorderImage绘制带有网格缩放的图像,适用于用作边框的图像。 AnimatedImage播放动画 .gif 和 .mng 图像。 AnimatedSprite和 SpriteSequence播放由以非动画图像格式相邻存储的多个帧组成的动画。
共享可视化属性
Qt Quick提供的所有可视项都基于 Item 类型,它为可视项提供了一组通用的属性,包括不透明度和变换属性。
不透明度和可见性
Qt Quick提供的QML对象类型内置了对不透明度的支持,可以对不透明度进行动画处理,以允许平滑过渡到透明状态或从透明状态平滑过渡。 也可以使用可见属性更有效地管理可见性,但代价是无法对其进行动画处理。
import QtQuick Item { width: 320 height: 480 Rectangle { color: "#272822" width: 320 height: 480 } Item { x: 20 y: 270 width: 200 height: 200 MouseArea { anchors.fill: parent onClicked: topRect.visible = !topRect.visible } Rectangle { x: 20 y: 20 width: 100 height: 100 color: "red" } Rectangle { id: topRect opacity: 0.5 x: 100 y: 100 width: 100 height: 100 color: "blue" } } }
转换
Qt Quick类型具有对转换的内置支持,如果您希望旋转或缩放可视化内容,您可以设置Item::rotation或Item::scale属性,这些也可以是动画。
import QtQuick Item { width: 320 height: 480 Rectangle { color: "#272822" width: 320 height: 480 } Rectangle { rotation: 45 // This rotates the Rectangle by 45 degrees x: 20 y: 160 width: 100 height: 100 color: "blue" } Rectangle { scale: 0.8 // This scales the Rectangle down to 80% size x: 160 y: 160 width: 100 height: 100 color: "green" } }
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技术交流群4:166830288 欢迎一起进群讨论
推荐阅读
-
C++图形用户界面开发框架Qt 6.x入门级教程 - QML 应用程序 C++Qt图形界面
-
C++图形用户界面开发框架Qt 6.x - 在QML中显示文本 C++QtQML界面控件
-
Qt开发框架入门级教程:用例 - 在QML中响应用户输入 Qt界面开发框架C++
-
C++图形用户界面开发框架Qt 6.x - 基于Qt Widget的UI工具 QtC++界面控件
-
C++图形用户界面开发框架Qt 6.x- QML中的可视化元素 Qtc++界面开发QML
-
C++图形用户界面开发框架Qt 6.x - QML中的定位器和布局 C++用户界面开发框架Qt 6Qt
-
C++图形用户界面开发框架Qt 6.x - 基于Qt Widget的UI工具 QtC++界面控件
-
C++图形用户界面开发框架Qt 6.x - QML中的定位器和布局 C++用户界面开发框架Qt 6Qt
-
C++图形用户界面开发框架Qt 6.x - 在QML中显示文本 C++QtQML界面控件
-
Qt开发框架入门级教程:用例 - 在QML中响应用户输入 Qt界面开发框架C++