Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Customizing ComboBox
Qt 6.11 is out! See what's new in the release blog

Customizing ComboBox

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 623 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    tech2nick
    wrote on last edited by tech2nick
    #1

    Hi guys, I want to customize my ComboBox. I want to highlight (let's say blue) the item when pressed and leave the previously clicked item highlighted (let's say, lighter blue). I mean, I want the ComboBox to work as usually, but with different highlighting colours. I tried to use
    Customizing ComboBox, but it changes colours of delegates permanently and the highlighting effect dissapears. Here's my code:

    ComboBox {
        id: control
        property color color: "green"
        property int universalFontSize: height/3
        model: usersModel
    
        delegate: ItemDelegate {
            width: control.width
            text: modelData
            font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
            highlighted: control.highlightedIndex == index
            }
    
    
        indicator: Canvas {
            x: control.width - width - control.rightPadding
            y: control.topPadding + (control.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"
    
            Connections {
                target: control
                onPressedChanged: indicator.requestPaint()
            }
    
            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = root.color
                context.fill();
            }
        }
    
        contentItem: Text {
            leftPadding: 0
            rightPadding: control.indicator.width + control.spacing
            font.pixelSize: universalFontSize
            text: control.displayText
            color: root.color
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    
        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            border.color: root.color
            border.width: 1
        }
    }
    

    Thank you in advance:)

    1 Reply Last reply
    0
    • jpnurmiJ Offline
      jpnurmiJ Offline
      jpnurmi
      wrote on last edited by
      #2

      Is this what you're after?

      delegate: ItemDelegate {
          id: delegate
          width: control.width
          text: modelData
          font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
          highlighted: control.highlightedIndex == index
          background: Rectangle {
              color: delegate.down ? "steelblue" : delegate.highlighted ? "lightsteelblue" : "white"
          }
      }
      
      1 Reply Last reply
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved