Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom QML Component: Put children into Rowlayout



  • 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?




Log in to reply