C++图形用户界面开发框架Qt 6.x- QML中的可视化元素 Qtc++界面开发QML

点击获取Qt下载

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      欢迎一起进群讨论

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