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.
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 want to style my QML based combo/dropdown box so that each item will have a "delete" button on it like so
How can I achieve this? is there any article or links I can refer to to achieve this?
I am using QML to design the widget.
You can simply customize a QC2 combobox starting from here:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox
To this:
import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle {
id: root
width: 400
height: 400
ComboBox {
id: control
x: 50
y: 50
model: ["My Brackets 2021", "New Preset 22", "Super Br1", "New thingy", "Element of that list"]
delegate: ItemDelegate {
width: control.width - 20
contentItem: Text {
text: modelData
color: "#787878"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
Button {
x: parent.width - 25
y: (parent.height - height) / 2
width: 30
height: 30
text: "\u26CC"
onClicked: { /* --Perform delete action here-- */ }
}
}
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" : "#B4C8DA";
context.fill();
}
}
contentItem: Text {
leftPadding: 10
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#787878"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 250
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#B4C8DA"
border.width: control.visualFocus ? 2 : 1
radius: 20
}
popup: Popup {
y: control.height + 3
width: control.width
implicitHeight: contentItem.implicitHeight + 20
padding: 10
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
border.color: "#B4C8DA"
radius: 20
}
}
}
}
Will look like this:
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
}
}
}
I have this Qt QML spinbox:
The problem is, it actually changes value only when up/down (+/-) indicators are clicked. When edited by entering numbers into spinbox, it does NOT change value. I have tried many things, but I cannot figure out why. Can anybody help?
QML code of the spinbox is this:
StyledSpinBox {
id: overhangAngleFactorSpinBox
implicitWidth: 120
implicitHeight: 30
to: 1 * 100
stepSize: 1
from: 0
Layout.leftMargin: 8
contentItem: StyledTextInput {
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
value: 70
property int decimals: 2
property real realValue: value / 100.0
validator: DoubleValidator {
bottom: Math.min(overhangAngleFactorSpinBox.from, overhangAngleFactorSpinBox.to)
top: Math.max(overhangAngleFactorSpinBox.from, overhangAngleFactorSpinBox.to)
}
textFromValue: function(value, locale) {
return Number(value / 100.0).toLocaleString(locale, 'f', overhangAngleFactorSpinBox.decimals)
}
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text) * 100.0
}
onValueChanged: {
editorScene.overhangAngleFactor = value / 100.0
}
}
StyledSpinBox.qml contains:
import QtQuick 2.5
import QtQuick.Controls 2.0 as QQC2
QQC2.SpinBox {
id: control
font.family: editorContent.labelFontFamily
font.weight: editorContent.labelFontWeight
font.pixelSize: editorContent.labelFontPixelSize
background: Rectangle {
border.color: editorContent.listHighlightColor
color: editorContent.paneBackgroundColor
}
down.indicator: Rectangle {
x: control.mirrored ? parent.width - width : 0
height: parent.height
implicitWidth: 40
implicitHeight: 40
border.color: editorContent.listHighlightColor
color: editorContent.listHighlightColor
Image {
anchors.centerIn: parent
source: "images/spinbox_down.png"
}
}
up.indicator: Rectangle {
x: control.mirrored ? 0 : parent.width - width
height: parent.height
implicitWidth: 40
implicitHeight: 40
border.color: editorContent.listHighlightColor
color: editorContent.listHighlightColor
Image {
anchors.centerIn: parent
source: "images/spinbox_up.png"
}
}
}
Problem solved by adding editable: true to spin box. According to documentation, the default value for editable is false:
editable : bool
This property holds whether the spinbox is editable. The default value is false.
I have a Combobox (Control 2.0). I write my own combobox like
Rectangle
{
border.width: 1
border.color: "lightsteelblue"
height:dp(40)
width: parent.width
ComboBox {
id:tmCombo
model:combotm.datalist
textRole: "value"
anchors.fill: parent
currentIndex:-1;
contentItem: Text {
leftPadding: 0
rightPadding: tmCombo.indicator.width + tmCombo.spacing
text:tmCombo.currentIndex==-1 ? "":tmCombo.model[tmCombo.currentIndex].value
font: tmCombo.font
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
onCurrentIndexChanged: {
if(currentIndex!=-1) {
var sqlid=model[currentIndex].sqlid;
combotm.getsqlid(sqlid,1,Query.SelectSubParam,Query.Subq,"TMC",1);
TaskResult.taskresult.HatBilgisi_TM=sqlid;
tmsCombo.enabled=true;
}
else {
tmsCombo.enabled=false;
}
tmsCombo.currentIndex=-1;
}
}
}
My problem is that when Combobox first open, half of popup is transparent. Then I close and open combobox again. Everthing is OK. I am working in android platform.
SOLUTION:
I have added import QtQuick.Templates 2.0 as T and chance Popup with T.Popup . That's work
Rigth code is : Combobox with filter input :) I have binded model from C++ side with Q_Property . dp function is my global function in main.qml which is fixed pixel for any device.
ComboBox {
id:trCombo
model:combotr.datalist
textRole: "value"
anchors.fill: parent
currentIndex:-1;
contentItem: Text {
leftPadding: 0
rightPadding: trCombo.indicator.width + trCombo.spacing
text:trCombo.currentIndex==-1 ? "":trCombo.model[trCombo.currentIndex].value
font: trCombo.font
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
popup: T.Popup {
id:mpopup
y: trCombo.height - (trCombo.visualFocus ? 0 : 1)
width: trCombo.width
implicitHeight: listview.contentHeight
topMargin: 6
bottomMargin: 6
// focus: true
closePolicy: Popup.NoAutoClose
contentItem: Item {
Column
{
anchors.fill: parent
spacing: 5
TextField
{
placeholderText: "arama yapın"
width: trCombo.width
height: dp(35)
// color: "red"
focus:true
inputMethodHints: Qt.ImhNoPredictiveText;
onTextChanged:{
//console.log("degisiyor");
process.filtertr(text);
}
onAccepted:{
// console.log("Tasarım Bitti");
isfinished(true);
// text="";
}
}
ListView {
id: listview
clip: true
model: trCombo.popup.visible ? trCombo.delegateModel : null
currentIndex: trCombo.highlightedIndex
width: trCombo.width
height:dp(500)
Rectangle {
z: 10
parent: listview
width: listview.width
height: listview.height
color: "transparent"
border.color: "#bdbebf"
layer.smooth: true
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
}
background: Rectangle { }
onClosed: {
if(!flag)
{
mpopup.open();
}
else
flag=false;
}
}
delegate: ItemDelegate {
width: trCombo.width
text: trCombo.textRole ? (Array.isArray(trCombo.model) ? modelData[trCombo.textRole] : model[trCombo.textRole]) : modelData
font.weight: trCombo.currentIndex === index ? Font.DemiBold : Font.Normal
highlighted: trCombo.highlightedIndex == index
onClicked: {
isfinished(true);
}
}
onCurrentIndexChanged: {
if(currentIndex!=-1)
{
var sqlid=model[currentIndex].sqlid;
combotr.getsqlid(sqlid,1,Query.SelectSubParam,Query.Subq,"TRC",1);
TaskResult.taskresult.HatBilgisi_TR=sqlid ;
trsCombo.enabled=true;
}
else
trsCombo.enabled=false;
trsCombo.currentIndex=-1;
}
}