彩票走势图

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

原创|使用教程|编辑:龚雪|2021-11-10 10:17:35.540|阅读 259 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Rectangle类型

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

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

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

QML中的可视化元素
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: "//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"
}
}
}

QML中的可视化元素
转换

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

QML中的可视化元素
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商业组件集合

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP