Problems laying out a splitter application



  • I've been pulling my hair out trying to get the layout of my qml application correct.

    My app has 2 splitters - a vertical splitter that splits the window into a top and bottom half, and a horizontal splitter that splits the top into a left and right.

    On the top right I have a tabview which fills the split area.

    On the top left, I have a tab view and under that I have a collections of controls. This is the bit I can't get working the way I want to.

    The collection of controls, (GroupBox, id:overrides) do not resize the way I want. I want the labels to be fixed size, and the slider controls to resize as move the splitter. I've tried specifying Layout.minimumWidth and Layout.maximumWidth, but they are alway a fixed size (specifiying preferedWidth makes the fixed at preferedWidth size).

    I also get strange behaviours when I change the (GroupBox, id:overrides) to a Rectangle. In the attached cut down sample, you can't see the effect - the controls just disappear, but on the full version, the controls are drawn on top of the tab view.

    Although I am close to getting this working, it really isn't the way I wanted to layout the controls. What I really wanted was to use a 2 column Grid, then place a Row layout in column 1 with 2 labels, with Label 2 being right aligned, then the Slider in column 2. Like this...

    @{Grid col=2}{Row}Label1 Label2{/Row}Slider@

    But I couldn't get the right alignment to work.

    Here's a cut down version of my qml. It can be viewed with qmlscene. Moving the splitter between the red and blue tabs doesn't resize the controls under the red tab...

    @
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.1
    import QtQuick.Dialogs 1.1

    ApplicationWindow {
    title: "Nexis"
    width: 640
    height: 480

    property real minSliderWidth: 50
    property real maxSliderWidth: 200
    
    SplitView {
        anchors.fill: parent
        orientation: Qt.Vertical
    
        SplitView {
            orientation: Qt.Horizontal
    
            GridLayout {
                columns: 1
    
                TabView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Tab {
                        title: "Manual Control"
                        id: manualControl
                        Rectangle { color: "red"; Text {text: "Manual Control";anchors.centerIn: parent;font.pointSize: 18} }
                    }
                    Tab {
                        title: "MDI"
                        id: mdi
                        Rectangle { color: "pink"; Text { text: "MDI"; anchors.centerIn: parent;font.pointSize: 18} }
                    }
                }
    
                GroupBox {
                    id: overrides
                    Layout.fillHeight: true
                    Layout.fillWidth: true
    
                    GridLayout {
                        columns: 3
                        Label {
                            text: "Feed Override"
                        }
                        Label {
                            Layout.alignment: Qt.AlignRight
                            text: Math.round(sliderFeedOverride.value) + "%"
                        }
                        Slider {
                            id: sliderFeedOverride
                            minimumValue: 0
                            maximumValue: 150
                            Layout.minimumWidth: minSliderWidth
                            Layout.maximumWidth: maxSliderWidth
                        }
    
                        Label {
                            text: "Max Velocity"
                        }
                        Label {
                            Layout.alignment: Qt.AlignRight
                            text: Math.round(sliderMaxVel.value) + " mm/min"
                        }
                        Slider {
                            id: sliderMaxVel
                            minimumValue: 0
                            maximumValue: 3600
                            Layout.minimumWidth: minSliderWidth
                            Layout.maximumWidth: maxSliderWidth
                        }
                    }
                }
            }
    
            TabView {
                Tab {
                    title: "Preview"
                    Rectangle { color: "blue"; Text { text: "Preview"; anchors.centerIn: parent; font.pointSize: 18 } }
                }
                Tab {
                    title: "DRO"
                    Rectangle { color: "light blue"; Text { text: "DRO"; anchors.centerIn: parent; font.pointSize: 18; } }
                }
            }
        }
        Rectangle { color: "grey"; Text { text: "GCode Display"; anchors.centerIn: parent; font.pointSize: 18; } }
    }
    

    }

    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.