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

complete fit most & just with children rect & parent width, height

Browse Source
This commit is contained in:
王劲鹏 2021-03-15 15:30:17 +08:00 committed by osborn
parent 6c8c3d69bc
commit 23882e6088
14 changed files with 310 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doric-Qt/doric/main.cpp
View File

@ -11,6 +11,9 @@ int main(int argc, char *argv[]) {
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
qmlRegisterType<FlexLayoutService>("pub.doric.widget", 1, 0,
"FlexLayoutService");
// const QUrl url(QStringLiteral("qrc:/doric/qml/test-layout.qml"));
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(
&engine, &QQmlApplicationEngine::objectCreated, &app,
@ -20,12 +23,11 @@ int main(int argc, char *argv[]) {
},
Qt::QueuedConnection);
DoricDemoBridge *demoBridge = new DoricDemoBridge();
auto context = engine.rootContext();
DoricDemoBridge *demoBridge = new DoricDemoBridge();
context->setContextProperty("demoBridge", demoBridge);
engine.load(url);
qmlRegisterType<FlexLayoutService>("pub.doric.widget", 1, 0,
"FlexLayoutService");
return app.exec();
}

20
doric-Qt/doric/qml.qrc
View File

@ -1,7 +1,7 @@
<RCC>
<qresource prefix="/">
<file alias="main.qml">./resources/main.qml</file>
<file alias="qtquickcontrols2.conf">./resources/qtquickcontrols2.conf</file>
<file alias="main.qml">resources/main.qml</file>
<file alias="qtquickcontrols2.conf">resources/qtquickcontrols2.conf</file>
</qresource>
<qresource prefix="/doric">
<file alias="doric-sandbox.es5.js">../../doric-js/bundle/doric-sandbox.es5.js</file>
@ -12,12 +12,14 @@
<file alias="Snake.es5.js">../../doric-demo/bundle/src/Snake.es5.js</file>
</qresource>
<qresource prefix="/doric/qml">
<file alias="Flex.qml">./resources/Flex.qml</file>
<file alias="view.qml">./resources/view.qml</file>
<file alias="panel.qml">./resources/panel.qml</file>
<file alias="stack.qml">./resources/stack.qml</file>
<file alias="vlayout.qml">./resources/vlayout.qml</file>
<file alias="hlayout.qml">./resources/hlayout.qml</file>
<file alias="text.qml">./resources/text.qml</file>
<file alias="Flex.qml">resources/Flex.qml</file>
<file alias="view.qml">resources/view.qml</file>
<file alias="panel.qml">resources/panel.qml</file>
<file alias="stack.qml">resources/stack.qml</file>
<file alias="vlayout.qml">resources/vlayout.qml</file>
<file alias="hlayout.qml">resources/hlayout.qml</file>
<file alias="text.qml">resources/text.qml</file>
<file alias="util.mjs">resources/util.mjs</file>
<file>test-layout.qml</file>
</qresource>
</RCC>

62
doric-Qt/doric/resources/hlayout.qml
View File

