Custom QML Component: Put children into Rowlayout

maxwell31

Hi,

I am working on a Toolbar with sections. Depending on context, the sections should be visible or not. I am wondering, if I can make the plotSection Item a component, which I could reuse for other sections. Here is my current code:

import QtQuick 2.10
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.12
import Style 1.0

ToolBar {
    id: mainToolBar
    objectName: "mainToolBar"

    RowLayout {
        Item {
            id: plotSection
            width: bRow.implicitWidth
            implicitHeight: bRow.implicitHeight+15+Style.marginTiny
            Row {
                id: bRow
                ToolButton {
                    text: "Save plot"
                    icon.source: "../icons/file-export-solid.svg"
                    onClicked: {
                        savePlot()
                    }
                }
                ToolButton {
                    id: showfullrange
                    text: "Zoom to data range"
                    icon.source: "../icons/full_screen_2.svg"
                    icon.width: 24
                    icon.height: 24
                    onClicked: {
                        plotCpp.resetViewFullRange()
                    }
                }
                ToolButton {
                    id: resetview
                    text: "Zoom to standard range"
                    icon.source: "../icons/full_screen.svg"
                    icon.width: 24
                    icon.height: 24
                    onClicked: {
                        plotCpp.resetView()
                    }
                }
            }
            SectionLabel {
                anchors {bottom: parent.bottom; right: parent.right; left: parent.left; bottomMargin: Style.marginTiny}
                text: "Plot"
            }
        }
    }
}

IIdeally, I would like to use it like this:

ToolbarSection {
    label: "Plots"
    ToolButton {
                    text: "Save plot"
                    icon.source: "../icons/file-export-solid.svg"
                    onClicked: {
                        savePlot()
                    }
                }
                ToolButton {
                    id: showfullrange
                    text: "Zoom to data range"
                    icon.source: "../icons/full_screen_2.svg"
                    icon.width: 24
                    icon.height: 24
                    onClicked: {
                        plotCpp.resetViewFullRange()
                    }
                }
                ToolButton {
                    id: resetview
                    text: "Zoom to standard range"
                    icon.source: "../icons/full_screen.svg"
                    icon.width: 24
                    icon.height: 24
                    onClicked: {
                        plotCpp.resetView()
                    }
                }
}

However, I would not know how to give the children of this ToolbarSection to be inside the Row of the ToolBarSection component. Is this even possible?

maxwell31

This is what I have been looking for:
https://together.jolla.com/question/4717/how-to-position-nested-items-in-a-qml-component/