C++图形用户界面开发框架Qt 6.1入门级教程：用例 – QML中的可视化元素

本文主要介绍QML中的可视化元素，欢迎下载框架产品体验~

Rectangle类型

对于最基本的可视化效果，Qt Quick提供了一个Rectangle 类型来绘制矩形，这些矩形可以用颜色或垂直渐变着色，Rectangle 类型还可以在矩形上绘制边框。

要绘制矩形以外的自定义形状，请参阅Canvas类型或使用 Image 类型显示预渲染图像。

import QtQuickItem {width: 320height: 480Rectangle {color: "#272822"width: 320height: 480}// This element displays a rectangle with a gradient and a borderRectangle {x: 160y: 20width: 100height: 100radius: 8 // This gives rounded corners to the Rectanglegradient: Gradient { // This sets a vertical gradient fillGradientStop { 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 borderRectangle {x: 40y: 20width: 100height: 100color: "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 fetchImage {x: 40y: 20width: 61height: 73source: "http://codereview.qt-project.org/static/logo_qt.png"}

对于更复杂的图像，还有其他类似于Image的类型。 BorderImage绘制带有网格缩放的图像，适用于用作边框的图像。 AnimatedImage播放动画 .gif 和 .mng 图像。 AnimatedSprite和 SpriteSequence播放由以非动画图像格式相邻存储的多个帧组成的动画。

共享可视化属性

Qt Quick提供的所有可视项都基于 Item 类型，它为可视项提供了一组通用的属性，包括不透明度和变换属性。

不透明度和可见性

Qt Quick提供的QML对象类型内置了对不透明度的支持，可以对不透明度进行动画处理，以允许平滑过渡到透明状态或从透明状态平滑过渡。 也可以使用可见属性更有效地管理可见性，但代价是无法对其进行动画处理。

import QtQuickItem {width: 320height: 480Rectangle {color: "#272822"width: 320height: 480}Item {x: 20y: 270width: 200height: 200MouseArea {anchors.fill: parentonClicked: topRect.visible = !topRect.visible}Rectangle {x: 20y: 20width: 100height: 100color: "red"}Rectangle {id: topRectopacity: 0.5x: 100y: 100width: 100height: 100color: "blue"}}}

转换

Qt Quick类型具有对转换的内置支持，如果您希望旋转或缩放可视化内容，您可以设置Item::rotation或Item::scale属性，这些也可以是动画。

import QtQuickItem {width: 320height: 480Rectangle {color: "#272822"width: 320height: 480}Rectangle {rotation: 45 // This rotates the Rectangle by 45 degreesx: 20y: 160width: 100height: 100color: "blue"}Rectangle {scale: 0.8 // This scales the Rectangle down to 80% sizex: 160y: 160width: 100height: 100color: "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      欢迎一起进群讨论

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

来源：慧都