@ -1,9 +1,61 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
Flex {
flexDirection: "row"
justifyContent: "flexStart"
alignItems: "flexStart"
alignContent: "flexStart"
import "util.mjs" as Util
Rectangle {
property var uuid: Util.uuidv4()
property int widthSpec: 0
property int heightSpec: 0
property int childrenRectWidth: childrenRect.width
property int childrenRectHeight: childrenRect.height
property var tag: "HLayout"
onWidthChanged: () => {
console.log(tag, uuid + " onWidthChanged: " + this.width)
}
onHeightChanged: () => {
console.log(tag, uuid + " onHeightChanged: " + this.height)
}
onWidthSpecChanged: () => {
console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
console.log(tag, uuid + " parent width: " + parent.width)
if (this.widthSpec === 2) {
this.width = parent.width
}
}
onHeightSpecChanged: () => {
console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
console.log(tag, uuid + " parent height: " + parent.height)
if (this.heightSpec === 2) {
this.height = parent.height
}
}
onChildrenRectChanged: () => {
console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
console.log(tag, uuid + " childrenRect: " + uuid + " onChildrenRectChanged: " +childrenRect)
this.childrenRectWidth = childrenRect.width
this.childrenRectHeight = childrenRect.height
if (this.widthSpec === 1) {
this.width = childrenRectWidth
}
if (this.heightSpec === 1) {
this.height = childrenRectHeight
}
}
color: 'transparent'
RowLayout {
spacing: 0
}
}

8
doric-Qt/doric/resources/panel.qml
View File

@ -1,12 +1,6 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
Flex {
flexDirection: "row"
justifyContent: "flexStart"
alignItems: "flexStart"
alignContent: "flexStart"
flexWrap: "noWrap"
Rectangle {
color: 'cyan'
}

53
doric-Qt/doric/resources/stack.qml
View File

@ -1,6 +1,57 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
Flex {
import "util.mjs" as Util
Rectangle {
property var uuid: Util.uuidv4()
property int widthSpec: 0
property int heightSpec: 0
property int childrenRectWidth: childrenRect.width
property int childrenRectHeight: childrenRect.height
property var tag: "Stack"
onWidthChanged: () => {
console.log(tag, uuid + " onWidthChanged: " + this.width)
}
onHeightChanged: () => {
console.log(tag, uuid + " onHeightChanged: " + this.height)
}
onWidthSpecChanged: () => {
console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
console.log(tag, uuid + " parent width: " + parent.width)
if (this.widthSpec === 2) {
this.width = parent.width
}
}
onHeightSpecChanged: () => {
console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
console.log(tag, uuid + " parent height: " + parent.height)
if (this.heightSpec === 2) {
this.height = parent.height
}
}
onChildrenRectChanged: () => {
console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
console.log(tag, uuid + " childrenRect: " + uuid + " onChildrenRectChanged: " +childrenRect)
this.childrenRectWidth = childrenRect.width
this.childrenRectHeight = childrenRect.height
if (this.widthSpec === 1) {
this.width = childrenRectWidth
}
if (this.heightSpec === 1) {
this.height = childrenRectHeight
}
}
color: 'transparent'
}

4
doric-Qt/doric/resources/text.qml
View File

@ -1,7 +1,9 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
Flex {
Rectangle {
color: 'transparent'
Text {
}

8
doric-Qt/doric/resources/util.mjs Normal file
View File

@ -0,0 +1,8 @@
// util.mjs
export function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

61
doric-Qt/doric/resources/vlayout.qml
View File

@ -1,10 +1,61 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
Flex {
flexDirection: "column"
justifyContent: "flexStart"
alignItems: "flexStart"
alignContent: "flexStart"
import "util.mjs" as Util
Rectangle {
property var uuid: Util.uuidv4()
property int widthSpec: 0
property int heightSpec: 0
property int childrenRectWidth: childrenRect.width
property int childrenRectHeight: childrenRect.height
property var tag: "VLayout"
onWidthChanged: () => {
console.log(tag, uuid + " onWidthChanged: " + this.width)
}
onHeightChanged: () => {
console.log(tag, uuid + " onHeightChanged: " + this.height)
}
onWidthSpecChanged: () => {
console.log(tag, uuid + " onWidthSpecChanged: " + this.widthSpec)
console.log(tag, uuid + " parent width: " + parent.width)
if (this.widthSpec === 2) {
this.width = parent.width
}
}
onHeightSpecChanged: () => {
console.log(tag, uuid + " onHeightSpecChanged: " + this.heightSpec)
console.log(tag, uuid + " parent height: " + parent.height)
if (this.heightSpec === 2) {
this.height = parent.height
}
}
onChildrenRectChanged: () => {
console.log(tag, uuid + " widthSpec: " + widthSpec + " heightSpec: " + heightSpec)
console.log(tag, uuid + " childrenRect: " + uuid + " onChildrenRectChanged: " +childrenRect)
this.childrenRectWidth = childrenRect.width
this.childrenRectHeight = childrenRect.height
if (this.widthSpec === 1) {
this.width = childrenRectWidth
}
if (this.heightSpec === 1) {
this.height = childrenRectHeight
}
}
color: 'transparent'
ColumnLayout {
spacing: 0
}
}

35
doric-Qt/doric/shader/DoricGroupNode.cpp
View File

@ -23,6 +23,12 @@ void DoricGroupNode::blend(QJSValue jsValue) {
}
void DoricGroupNode::configChildNode() {
QQuickItem *parent = nullptr;
if (mType.isEmpty() || mType == "Stack") {
parent = mView;
} else {
parent = mView->childItems().at(0);
}
for (int idx = 0; idx < mChildViewIds.size(); idx++) {
QString id = mChildViewIds.at(idx);
QJSValue model = getSubModel(id);
@ -53,17 +59,18 @@ void DoricGroupNode::configChildNode() {
if (newNode != nullptr) {
newNode->setId(id);
newNode->init(this);
newNode->blend(model.property("props"));
if (idx >= mChildNodes.size()) {
mChildNodes.append(newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->setParentItem(parent);
} else {
mChildNodes.insert(idx, newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->setParentItem(parent);
newNode->getNodeView()->stackBefore(
mView->childItems().at(idx));
parent->childItems().at(idx));
}
newNode->blend(model.property("props"));
}
}
} else {
@ -80,24 +87,25 @@ void DoricGroupNode::configChildNode() {
if (position >= 0) {
// Found swap idx,position
mChildNodes.swapItemsAt(position, idx);
mView->childItems().swapItemsAt(position, idx);
parent->childItems().swapItemsAt(position, idx);
} else {
// Not found,insert
DoricViewNode *newNode = DoricViewNode::create(getContext(), type);
if (newNode != nullptr) {
newNode->setId(id);
newNode->init(this);
newNode->blend(model.property("props"));
if (idx >= mChildNodes.size()) {
mChildNodes.append(newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->setParentItem(parent);
} else {
mChildNodes.insert(idx, newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->setParentItem(parent);
newNode->getNodeView()->stackBefore(
mView->childItems().at(idx));
parent->childItems().at(idx));
}
newNode->blend(model.property("props"));
}
}
}
@ -108,16 +116,17 @@ void DoricGroupNode::configChildNode() {
if (newNode != nullptr) {
newNode->setId(id);
newNode->init(this);
newNode->blend(model.property("props"));
if (idx >= mChildNodes.size()) {
mChildNodes.append(newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->setParentItem(parent);
} else {
mChildNodes.insert(idx, newNode);
newNode->getNodeView()->setParentItem(mView);
newNode->getNodeView()->stackBefore(mView->childItems().at(idx));
newNode->getNodeView()->setParentItem(parent);
newNode->getNodeView()->stackBefore(parent->childItems().at(idx));
}
newNode->blend(model.property("props"));
}
}
}

2
doric-Qt/doric/shader/DoricHLayoutNode.cpp
View File

@ -16,7 +16,7 @@ QQuickItem *DoricHLayoutNode::build() {
void DoricHLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
if (name == "space") {
view->setProperty("spacing", prop.toInt());
view->childItems().at(0)->setProperty("spacing", prop.toInt());
} else if (name == "gravity") {
switch (prop.toInt()) {
case 1:

2
doric-Qt/doric/shader/DoricVLayoutNode.cpp
View File

@ -16,7 +16,7 @@ QQuickItem *DoricVLayoutNode::build() {
void DoricVLayoutNode::blend(QQuickItem *view, QString name, QJSValue prop) {
if (name == "space") {
view->setProperty("spacing", prop.toInt());
view->childItems().at(0)->setProperty("spacing", prop.toInt());
} else if (name == "gravity") {
switch (prop.toInt()) {
case 1:

42
doric-Qt/doric/shader/DoricViewNode.cpp
View File

@ -5,34 +5,36 @@
#include "DoricViewNode.h"
void DoricViewNode::blendLayoutConfig(QJSValue jsObject) {
this->mLayoutConfig = jsObject;
QJSValue margin = jsObject.property("margin");
QJSValue widthSpec = jsObject.property("widthSpec");
QJSValue heightSpec = jsObject.property("heightSpec");
if (widthSpec.isNumber()) {
switch (widthSpec.toInt()) {
case 0:
mView->setProperty("widthSpec", 0);
break;
case 1:
qCritical() << 1;
mView->setProperty("widthSpec", 1);
break;
case 2:
qCritical() << 2;
break;
default:
qCritical() << "default";
mView->setProperty("widthSpec", 2);
break;
}
}
if (heightSpec.isNumber()) {
switch (heightSpec.toInt()) {
case 0:
mView->setProperty("heightSpec", 0);
break;
case 1:
qCritical() << 1;
mView->setProperty("heightSpec", 1);
break;
case 2:
qCritical() << 2;
break;
default:
qCritical() << "default";
mView->setProperty("heightSpec", 2);
break;
}
}
@ -80,12 +82,30 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJSValue prop) {
if (!prop.isNumber()) {
return;
}
if (this->mLayoutConfig.isUndefined()) {
view->setWidth(prop.toInt());
} else {
QJSValue widthSpec = this->mLayoutConfig.property("widthSpec");
if (widthSpec.isNumber()) {
if (widthSpec.toInt() == 0) {
view->setWidth(prop.toInt());
}
}
}
} else if (name == "height") {
if (!prop.isNumber()) {
return;
}
if (this->mLayoutConfig.isUndefined()) {
view->setHeight(prop.toInt());
} else {
QJSValue heightSpec = this->mLayoutConfig.property("heightSpec");
if (heightSpec.isNumber()) {
if (heightSpec.toInt() == 0) {
view->setHeight(prop.toInt());
}
}
}
} else if (name == "backgroundColor") {
QString color = DoricUtils::doricColor(prop.toNumber()).name();
view->setProperty("color", color);
@ -95,6 +115,8 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJSValue prop) {
view->setProperty("y", prop.toInt());
} else if (name == "corners") {
view->setProperty("radius", prop.toInt());
} else if (name == "layoutConfig") {
} else {
qCritical() << name << ": " << prop.toString();
}

5
doric-Qt/doric/shader/DoricViewNode.h
View File

@ -20,9 +20,12 @@ protected:
private:
QString mId;
QString mType;
QJSValue mLayoutConfig;
public:
QString mType;
using DoricContextHolder::DoricContextHolder;
void init(DoricSuperNode *superNode);

54
doric-Qt/doric/test-layout.qml Normal file
View File

@ -0,0 +1,54 @@
import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.15
ApplicationWindow {
visible: true
width: 450
height: 800
title: qsTr("Scroll")
Rectangle {
color: 'red'
width: childrenRect.width
height: childrenRect.height
RowLayout {
spacing: 0
Rectangle {
width: 100
height: 100
color: 'black'
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
}
Rectangle {
Layout.topMargin: 30
width: 100
height: 100
color: 'yellow'
}
Rectangle {
Layout.topMargin: 0
width: 100
height: 100
color: 'black'
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
}
Rectangle {
width: 100
height: 100
color: 'yellow'
}
Rectangle {
width: 100
height: 100
color: 'black'
}
Rectangle {
width: 100
height: 100
color: 'yellow'
}
}
}
}