QML: Create two module inside one tab
-
Hi ! Here is my problem, I created a video module in QML and also a GPS module.
My GPS module is called GPS.qml and like this :import ... Item { id: mapping title: "Map" clip: true visible: true [Module implementation, it is quite long so I dont put everything but if needed I can]
Also my video module :
video.qml
import ... Tab { title: "RTSP stream" [same here, this is a quite long implementation but can copy past it if you want]
I would like to have page where my video take the biggest part of the area and where the map is small, on the bottom right of the window.
I didn't succeed to to this for now. I dont know if I must use Recangle, gridlayout or other thing, and, if I must, how should I do. I have a lot of difficulties with QML ><I am sorry if it is not clear, but it is enough to be understandable
Thanks for help :)
-
hi @Chanchan
one way to do it with QML Layout typeimport QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Layouts 1.3 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") // Components can be reusable components in separated .qml file // Gps.qml Component{ id:gps Item{ Rectangle{ anchors.fill: parent color :"lightgrey" } } } // Video.qml Component{ id:vid Item{ Rectangle{ anchors.fill: parent color :"lightblue" } } } RowLayout{ anchors.fill: parent Loader{//loads video sourceComponent: vid Layout.fillWidth: true Layout.fillHeight: true Layout.preferredHeight: parent.height Layout.preferredWidth: parent.width * 0.7 } Loader{//loads gps sourceComponent: gps Layout.fillWidth: true Layout.fillHeight: false Layout.preferredHeight: 80 Layout.preferredWidth: 80 Layout.alignment: Qt.AlignBottom } } }
-
-
@Chanchan said in QML: Create two module inside one tab:
Gps and Video modules
what do you mean by "modules" ? not this right ? I think you sould say "Component" (or maybe its me not understanding your question)
for me you have two .qml files Video.qml and Gps.qml so this are Your QML Reusable components, and you want to use this 2 components in a TabView .. so :
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls 1.4 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") TabView { anchors.fill: parent Tab { // tab 1 title: "Red" RowLayout{ anchors.fill: parent Video{// Your QML Reusable component Video.qml // ~~sourceComponent: vid //edited: no sourceComponent property here~~ Layout.fillWidth: true Layout.fillHeight: true Layout.preferredHeight: parent.height Layout.preferredWidth: parent.width * 0.7 } Gps{// Your QML Reusable component Gps.qml // ~~sourceComponent: gps //edited:no sourceComponent property here~~ Layout.fillWidth: true Layout.fillHeight: false Layout.preferredHeight: 80 Layout.preferredWidth: 80 Layout.alignment: Qt.AlignBottom } } } Tab { // tab 2 title: "Blue" Rectangle { color: "blue" } } Tab { // tab 3 title: "Green" Rectangle { color: "green" } } } }
edited to delete
-
Hi !
I have an issue with the code that I did not succeed to solve :import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls 1.4 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") TabView { anchors.fill: parent Tab { // tab 1 title: "Red" RowLayout{ anchors.fill: parent video{// Your QML Reusable component Video.qml sourceComponent: video Layout.fillWidth: true Layout.fillHeight: true Layout.preferredHeight: parent.height Layout.preferredWidth: parent.width * 0.7 } Gps{// Your QML Reusable component Gps.qml sourceComponent: mapgps Layout.fillWidth: true Layout.fillHeight: false Layout.preferredHeight: 80 Layout.preferredWidth: 80 Layout.alignment: Qt.AlignBottom } } } Tab { // tab 2 title: "Blue" Rectangle { color: "blue" } } Tab { // tab 3 title: "Green" Rectangle { color: "green" } } } }
I got a error on video{ "invalid property name" I dont know why because my qml file video has this name and id.
another one on : Gps{// Your QML Reusable component Gps.qml
sourceComponent: mapgps "Invalid Property Name sourceComponent"And when I try to build the code I get
"QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
file:///home/thales/TestGpsVideo/main.qml:28 Cannot assign to non-existent property "sourceComponent"I dont understand these errors referring to sourceComponent, reporting from the documentation I think I have used this well but it seems not so...
-
@Chanchan said in QML: Create two module inside one tab:
video{// Your QML Reusable component Video.qml
that ought to be a capital
V
-
sourceComponent: video // this was in my Loader exemple ! i forgot to delete it in the second exemple ! my bad
You have Video.qml and Gps.qml ? Right ? Is there a sourceComponent property in your files ? i guess no..
Please read some QML doc also ..If you have a QML file Gps.qml you just use it where you need like this :
Gps{ // ther is no sourceComponent here ... }
sourceComponent is a property of QML Loader type.