tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add flex node & demo

Browse Source
This commit is contained in:
王劲鹏 2021-06-02 16:34:38 +08:00 committed by osborn
parent 88e0eb5d38
commit 4377c29951
10 changed files with 289 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
doric-Qt/example/app/demo/DoricDemoBridge.cpp
View File

@ -32,51 +32,54 @@ void DoricDemoBridge::navigate(QVariant route) {
name = "EffectsDemo.js";
break;
case 4:
name = "Gobang.js";
name = "FlexDemo.js";
break;
case 5:
name = "ImageDemo.js";
name = "Gobang.js";
break;
case 6:
name = "InputDemo.js";
name = "ImageDemo.js";
break;
case 7:
name = "LayoutDemo.js";
name = "InputDemo.js";
break;
case 8:
name = "LayoutTestDemo.js";
name = "LayoutDemo.js";
break;
case 9:
name = "ModalDemo.js";
name = "LayoutTestDemo.js";
break;
case 10:
name = "ModularDemo.js";
name = "ModalDemo.js";
break;
case 11:
name = "NetworkDemo.js";
name = "ModularDemo.js";
break;
case 12:
name = "PopoverDemo.js";
name = "NetworkDemo.js";
break;
case 13:
name = "ScrollerDemo.js";
name = "PopoverDemo.js";
break;
case 14:
name = "SimpleDemo.js";
name = "ScrollerDemo.js";
break;
case 15:
name = "SliderDemo.js";
name = "SimpleDemo.js";
break;
case 16:
name = "Snake.js";
name = "SliderDemo.js";
break;
case 17:
name = "StorageDemo.js";
name = "Snake.js";
break;
case 18:
name = "SwitchDemo.js";
name = "StorageDemo.js";
break;
case 19:
name = "SwitchDemo.js";
break;
case 20:
name = "TextDemo.js";
break;
}

34
doric-Qt/example/app/main.qml
View File

