Problems laying out a splitter application

[ftkalcevic]

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; } }
}

}

@