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

Trouble with toolbar layout



  • I have an ApplicationWindow with a toolbar, and inside the toolbar I'm using a RowLayout to try and place some comboboxes. No matter what I try, the comboboxes end up on top of each other.

    main.qml:

    ApplicationWindow {
        id: root
        visible: true
        color: "black"
        minimumHeight: 600
        minimumWidth: 875
        width: Screen.width * 0.8
        height: Screen.height * 0.8
        title: qsTr("Main GUI")    
    
        toolBar: ToolBar {
            id: toolbar
            style: MyToolBarStyle {}
    
        RowLayout {
            
                ComboBox {
                    id: cboEnginesPage
                    style: MyEnginesComboBoxStyle{}
    
                } // combobox
    
                ComboBox {
                    id: cboGaugeAlignment
                    x: cboEnginesPage.width
                    style: MyGaugeAlignmentComboBoxStyle{}
    
                }//ComboBox
            }//RowLayout
        } // toolbar
    
    // Other layouts down here
    
    }
    
    

    MyToolBarStyle:

    import QtQuick 2.9
    import QtQuick.Controls 1.0
    import QtQuick.Controls.Styles 1.4
    
    
    ToolBarStyle {
        id: styleToolBar
            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            }
            background: Rectangle {
                //implicitWidth: 100
                implicitHeight: 40
                border.color: "#999"
                gradient: Gradient {
                    GradientStop { position: 0 ; color: "#fff" }
                    GradientStop { position: 1 ; color: "#555" }
                }
            }
        }
    

    I don't know if the styling of the ComboBoxes is interfering with things? Here is code from one of them:

    import QtQuick 2.6
    import QtQuick.Controls 2.1
    
    ComboBox {
        id: needleControl
        model: ["Gauges Normal ", "Needles Up "]
    
        delegate: ItemDelegate {
            width: needleControl.width
            contentItem: Text {
                text: modelData
                color: "#0e0e0e"
                font: needleControl.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
            highlighted: needleControl.highlightedIndex === index
        }
    
        indicator: Canvas {
            id: canvas
            x: needleControl.width - width - needleControl.rightPadding
            y: needleControl.topPadding + (needleControl.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"
    
            Connections {
                target: needleControl
                onPressedChanged: canvas.requestPaint()
            }
    
            Connections {
                target: needleControl
                onActivated: setNeedlesUp()
    
            function setNeedlesUp() {
                if (needleControl.currentText==="Gauges Normal ") {
                    needlesUp = false
                }
                if (needleControl.currentText==="Needles Up ") {
                    needlesUp = true
                }
            }//function
        }
    
            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = needleControl.pressed ? "#a3a3a3" : "#000000";
                context.fill();
            }
        }
    
        contentItem: Text {
            leftPadding: 8
            rightPadding: needleControl.indicator.width + needleControl.spacing
    
            text: needleControl.displayText
            font: needleControl.font
            color: needleControl.pressed ? "#a3a3a3" : "#000000"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    
        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            border.color: needleControl.pressed ? "#a3a3a3" : "#000000"
            border.width: needleControl.visualFocus ? 2 : 1
            radius: 2
        }
    
        popup: Popup {
            y: needleControl.height - 1
            width: needleControl.width
            implicitHeight: contentItem.implicitHeight
            padding: 1
    
            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: needleControl.popup.visible ? needleControl.delegateModel : null
                currentIndex: needleControl.highlightedIndex
    
                ScrollIndicator.vertical: ScrollIndicator { }
            }
    
            background: Rectangle {
                border.color: "#000000"
                radius: 2
            }
        }
    }
    

    At run-time, I also get these errors related to the combobox styling:

    QML debugging is enabled. Only use this in a safe environment.
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:462:21: Unable to assign [undefined] to int
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:456: TypeError: Cannot read property 'dropDownButtonWidth' of null
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:462:21: Unable to assign [undefined] to int
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:456: TypeError: Cannot read property 'dropDownButtonWidth' of null
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:584: TypeError: Cannot read property 'height' of null
    file:///C:/Qt/5.11.2/mingw53_32/qml/QtQuick/Controls/ComboBox.qml:584: TypeError: Cannot read property 'height' of null

    Any help is appreciated - I've been banging my head against this one for half the day.

    -Scott


Log in to reply