Unsolved Can't set GroupBox title color with Qt 5.6
-
Is there a way to set the color for the GroupBox title?
The Qt 5.6 reference documentation for the GroupBox control (that pops up via the F1 key iniside Qt Creator) mentions that there are 3 visual items (background, frame, label) to customize a GroupBox.
But when i try to put the code snippet from the help docs for customizing the label of the groupbox into my own QML file, Qt complains with "Cannot assign to non-existent property 'label'".
Were these 3 visual items removed in Qt 5.6? Is there any way to set the title color besides black?
-
@Jixer Hi, and welcome to the Qt forum! Please show us your code :-)
-
Hi and yes seeing code would make more sense.
I just created a simple Qt Quick application where I created 3 tabs and in the first tab, I have a groupbox with three labels inside.
I didn't want the default white background, so I made the background black. In doing so, I had to change the text of my controls to white. The only thing I cannot change the color of is the groupbox title.
The code snippet from the help docs for customizing the label of the groupbox shows the following:
label: Text { x: control.leftPadding width: control.availableWidth text: control.title font: control.font color: control.enabled ? "#353637" : "#bdbebf" elide: Text.ElideRight horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter }
Maybe I coded it incorrectly, but I tried to set the groupbox title color to blue in with the following code:
label: Text { color: "blue" text: groupBox1.title }
But doing so, causes an error where I can't see any of my controls (i.e., tab contents are blank). If I remove the above lines, then the controls show up, but the title color is black.
Here's is my code (Tab2.qml and Tab3.qml are currently empty):
main.qml:
import QtQuick 2.6 import QtQuick.Controls 1.5 import QtQuick.Dialogs 1.2 import QtQuick.Controls.Styles 1.4 ApplicationWindow { visible: true width: 1024 height: 768 color: "#000000" title: qsTr("Test App") menuBar: MenuBar { Menu { title: qsTr("File") MenuItem { text: qsTr("&Open") onTriggered: console.log("Open action triggered"); } MenuItem { text: qsTr("Exit") onTriggered: Qt.quit(); } } } MainForm { anchors.fill: parent TabView { id: tabView1 anchors.fill: parent anchors.margins: 4 x: 0 y: 8 width: parent.width height: 655 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.leftMargin: 8 anchors.topMargin: 8 currentIndex: 0 style: TabViewStyle { frameOverlap: 1 tab: Rectangle { color: styleData.selected ? "#666666" :"#494949" border.color: "#777777" implicitWidth: Math.max(text.width + 4, 80) implicitHeight: 20 radius: 2 Text { id: text anchors.centerIn: parent text: styleData.title color: "white" } } frame: Rectangle { color: "black" } } Tab { id: tab1 source: "presets.qml" title: "Presets" } Tab { id: tab2 source: "Tab2.qml" title: "Tab2" } Tab { id: tab3 source: "Tab3.qml" title: "Tab3" } } } }
Tab1.qml:
import QtQuick 2.3 import QtQuick.Controls 1.5 import QtQuick.Dialogs 1.2 Item { anchors.fill: parent GridView { id: gridViewPresets x: 0 y: 23 width: 1024 height: 590 cellWidth: 70 cellHeight: 70 GroupBox { id: groupBox1 x: 8 y: 0 width: 990 height: 197 title: qsTr("Presets") label: Text { color: "blue" text: groupBox1.title } Label { id: label1 x: 0 y: 16 width: 108 height: 13 color: "#ffffff" text: qsTr("Label 1:") } Label { id: label2 x: 0 y: 52 width: 126 height: 13 color: "#ffffff" text: qsTr("Label 2:") } } }
-
Actually, I found something.
If I replace
import QtQuick.Controls 1.5
with
import Qt.labs.controls 1.0
then the groupbox title will be blue. BUT the nice thick frame around the groupbox will be replaced with a thin line and the alignment of my controls will be off (everything is the way it should be when using
QtQuick.Controls 1.5)Hopefully the label property of the groupbox will be included in an update to QtQuick.Controls.
-
Put items withing GroupBox inside an Layout (Row or Column). Than it will be placed correctly with Qt.labs control's GroupBox