@ -15,7 +15,7 @@ ApplicationWindow {
ListView {
width: parent.width
model: 20
model: 21
delegate: Rectangle {
Column {
anchors.centerIn: parent
@ -31,36 +31,38 @@ ApplicationWindow {
case 3:
return "EffectsDemo.js"
case 4:
return "Gobang.js"
return "FlexDemo.js"
case 5:
return "ImageDemo.js"
return "Gobang.js"
case 6:
return "InputDemo.js"
return "ImageDemo.js"
case 7:
return "LayoutDemo.js"
return "InputDemo.js"
case 8:
return "LayoutTestDemo.js"
return "LayoutDemo.js"
case 9:
return "ModalDemo.js"
return "LayoutTestDemo.js"
case 10:
return "ModularDemo.js"
return "ModalDemo.js"
case 11:
return "NetworkDemo.js"
return "ModularDemo.js"
case 12:
return "PopoverDemo.js"
return "NetworkDemo.js"
case 13:
return "ScrollerDemo.js"
return "PopoverDemo.js"
case 14:
return "SimpleDemo.js"
return "ScrollerDemo.js"
case 15:
return "SliderDemo.js"
return "SimpleDemo.js"
case 16:
return "Snake.js"
return "SliderDemo.js"
case 17:
return "StorageDemo.js"
return "Snake.js"
case 18:
return "SwitchDemo.js"
return "StorageDemo.js"
case 19:
return "SwitchDemo.js"
case 20:
return "TextDemo.js"
}
}

1
doric-Qt/example/app/qml.qrc
View File

@ -13,6 +13,7 @@
<file alias="Counter.js">../../../doric-demo/bundle/src/Counter.js</file>
<file alias="DraggableDemo.js">../../../doric-demo/bundle/src/DraggableDemo.js</file>
<file alias="EffectsDemo.js">../../../doric-demo/bundle/src/EffectsDemo.js</file>
<file alias="FlexDemo.js">../../../doric-demo/bundle/src/FlexDemo.js</file>
<file alias="Gobang.js">../../../doric-demo/bundle/src/Gobang.js</file>
<file alias="ImageDemo.js">../../../doric-demo/bundle/src/ImageDemo.js</file>
<file alias="InputDemo.js">../../../doric-demo/bundle/src/InputDemo.js</file>

2
doric-Qt/example/doric/DoricRegistry.cpp
View File

@ -8,6 +8,7 @@
#include "plugin/DoricStoragePlugin.h"
#include "shader/DoricDraggableNode.h"
#include "shader/DoricFlexNode.h"
#include "shader/DoricHLayoutNode.h"
#include "shader/DoricImageNode.h"
#include "shader/DoricInputNode.h"
@ -39,6 +40,7 @@ DoricRegistry::DoricRegistry() {
registerViewNode<DoricInputNode>("Input");
registerViewNode<DoricSwitchNode>("Switch");
registerViewNode<DoricDraggableNode>("Draggable");
registerViewNode<DoricFlexNode>("FlexLayout");
}
bool DoricRegistry::acquirePluginInfo(QString name) {

2
doric-Qt/example/doric/doric.pro
View File

@ -42,6 +42,7 @@ SOURCES += \
plugin/DoricShaderPlugin.cpp \
plugin/DoricStoragePlugin.cpp \
shader/DoricDraggableNode.cpp \
shader/DoricFlexNode.cpp \
shader/DoricGroupNode.cpp \
shader/DoricHLayoutNode.cpp \
shader/DoricImageNode.cpp \
@ -127,6 +128,7 @@ HEADERS += \
plugin/DoricShaderPlugin.h \
plugin/DoricStoragePlugin.h \
shader/DoricDraggableNode.h \
shader/DoricFlexNode.h \
shader/DoricGroupNode.h \
shader/DoricHLayoutNode.h \
shader/DoricImageNode.h \

180
doric-Qt/example/doric/resources/flex.qml Normal file
View File

@ -0,0 +1,180 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.12
import "util.mjs" as Util
Rectangle {
id: root
property var wrapper
clip: true
property var uuid: Util.uuidv4()
property var tag: "Flex"
onWidthChanged: {
console.log(tag, uuid + " onWidthChanged: " + this.width)
updateGradient()
}
onHeightChanged: {
console.log(tag, uuid + " onHeightChanged: " + this.height)
updateGradient()
}
color: 'transparent'
property var backgroundColor
onBackgroundColorChanged: {
color = backgroundColor
}
property var borderWidth: 0
onBorderWidthChanged: {
border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
border.color = borderColor
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(tag, uuid + " wrapper: " + wrapper)
mouseAreaBridge.onClick(wrapper)
}
}
property var shadowColor
property var shadowRadius
property var shadowOffsetX
property var shadowOffsetY
property var shadowOpacity
onShadowOpacityChanged: {
if (shadowOpacity > 0) {
layer.enabled = true
} else {
layer.enabled = false
}
}
layer.enabled: false
layer.effect: DropShadow {
horizontalOffset: shadowOffsetX
verticalOffset: shadowOffsetY
radius: shadowRadius
samples: 16
color: shadowColor
transparentBorder: true
}
property var backgroundColorIsObject: false
onBackgroundColorIsObjectChanged: {
if (backgroundColorIsObject) {
lineGradient.anchors.fill = root
} else {
lineGradient.anchors.fill = null
}
}
property variant gradientColors: []
property variant gradientLocations: []
onGradientColorsChanged: {
console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors)
if (gradientColors.length > 0) {
let stops = []
if (gradientLocations.length == 0) {
let unit = 1 / (gradientColors.length - 1)
for (let i = 0;i !== gradientColors.length;i++) {
let a = ((gradientColors[i] >> 24) & 0xff) / 255;
let r = ((gradientColors[i] >> 16) & 0xff) / 255;
let g = ((gradientColors[i] >> 8) & 0xff) / 255;
let b = ((gradientColors[i] >> 0) & 0xff) / 255;
let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)})
console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a))
stops.push(stop)
}
} else {
for (let i = 0;i !== gradientColors.length;i++) {
let a = ((gradientColors[i] >> 24) & 0xff) / 255;
let r = ((gradientColors[i] >> 16) & 0xff) / 255;
let g = ((gradientColors[i] >> 8) & 0xff) / 255;
let b = ((gradientColors[i] >> 0) & 0xff) / 255;
let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)})
console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a))
stops.push(stop)
}
}
innerGradient.stops = stops
}
}
property var orientation: 0
function updateGradient() {
switch (orientation) {
case 0:
lineGradient.start = Qt.point(0, 0)
lineGradient.end = Qt.point(0, root.height)
break
case 1:
lineGradient.start = Qt.point(root.width, 0)
lineGradient.end = Qt.point(0, root.height)
break
case 2:
lineGradient.start = Qt.point(root.width, 0)
lineGradient.end = Qt.point(0, 0)
break
case 3:
lineGradient.start = Qt.point(root.width, root.height)
lineGradient.end = Qt.point(0, 0)
break
case 4:
lineGradient.start = Qt.point(0, root.height)
lineGradient.end = Qt.point(0, 0)
break
case 5:
lineGradient.start = Qt.point(0, root.height)
lineGradient.end = Qt.point(root.width, 0)
break
case 6:
lineGradient.start = Qt.point(0, 0)
lineGradient.end = Qt.point(root.width, 0)
break
case 7:
lineGradient.start = Qt.point(0, 0)
lineGradient.end = Qt.point(root.width, root.height)
break
}
}
onOrientationChanged: {
console.log(tag, uuid + " onOrientationChanged: " + orientation)
updateGradient()
}
LinearGradient {
Component {
id:stopComponent
GradientStop {}
}
id: lineGradient
gradient: Gradient {
id: innerGradient
}
}
}

