一，前言
上次QT GraphicsItem GUI界面定制--Apple的学习笔记中我已经研究了下graphicsview，能进行简单的自定义对象界面。但是卡住我的就是那个layout界面是window style的，怎么修改风格呢？于是我开始研究关键炫酷界面定制，了解到了以前QT会用CSS，后来有了paint重绘，比如基于graphicsview的界面，然后现在主推的是逻辑与界面分离的设计，也就是主推qml编程。
二，grapicsItem组合炫酷界面
这3者这几天我都简单玩了下。先用我熟悉的graphicview制作了类似ue4的蓝图界面元素。现在卡住我的依然是捆绑方案。
方案1：我用了graphicsItem里面添加了qwidget的txt元素。
方案2：和方案1类似的思路是用graphicsTextItem绑定到自定义的item中。
方案3：用QGraphicsItemGroup来绑定2个对象，让QGraphicsItemGroup升级为我的自定义对象。
但是这些方案中都有一个问题就是click txt后无法编辑。这个查看了下是关于鼠标事件透传，网上说要设置属性，然后设置为透传，关于每个回调函数调用的顺序我还搞的不是很清楚。但是个人觉得第3种方案会比较好。
我先用graphicsView来绘制了炫酷界面
其实界面的设计参考了python的Ryven及ue4蓝图界面风格。我自定义一个graphicsItem类如下
image.png
关于这个界面的源码，需要的同学可以联系我。
三，基于qml的炫酷界面
简单学了下qml语法及查看qml help的方法后，入门qml真的很快。而且发现它比graphicsItem用起来简单多了，qml其实主推的是和js配套使用，一个做前台界面美化，一个做后台功能逻辑。
qml我可以做一个自定义的对象，然后qml里面也解决了多重对象鼠标事件透传，需要设置propagateComposedEvents: true，但是关于组合体的布局我没有用锚，而是固定的直接坐标，这个不太好。
qml已经实现了炫酷界面定期，内嵌的txt文本编辑库可以在鼠标左键/右击/左键+shift键的时候更改文本内容。然后也可以拖动。算是完成了简单的HMI定制功能。
qml炫酷界面.gif
四，qml源码
image.png
- main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
#if 0
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
#endif
return app.exec();
}
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id:mainRoot
width: 300
height: 200
visible: true
title: qsTr("Apple Leaning")
Customitem{
//anchors.fill: parent
}
}
Customitem.qml
import QtQuick 2.0
Item
{
// 背景
Rectangle {
id: myobj
x: 0; y: 0
width: 120; height: 160
color: "black"
radius: 5
border.color: "red"
border.width: 2
// 标题
Rectangle {
id: objtytle
x: 0; y: 0
radius: 5
width: 120; height: 32
border.width:1
border.color:"red"
smooth:true
gradient: Gradient{
GradientStop{position: 0.0; color: "black"}
GradientStop{position: 1.0; color: "red"}
}
//rotation: 90
transformOrigin: "Center"
Text{
text: "Apple's Demo"
color:"#e26161"
anchors.centerIn: parent
}
}
//第一个输入口
Rectangle {
x: 10;y:40
width: 16 //width
height: 16 //=width
//color: Qt.rgba(200/255,0/255,0/255, 0.5)
color: "black"
radius: 8 //width/2
border.color: "red"
Canvas {
id: canvasId1
x:17;y:2
property color triangleColor: "#474747"
width: 8; height: 12
contextType: "2d"
onPaint: {
context.lineWidth = 0
context.strokeStyle = "#00000000"
context.fillStyle = triangleColor
context.beginPath();
context.moveTo(0, 0)
context.lineTo(0, canvasId1.height);
context.lineTo(canvasId1.width, canvasId1.height/2);
context.closePath();
context.fill()
context.stroke();
}
}
}
//第二个输入口
Rectangle {
x: 10;y:70
width: 16 //width
height: 16 //=width
//color: Qt.rgba(200/255,0/255,0/255, 0.5)
color: "black"
radius: 8 //width/2
border.color: "red"
Canvas {
id: canvasId2
x:17;y:2
property color triangleColor: "#474747"
width:8; height: 12
contextType: "2d"
onPaint: {
context.lineWidth = 0
context.strokeStyle = "#00000000"
context.fillStyle = triangleColor
context.beginPath();
context.moveTo(0, 0)
context.lineTo(0, canvasId2.height);
context.lineTo(canvasId2.width, canvasId2.height/2);
context.closePath();
context.fill()
context.stroke();
}
}
}
//第一个输出口
Rectangle {
x: 86;y:40
width: 16 //width
height: 16 //=width
//color: Qt.rgba(200/255,0/255,0/255, 0.5)
color: "black"
radius: 8 //width/2
border.color: "red"
Canvas {
id: canvasId3
x:17;y:2
property color triangleColor: "#474747"
width:8; height: 12
contextType: "2d"
onPaint: {
context.lineWidth = 0
context.strokeStyle = "#00000000"
context.fillStyle = triangleColor
context.beginPath();
context.moveTo(0, 0)
context.lineTo(0, canvasId3.height);
context.lineTo(canvasId3.width, canvasId3.height/2);
context.closePath();
context.fill()
context.stroke();
}
}
}//第一个输出口
//txt操作框
Rectangle {
id:optxt
x:40;y:60
width: 40
height: 15
color: "black"
border.color: "grey"
anchors.horizontalCenter: myobj.Center
TextInput {
text:"+"
id: opInput
color:"red"
anchors.fill: parent
anchors.margins: 2
font.pointSize: 8
//focus: true
anchors.horizontalCenter: optxt.Center
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: { //右键
if(mouse.button === Qt.RightButton)
{
//optxt.color = "blue"
opInput.text = "-"
}
//左键 + shift键
else if((mouse.button === Qt.LeftButton) && (mouse.modifiers & Qt.ShiftModifier))
{
//optxt.color = "green"
opInput.text = "*"
}
else
{
//optxt.color = "yello"
opInput.text = "/"
}
}
}
}
MouseArea {
propagateComposedEvents: true //组合事件，可以传递到下一层的鼠标事件
anchors.fill: parent
//! [drag]
drag.target: myobj
drag.axis: Drag.XAndYAxis
//drag.minimumX: 0
//drag.maximumX: parent.width
//drag.minimumY: 0
//drag.maximumY: parent.height
//! [drag]
onClicked: {
console.log("item clicked")
//组合事件可以不写处理程序，或者accepted为false
mouse.accepted = false
}
}
}//背景框
}
五，总结
从一开没有方向，到后来有了很多方向，但是暂时还是有实现完整的功能，只实现了炫酷界面部分功能，这也是一种探索学习后的进步，算是一个关键的里程碑，所以特此记录。而我本轮的主要目的不是想到什么好玩的工具，然后进行实现，其实主要目的就是学习定义HMI炫酷界面，因为我之前自己给自己做的工具感觉界面美观方面都太简单了。此次主要是掌握了方法，为将来自己做好玩的工具进行准备，现在已经达成目标了，可以close file了。
网友评论