add border for h & v layout, stack, scroller & text
fix background color transparent
This commit is contained in:
王劲鹏 2021-04-19 14:05:21 +08:00 committed by osborn
parent e42b5c8400
commit bb03b8b5a3
7 changed files with 102 additions and 81 deletions

View File

@ -29,6 +29,16 @@ Rectangle {
color = backgroundColor
}
property var borderWidth: 0
onBorderWidthChanged: {
border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
border.color = borderColor
}
MouseArea {
anchors.fill: parent
onClicked: {

View File

@ -27,6 +27,16 @@ ScrollView {
bg.color = backgroundColor
}
property var borderWidth: 0
onBorderWidthChanged: {
bg.border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
bg.border.color = borderColor
}
onWidthChanged: {
bg.implicitWidth = width
console.log(tag, uuid + " onWidthChanged: " + this.width)

View File

@ -29,6 +29,16 @@ Rectangle {
color = backgroundColor
}
property var borderWidth: 0
onBorderWidthChanged: {
border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
border.color = borderColor
}
MouseArea {
anchors.fill: parent
onClicked: {

View File

@ -64,6 +64,20 @@ TextArea {
this.text = tempText
}
onTextChanged: {
console.log(tag, uuid + " onTextChanged: " + this.text)
}
property var borderWidth: 0
onBorderWidthChanged: {
bg.border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
bg.border.color = borderColor
}
MouseArea {
anchors.fill: parent
onClicked: {

View File

@ -29,6 +29,16 @@ Rectangle {
color = backgroundColor
}
property var borderWidth: 0
onBorderWidthChanged: {
border.width = borderWidth
}
property var borderColor: ""
onBorderColorChanged: {
border.color = borderColor
}
MouseArea {
anchors.fill: parent
onClicked: {

View File

@ -105,14 +105,15 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
} else if (name == "height") {
getLayouts()->setHeight(prop.toDouble());
} else if (name == "backgroundColor") {
QString color = DoricUtils::doricColor(prop.toInt()).name();
view->setProperty("backgroundColor", color);
view->setProperty(
"backgroundColor",
QVariant::fromValue(DoricUtils::doricColor(prop.toInt())));
} else if (name == "x") {
getLayouts()->setMarginLeft(prop.toDouble());
} else if (name == "y") {
getLayouts()->setMarginTop(prop.toDouble());
} else if (name == "corners") {
view->setProperty("radius", prop.toInt());
view->setProperty("radius", prop.toDouble());
} else if (name == "onClick") {
if (prop.isString())
clickFunction = prop.toString();
@ -123,6 +124,11 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
getLayouts()->setPaddingBottom(prop["bottom"].toDouble());
} else if (name == "hidden") {
getLayouts()->setDisabled(prop.toBool());
} else if (name == "border") {
qreal borderWidth = prop["width"].toDouble();
QString borderColor = DoricUtils::doricColor(prop["color"].toInt()).name();
view->setProperty("borderWidth", borderWidth);
view->setProperty("borderColor", borderColor);
} else if (name != "layoutConfig") {
qCritical() << name << ": " << prop.toString();
}

View File

@ -1,86 +1,47 @@
import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, layoutConfig, stack, Gravity } from "doric";
import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, layoutConfig } from "doric";
import { colors } from "./utils";
@Entry
class LayoutDemo extends Panel {
build(rootView: Group) {
hlayout([
vlayout([
stack([], {
width: 100,
height: 100,
backgroundColor: Color.RED,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.GREEN,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.BLUE,
layoutConfig: layoutConfig().just()
})
scroller(
vlayout(
[
text({
text: "五子棋",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30,
textColor: Color.WHITE,
backgroundColor: colors[0],
textAlignment: gravity().center(),
height: 50,
}),
hlayout(
[
text({
text: "当前:",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWeight(1),
height: 50,
backgroundColor: colors[1],
}),
text({
text: "获胜方:",
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().just().configWeight(1),
height: 50,
backgroundColor: colors[2],
}),
],
{
layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
}),
], {
width: 100,
height: 300,
layoutConfig: layoutConfig().just()
}),
vlayout([
stack([], {
width: 100,
height: 100,
backgroundColor: Color.GREEN,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.BLUE,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.RED,
layoutConfig: layoutConfig().just()
})
], {
width: 100,
height: 300,
layoutConfig: layoutConfig().just()
}),
vlayout([
stack([], {
width: 100,
height: 100,
backgroundColor: Color.BLUE,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.RED,
layoutConfig: layoutConfig().just()
}),
stack([], {
width: 100,
height: 100,
backgroundColor: Color.GREEN,
layoutConfig: layoutConfig().just()
})
], {
width: 100,
height: 300,
layoutConfig: layoutConfig().just()
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse('#ecf0f1'),
})
], {
width: 400,
height: 300,
layoutConfig: layoutConfig().just(),
backgroundColor: Color.BLACK
}).in(rootView)
).in(rootView)
}
}