33
doric-Qt/example/doric/shader/DoricFlexNode.cpp Normal file
View File

@ -0,0 +1,33 @@
#include "DoricFlexNode.h"
QQuickItem *DoricFlexNode::build() {
QQmlComponent component(getContext()->getQmlEngine());
const QUrl url(QStringLiteral("qrc:/doric/qml/flex.qml"));
component.loadUrl(url);
if (component.isError()) {
qCritical() << component.errorString();
}
QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
this->createLayouts(item);
item->setProperty("wrapper", QString::number((qint64)this));
return item;
}
void DoricFlexNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
if (name == "flexConfig") {
} else {
DoricGroupNode::blend(view, name, prop);
}
}
void DoricFlexNode::blendSubNode(DoricViewNode *subNode,
QJsonValue flexConfig) {}
void DoricFlexNode::blendYoga(YGLayout *yoga, QJsonValue flexConfig) {}
void DoricFlexNode::blendYoga(YGLayout *yoga, QString name, QJsonValue prop) {}

28
doric-Qt/example/doric/shader/DoricFlexNode.h Normal file
View File

@ -0,0 +1,28 @@
#ifndef DORICFLEXNODE_H
#define DORICFLEXNODE_H
#include "DoricExport.h"
#include "shader/DoricStackNode.h"
#include "yoga/YGLayout.h"
class DORIC_EXPORT DoricFlexNode : public DoricGroupNode {
public:
using DoricGroupNode::DoricGroupNode;
QQuickItem *build() override;
virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
virtual void blendSubNode(DoricViewNode *subNode,
QJsonValue flexConfig) override;
private:
void blendYoga(YGLayout *yoga, QJsonValue flexConfig);
void blendYoga(YGLayout *yoga, QString name, QJsonValue prop);
};
#endif // DORICFLEXNODE_H

5
doric-Qt/example/doric/shader/DoricSuperNode.cpp
View File

@ -18,6 +18,11 @@ void DoricSuperNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
}
}
void DoricSuperNode::blendSubNode(DoricViewNode *subNode,
QJsonValue layoutConfig) {
subNode->blendLayoutConfig(layoutConfig);
}
void DoricSuperNode::mixinSubNode(QJsonValue subNode) {
QString id = subNode["id"].toString();
QList<QString> keys = subNodes.keys();

2
doric-Qt/example/doric/shader/DoricSuperNode.h
View File

@ -16,6 +16,8 @@ protected:
virtual void blendSubNode(QJsonValue subProperties) = 0;
virtual void blendSubNode(DoricViewNode *subNode, QJsonValue layoutConfig);
void recursiveMixin(QJsonValue src, QJsonValue target);
public: