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