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.1ApplicationWindow {
title: "Nexis"
width: 640
height: 480property 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; } } }
}
@