Qt / QML - Grouping and Reusing Elements - qt

Question

Could anyone point me in the right direction on how to best organise my QML?
Currently for common single components I make a new QML file and add it to a Common directory under my resources.
E.g. My Label.qml
Text{
width: parent.width * 0.5
height: parent.height * 0.1
color: "#ffffff"
font.underline: true
font.pointSize: 16
verticalAlignment: Text.AlignBottom
horizontalAlignment: Text.AlignLeft
}
And then in my Form.qml I can import and use it like this:
import "Common"
Page {
Label{
id: username_lbl
text: "Username"
anchors.topMargin: parent.height * 0.1
}
...
}
But how would I do the above if I want to group together multiple components and reference them for use with connections?
For example I'd like a pair of buttons that sit at the bottom of a page (below is just an example and doesn't work):
So I'd like to have a ButtonPair.qml which would like a bit like this:
Button {
id: left_btn
width: parent.width * 0.5
height: parent.height * 0.1
anchors.bottom: parent.bottom
anchors.right: parent.right
}
Button {
id: right_btn
width: parent.width * 0.5
height: parent.height * 0.1
anchors.bottom: parent.bottom
anchors.left: parent.left
}
And then in my Form.qml I'd like to use these buttons and add an event handler to each:
import "Common"
Page {
ButtonPair{id: back_forward_buttons}
Connections {
target: back_forward_buttons.left_btn
onClicked: {
stackView.pop();
}
Connections {
target: back_forward_buttons.right_btn
onClicked: {
stackView.push("AnotherPage.qml");
}
}
Do I need to wrap my ButtonPair in a Component and use a Loader on my page and if so how do I then get to the individual left/right buttons in order to bind to onClicked?

Answer 1

When a component is designed, it is considered a black box that has properties and signals that must be viewed from the outside.
For example in your case ButtonPair must expose 2 signals: one when the left button is pressed and another when the right button is pressed, another thing that I have added are 2 properties to be able to establish the name of the buttons.
I see that you have set the height of the buttons as 10% of the height of the father and should be in the lower part and if you want to use that same component on the top? I would have to create another topButtonPair component, and if I want them to be on the right, etc. For the size should be established when the component is created not in the implementation. In this case each button must occupy half of the parent item.
Using the above we obtain the following:
ButtonPair.qml
import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
Item{
// expose properties and signals
property string leftname: ""
property string rightname: ""
signal leftClicked()
signal rightClicked()
// internals
RowLayout{
anchors.fill: parent
spacing: 0
Button {
text: leftname
onClicked: leftClicked()
Layout.fillWidth: true
Layout.fillHeight: true
}
Button {
text: rightname
onClicked: rightClicked()
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
Note: The use of the layout is optional, you could use the anchors.
Now used on the page:
Page {
// other components
ButtonPair{
anchors.bottom: parent.bottom
height: 0.1*parent.height // <--- Here the height is established
anchors.left: parent.left
anchors.right: parent.right
leftname: "left text"
rightname: "right text"
onLeftClicked: console.log("left clicked")
onRightClicked: console.log("right clicked")
}
}

Answer 2

Generally, the black-box appraoch taken by #eyllanesc is the better one and should be preferred whenever possible. However, if you really need to access child items from the outside, you can:
ButtonPair.qml:
Item {
property alias leftButton: left_btn
property alias rightButton: right_btn
// … declarations of left_btn and right_btn as in your question
}
Usage:
ButtonPair {
leftButton {
onClicked: {
stackView.pop();
}
}
rightButton {
onClicked: {
stackView.push("AnotherPage.qml");
}
}
}
You can also use it in Connections. However, in 95% of cases you should forward properties and signals as in #eyllanesc’s approach, which leads to a much cleaner and readable interface.