Qt widget中使用QML自定义电池
1、效果
2、QML
在资源里新建Mybattery.qml:
import QtQuick 2.0
import QtQuick 2.12
Item {
id: root
property color color1: "#18FD18"//绿色,健康
property color color2: "#FFFF1A"//黄色,注意
property color color3: "#7F45AA"//紫色,恶化
property color color4: "#FF1A1A"//红色,故障
property color colorBase: color1
property bool colorChangeFlag: true
property int bat_value: 80
signal setBat(double batValue)//对外接口,batValue是已经使用了多少电量,比如已经使用了80%则=80
onSetBat: {
console.log("in bat")
if(batValue<0)//不能小于0
{
text_bat_text.text="err param";
return;
}
else if(batValue>100)
{
bat_value=0;
rect_bat_body.border.color=color4;
}
else
{
bat_value=100-batValue;
rect_bat_body.border.color="gray"
}
if(batValue<=80)
{
text_bat_text.text="已使用"+batValue+"%"
colorBase = color1;
}
else if((batValue>80)&&(batValue<=90))
{
text_bat_text.text="已使用"+batValue+"%"
colorBase = color2;
}
else if((batValue>90)&&(batValue<=100))
{
text_bat_text.text="已使用"+batValue+"%"
colorBase = color3;
}
else
{
text_bat_text.text="已使用"+batValue+"%"
colorBase = color4;
}
}
Rectangle {
color: "#ffffff"
width: parent.width
height: parent.height
Rectangle {
id: rect_bat_head
width: 30
height: 10
radius: 1
color: "gray"
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 3
} Rectangle {
id: rect_bat_body
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: rect_bat_head.bottom
anchors.topMargin: 3
width: parent.width-4
height: parent.height/2
color: "#ffffff"
radius: 10
border.width: 1
border.color: "gray"
Rectangle {
id: rect_bat_value
width: parent.width-8
height: (parent.height-8)*(bat_value/100.0)
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
anchors.horizontalCenter: parent.horizontalCenter
radius: 8
color: colorBase
}
Text {
id: text_bat_text
anchors.centerIn: parent
font.pixelSize: 15
font.bold: true
color: "black"
text: bat_value+"% 健康"
}
}
Grid {
rows: 4
columns: 2
width: parent.width-4
height: parent.height/2
anchors.top: rect_bat_body.bottom
anchors.topMargin: 3
anchors.horizontalCenter: parent.horizontalCenter
horizontalItemAlignment:Grid.AlignLeft
verticalItemAlignment: Grid.AlignVCenter
spacing: 3
Rectangle {
color: color1
width: parent.width/3
height: parent.width/3
radius: width/2
Text {
anchors.centerIn: parent
font.pixelSize: 11
text: qsTr("健康")
}
} Text {
font.pixelSize: 13
text: qsTr("t<=80%")
}
Rectangle {
color: color2
width: parent.width/3
height: parent.width/3
radius: width/2
Text {
anchors.centerIn: parent
font.pixelSize: 11
text: qsTr("注意")
}
} Text {
font.pixelSize: 13
text: qsTr("90%>=t>80%")
}
Rectangle {
color: color3
width: parent.width/3
height: parent.width/3
radius: width/2
Text {
anchors.centerIn: parent
font.pixelSize: 11
text: qsTr("恶化")
}
}
Text {
font.pixelSize: 13
text: qsTr("100%>=t>90%")
}
Rectangle {
color: color4
width: parent.width/3
height: parent.width/3
radius: width/2
Text {
anchors.centerIn: parent
font.pixelSize: 11
text: qsTr("故障")
}
}
Text {
font.pixelSize: 13
text: qsTr("t>100%")
}
}
}
}
解读:C++访问QML有多种方式,如调用函数啥的,我都试过了,widget和qml结合的方式下,目前就c++信号触发qml信号能成功。
所有定义一个信号,并且在其回调里改变界面。
3、在ui中拖动一个quickWidget
在cpp中将其绑定成qml界面:
QUrl source("qrc:/qml/Mybattery.qml");
ui->quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView );
ui->quickWidget->setSource(source);
ui->quickWidget->setClearColor(QColor(Qt::transparent));
4、在C++中通过信号连接QML的信号
没错,你没听错,就是信号连接信号!!!
mainwindow.h中定义信号
signals:
void set(double value);
mainwindow.cpp中
QObject *root = ui->quickWidget->rootObject();
QObject::connect(this,SIGNAL(set(double)),root,SIGNAL(setBat(double)));//信号连接信号
emit set(80);//效果上面1图
emit set();//效果上面2图
注意加头文件:
#include <QQuickItem>
#include <QQuickView>
Qt widget中使用QML自定义电池的更多相关文章
- qt quick中qml编程语言
Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日 注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...
- 自定义的插件如何加载到Qt Designer中(详细)
要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...
- QtQuick 中的 qml 与 Qt 的 C++
QtQuick 可以使用内置的 JavaScript 引擎加载相应的 JS 代码,使用起来特别方便. 在 Qt 中使用 C++ 开发底层,QtQuick 用来加载.处理图像,然后使用 Qt 提供的接口 ...
- VS2008 Qt Designer 中自定义信号槽
一.Qt Designer自定义槽函数 发现:在VS2008 +Qt4.7 中打开ui文件,所用的英文QT Designer工具,没有转到槽函数的功能,不如QtCreator自带的QtDesigne ...
- 在自定义的widget中引入图表后,运行时出现TypeError #1009错误
本人网上查找了很多资料,其中大部分都是关于Flash中的动画效果问题,与这里的问题关系型不太大.故把问题的解决方法写在这里,与人方便,与己方便. 方法一: 1.在自定义的widget中添加如下两个方法 ...
- Qt开发中的实用笔记三--关于各种类的零碎知识点:
1,QUuid()创建唯一标识码,在创建数据库实体ID和链接数据库QSqlDatabase时非常方便 2,QScrollArea与QScrollBar,如果是要在widget中添加窗口滑动QScrol ...
- Qt Quick编程(1)——QML的核心部分ECMAScript
说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...
- [转载]震惊!QWidget竟然可以嵌入到QML中,QMl窗口句柄竟然是这样获取
背景 记得在初学qml时,就被大佬告知Qml的实现有两种方式“view+item”和“engine+widow”,那么能不能将QWidget嵌入到QML中来呢,我收到的答案是不可以,原因是QML的 ...
- QT QQuickView嵌入到QT MDI中
在学习QT的过程中发现有一个特别炫酷的行星例子“planets”,有两种实现版本: 一种是基于Qt 3D QML(planets-qml),另一种则是基于Quick和强大的Three.js(plane ...
随机推荐
- 1.什么是spring
spring框架是一个为java应用程序的开发提供了综合,广泛的基础性支持的java开源框架, 使得开发者不用去关心一些冗杂的基础性问题,从而可以更加专注于应用程序的开发. spring框架是一个分层 ...
- ER图的构建
我们在完成一个项目前期,首要的工作是对需求进行分析,然后根据需求画出相应的数据库E-R图,这是我们后期建立数据库和对数据库进行操作的必要操作 这是一个小总结和示例 关系型数据库 关系 (表) stud ...
- go socket 服务端处理多用户
package main import ( "fmt" "net" "strings") func main() { listener, e ...
- JS+rem,移动端适配
window.onresize = function () { setHtmlFz(); } setHtmlFz(); function setHtmlFz() { // 基础值 var baseVa ...
- 学习Spring-Data-Jpa(七)---JpaRepository
之前我们学习的Repository都是Spring-Data为了兼容NoSQL而进行的一些抽象封装,从JpaRepository开始是对关系型数据库进行抽象封装.JpaRepository位于spri ...
- learning java Runtime 类 获取内存及处理器核数信息
var rt = Runtime.getRuntime(); System.*)); System.*)); System.*)); System.out.println(rt.availablePr ...
- strutsCRUD
Bookdao public class BookDao extends JsonBaseDao{ //分页查询书本信息 //根据书本id查询当个书本信息 public List<Map< ...
- [HAOI2015][bzoj 4033]树上染色(树dp+复杂度分析)
[题目描述]有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距离加上白点两两 ...
- mov指令和 add以及sub 指令的区别
比如 mov ax,ds 比如 [0],ds #经过上机实验 add,sub指令不能对段寄存器操作
- 课标2-2-1-3 :MMU配置与使用
void create_page_table(void){ unsigned long *ttb = (unsigned long *)0x20000000; unsigned long vaddr, ...