Solved How to optimize the code
-
Hi All,
I have a fallowing code where i am using multiple rectangle and i need to optimize the code ,
can anyone suggest me to do the same.Sample code:
Each rectangle will take a different color based on backend input .
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12Window {
id: rootvisible: true width: 640 height: 480 title: qsTr("Hello World") color: 'lightgray' Column { anchors.rightMargin: 0 anchors.bottomMargin: -2 anchors.leftMargin: 0 anchors.topMargin: 0 anchors.fill: parent Rectangle { width: parent.width height: 35 color: Colors.menuHeaderBackground Text { color: Colors.menuHeaderText text: "Safety Lidars" font.bold: true font.pointSize: 14 font.capitalization: Font.AllUppercase anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter } } Rectangle { width: parent.width height: 300 color: Colors.menuBodyBackground Rectangle { x: 300 y: 0 width: 40 height: width color: "#008000" } Rectangle { x: 248 y: 19 width: 40 height: width color: "#008000" } Rectangle { x: 402 y: 50 width: 40 height: width color: "#008000" } Rectangle { x: 351 y: 19 width: 40 height: width color: "#008000" } Rectangle { x: 196 y: 51 width: 40 height: width color: "#008000" } Rectangle { x: 270 y: 100 width: 100 height: width color: "#008000" } Rectangle { x: 224 y: 130 width: 40 height: width color: "#008000" } Rectangle { x: 376 y: 130 width: 40 height: width color: "#008000" } Rectangle { x: 300 y: 252 width: 40 height: width color: "#008000" } Rectangle { x: 351 y: 226 width: 40 height: width color: "#008000" } Rectangle { x: 402 y: 196 width: 40 height: width color: "#008000" } Rectangle { x: 248 y: 226 width: 40 height: width color: "#008000" } Rectangle { x: 196 y: 196 width: 40 height: width color: "#008000" } visible: isExpanded } }
}
Thanks in advance:)
-
Unless you have a very good reason to use constant x,y positioning - change it. Use Anchors, Layouts, Grid etc.
But anyway, assuming you have to use raw x,y for some reason, you can still simplify this. To generate multiple rectangles, use Repeater element. Different coordinates can be calculated using
index
attached property.So something like:
Repeater { property int margin: 12 Rectangle { x: index * (width + margin) y: index * (width + margin) width: 40 height: width color: "#008000" } }
You;ll need to tweak the algorithm of course, to match the exact patter of rectangles you want.
-
yes i have tried using repeater but i am looking for the excat pattern not sure how can i do it.
-
@sush123 You can use an object list to store your settings, like this:
Repeater { model: [ Qt.point(300, 0), Qt.point(248,19), Qt.point(402,50), Qt.point(351,19) ] Rectangle { x: modelData.x y: modelData.y width: 40 height: width color: "#008000" } }
Take a look at documentation for more details
-
Thank you i will try using the same :)
-
@sush123 Your welcome.
Of course, you can define your own object type, to add more settings. It is very ease:- first define you QML item with all required properties
- create an array with those items.
for example, create a QML file MySettings:
// MySettings.qml import QtQuick 2.12 QtObject { property int x: 0 property int y: 0 property color backColor: "#008000" }
And then simply use it in you other QML file:
Repeater { model: [ MySettings { x: 300; y: 0; backColor: "yellow" }, MySettings { x: 248; y: 19 }, MySettings { x: 402; y: 50 }, MySettings { x: 351; y: 19; backColor: "red" } ] Rectangle { x: modelData.x y: modelData.y width: 40 height: width color: modelData.backColor } }
It is quiet easy to extend, I think ;)
-
Thanks for the response,
i did fallow the same and i am getting error as :
"qrc:/main.qml:10 Type Safety unavailable
qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"SAMPLE:
Main.qml
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")Safety{
}
}MySettings.qml
QtObject {
property int x: 0
property int y: 0
property color backColor: "#008000"
}Safety.qml //Here im using repeater
Item {
id: safetyLidarWindow
property string colorPropertyMysettings{ }
Rectangle {
width: parent.width
height: 310
color: "grey"
Repeater {
model: [
Mysettings { x: 200; y: 30; backColor: "yellow" },
Mysettings { x: 148; y: 49 ; backColor: "green" },
Mysettings { x: 302; y: 80 ; backColor: "red" },
Mysettings { x: 251; y: 49; backColor: "red" },
Mysettings { x: 96; y: 80; backColor: "yellow" },
Mysettings { x: 124; y: 160 ; backColor: "green"},
Mysettings { x: 276; y: 160 ; backColor: "red" },
Mysettings { x: 200; y: 282; backColor: "red" },
Mysettings { x: 251; y: 256; backColor: "yellow" },
Mysettings { x: 302; y: 226; backColor: "red" },
Mysettings { x: 148; y: 256 ; backColor: "green"},
Mysettings { x: 96; y: 226; backColor: "red" }]
Rectangle {
x: modelData.x
y: modelData.y
width: 40
height: width
color: modelData.backColor
}
}
}Please tell me where i am doing mistake.
Thank you
-
@sush123 JavaScript/QML is case sensitive, so take care about this ==> MySettings != Mystettings
-
Sorry its my bad ,
Actually it is Mysettings.qml only i mean i have taken care of Cases its same everywhere but when i replied i posted MySettings.qml as file name.Error is "qrc:/main.qml:10 Type Safety unavailable
qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"also saw this link :
https://forum.qt.io/topic/17210/solved-qml-component-cannot-assign-multiple-values-to-a-singular-property/2But i did not got how i can use it in my case, please guide me.
Thank you.
-
@sush123 said in How to optimize the code:
qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"
What is exactly in line 42 in Safety.qml?
-
@KroMignon
Mysettings { x: 200; y: 30; backColor: "yellow" }, -
@sush123 My bad, it seems it is not working this way, you have to define a property to store the object list!
Simply change you Safety.qml file as follow:
Item { id: safetyLidarWindow property string colorProperty property list<Mysettings> myModel: [ Mysettings { x: 200; y: 30; backColor: "yellow" }, Mysettings { x: 148; y: 49 ; backColor: "green" }, Mysettings { x: 302; y: 80 ; backColor: "red" }, Mysettings { x: 251; y: 49; backColor: "red" }, Mysettings { x: 96; y: 80; backColor: "yellow" }, Mysettings { x: 124; y: 160 ; backColor: "green"}, Mysettings { x: 276; y: 160 ; backColor: "red" }, Mysettings { x: 200; y: 282; backColor: "red" }, Mysettings { x: 251; y: 256; backColor: "yellow" }, Mysettings { x: 302; y: 226; backColor: "red" }, Mysettings { x: 148; y: 256 ; backColor: "green"}, Mysettings { x: 96; y: 226; backColor: "red" }] Rectangle { width: parent.width height: 310 color: "grey" Repeater { model: myModel Rectangle { x: modelData.x y: modelData.y width: 40 height: width color: modelData.backColor } } } }
This should work
-
Yes it worked , thanks a lot :)