There is a very small combobox in my layout. Is it possible to increase the size for the elements when the combobox is established? The box itself shall stay small.
The QML controls are fully customizable, so you can create your own view, for example:
ComboBox {
id: control
anchors.centerIn: parent
model: ["First", "Second", "Third"]
background: Rectangle {
color: "lightgrey"
border {width: 1; color: "grey"}
implicitWidth: 50
implicitHeight: 30
}
contentItem: Label {
text: control.currentText.charAt(0)
font: control.font
padding: 4
verticalAlignment: Text.AlignVCenter
}
popup: Popup {
y: control.height - 1
width: 200
implicitHeight: contentItem.implicitHeight
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
}
}
}
Related
How can I change the color of the text inside the ComboBox, please help.
I tried the following but it says "Invalid property name 'style' " and I get the error "ComboBoxStyle is not a type".
ComboBox {
id:combobox_rectangle_ha_tipi_deger
width: parent.width/1.8
height: parent.height/1.3
Material.background: row_even
anchors.centerIn: parent
model: ["değer1", "değer2", "değer3"]
style:ComboBoxStyle{
textColor:"red"
}
}
#Moia's answer is right in that you usually need to provide your own implementation, but in some cases there are easier, less intrusive ways to customise stuff. For example, the Material style has attached style properties that can be set:
ComboBox {
model: 10
popup.Material.foreground: "red"
Material.accent: "green"
Material.foreground: "blue"
}
I set each property to a different colour so you can see which items are affected.
You're referring to an option of Qt Controls 1 which are deprecated and you sould use that and most likely you're correctly using the Qt Controls 2
Controls are "rich" component but they are just a composition of Item, Rectangles and whatever. Controls expose an ItemDelegate to customize their layout.
When you want to customize a default Control (instead of building one from scratch) you should refer to this page of the documentation:
https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-combobox
import QtQuick
import QtQuick.Controls
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
required property int index
required property var modelData
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
border.color: "#21be2b"
radius: 2
}
}
}
Since you just want to customize the text color, defining the delegate property should be enough:
ComboBox {
id: control
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "red"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
required property int index
required property var modelData
}
}
if you want to change ComboBox text color to change with a property binding, you could expose the property accordingly:
ComboBox {
id: control
property var textColor: "red"
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: control.textColor
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
required property int index
required property var modelData
}
}
I'm using the example from QML website on how to customize ComboBox as seen below:
#Combo.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
delegate: Rectangle {
color: "#080808"
Text {
anchors.fill: parent
text: modelData
}
}
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}
#main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Combo {
width: 200
height: 40
anchors.centerIn: parent
}
}
I added some new code to Combo.qml as seen above to turn the background of the ListView items to a darker color to match the background color of the Popup itself, but nothing is changing. The ListView background color for the items is always white. I'd appreciate some help on figuring this out. Thanks
There are two issues going on. First, the delegate: on the ComboBox apparently takes precedence over the delegate: on the ListView. Second, the ItemDelegate has some pretty specific highlighting behavior so you need to override it's background and the coloring behavior of it like this:
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
id: itemDelegate
width: control.width
background: Rectangle {
visible: itemDelegate.down || itemDelegate.highlighted || itemDelegate.visualFocus
color: itemDelegate.highlighted ? "#808080" : "#080808"
implicitWidth: 100
implicitHeight: 40
}
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
// delegate: Rectangle {
// width: parent.width
// height: 40
// color: "#080808"
// Text {
// anchors.fill: parent
// text: modelData
// }
// }
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}
I'm trying to set a new style to comboBox in qml and get in trouble my combobox doesn't want to show me drop-down list everything else is fine, here is code
The code I took from Internet
T.ComboBox {
id: _comboBox
anchors.bottom: _borderedTextboxPoints.top
anchors.horizontalCenter: _borderedTextboxPoints.horizontalCenter
anchors.bottomMargin: 10
delegate: T.ItemDelegate { //! Changing style of items in list
width: _comboBox.width
contentItem: Text {
text: modelData
color: "black"
font: _comboBox.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: _comboBox.highlightedIndex === index
}
indicator: Canvas { //! Changing style of indicator
id: canvas
x: _comboBox.width - width - _comboBox.rightPadding - 5
y: _comboBox.topPadding + (_comboBox.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections { //! Changing style on pressed
target: _comboBox
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = _comboBox.pressed ? "#722ed1" : "#531dab";
context.fill();
}
}
contentItem: Text {
leftPadding: 5
rightPadding: _comboBox.indicator.width + _comboBox.spacing
text: _comboBox.displayText
font: _comboBox.font
color: "black"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: _comboBox.pressed ? "#2f54eb" : "#1d39c4"
border.width: _comboBox.visualFocus ? 2 : 1
radius: 10
}
popup: T.Popup { //! Changing style of drop-down list
y: _comboBox.height - 1
width: _comboBox.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model:_comboBox.popup.visible ? _comboBox.delegateModel : null
currentIndex: _comboBox.highlightedIndex
T.ScrollIndicator.vertical: T.ScrollIndicator { }
}
}
}
That's look like this
In the popup code add a z and use an index higher than 1
popup: T.Popup { //! Changing style of drop-down list
...
padding: 1
z: 4
...
I used 4 as the z, here because I knew 4 will definitely work. But maybe 2 too would have worked.
This usually happens when you are showing the combo box in a popup.
I would like to add Vertical TabBar to my app in a similar manner of what Qt Creater is doing in their app (as shown in picture).
I have been searching how to simple make the TabBar vertical, yet did not find proper answers (thought its common to have it vertical).
Question: How could I make a Vertical Tab to navigate through the different qml files I have? If there are more suitable options, please suggest.
A TabBar just uses a common ListView to display a bunch of TabButtons. You can customize it by overwriting the contentItem property and making the ListView vertical, like this:
// VertTabBar.qml
TabBar {
id: control
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical // <<-- VERTICAL
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: height - 40
}
}
A complete example using Fusion theme.
It is important to set the width of the TabButton else the width is divided by the number of items.
Notice there is a light colour separator line, that comes from ???
Issue: first item can be partially clipped.
Well, there are a lot of things under the hood with QML...
Thus, we cannot really make a TabBar vertical...
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Templates as T
// import QtQuick.Controls.impl
// import QtQuick.Controls.Fusion
// import QtQuick.Controls.Fusion.impl
Page {
id: root
width: 1800
height: 800
Row {
anchors.fill: parent
TabBar {
id: control
width: 200
height: parent.height
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: width - 40
}
Repeater {
model: 50
TabButton {
id: control2
width: control.width
text: "tab blabla blabla %1".arg(model.index)
contentItem: IconLabel {
spacing: control2.spacing
mirrored: control2.mirrored
display: control2.display
icon: control2.icon
text: control2.text
font: control2.font
color: control2.palette.buttonText
}
background: Rectangle {
y: control2.checked || control2.TabBar.position !== T.TabBar.Header ? 0 : 2
implicitHeight: 21
height: control2.height - (control2.checked ? 0 : 2)
border.color: Qt.lighter(Fusion.outline(control2.palette), 1.1)
border.width: 0
gradient: Gradient {
GradientStop {
position: 0
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: control2.checked ? 0 : 0.85
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: 1
color: control2.checked ? Fusion.tabFrameColor(control2.palette)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.16)
}
}
}
}
}
}
StackLayout {
id: stack_layout
width: parent.width - 200
height: parent.height
currentIndex: control.currentIndex
Repeater {
model: 50
Item {
Label {
anchors.centerIn: parent
text: "tab %1".arg(model.index)
font.pixelSize: 50
}
}
}
}
}
}
I'm beginner. I'm trying to use combobox to populate a list of elements, but when I tried to style there is some problem while displaying text.
Here is the code:
import QtQuick 2.7
import QtQuick.Controls 2.2
Item {
property string btntext : "First"
signal dropDownIndexChanged(int index)
id: mainDropDown
ListModel{
id: modelList
ListElement{ text: "First" }
ListElement{ text: "Second" }
ListElement{ text: "Third" }
}
ComboBox {
id: comboButton
width: parent.width
height: parent.height
model:modelList
currentIndex: 0
editText : btntext
Image {
id: imageMainButton
x: 119
anchors.top: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 9
anchors.topMargin: -7
fillMode: Image.Tile
sourceSize.height: 25
sourceSize.width: 25
source: "<some image>"
}
delegate: ItemDelegate {
id:itemDelegate
width: comboButton.width
background:Rectangle{
gradient: Gradient {
GradientStop {
position: 0.0
color: itemDelegate.down ? "white" : "blue"
}
GradientStop {
position: 1.0
color: itemDelegate.down ? "yellow" : "orange"
}
}
}
contentItem: Text {
text: modelData
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
font.pointSize: 11
font.family: "Arial"
color: itemDelegate.down ? "black" : "white"
}
highlighted: comboButton.highlightedIndex === index
}
indicator: Canvas {
}
//When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
contentItem: Text {
text: comboButton.displayText
anchors.centerIn: parent
//font: comboButton.font
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
renderType: Text.NativeRendering
anchors.left : parent.left
anchors.leftMargin: 10
font.family: "Verdena"
font.pointSize: 12
font.bold: true
color: "white"
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
radius: 2
color : "white"
//height:100
smooth: true
//border.width: 1
border.color: "white"
}
popup: Popup {
y: comboButton.height
width: comboButton.width -5
//implicitHeight: contentItem.implicitHeight -1
padding: 1
background: Rectangle {
border.color: "black"
radius: 2
color : "white"
}
contentItem: ListView {
//clip: true
implicitHeight: contentHeight
model: comboButton.popup.visible ? comboButton.delegateModel : null
currentIndex: comboButton.highlightedIndex
interactive: false
}
}
onCurrentIndexChanged:
{
btntext = mainDropDown.get(currentIndex).text
dropDownIndexChanged(currentIndex)
console.log(btntext ,currentIndex)
}
}
}
1) As mentioned above why does combobox text is not displayed until I select an item from the drop down?
2) The selected index/item is not highlighted at all.
1) As mentioned above why does combobox text is not displayed until I select an item from the drop down?
This is because your background Rectangle color is "White", same as your Text color ("white" is default color).
2) The selected index/item is not highlighted at all.
This is because inside delegate (id: itemDelegate), you are changing color based on itemDelegate.down condition. Change this to itemDelegate.highlighted.