Important: Please read the Qt Code of Conduct -

Listview/delegates coloring

  • Hi, I just started with Qt programming and have a question about coloring in Listviews/delegates.

    How can I make a list with different background colors depending on the values of the list items.
    I would like to have an alternating color (black and darkgrey) for items that have the same value in a certain field.

    ex. I would like to have coloring determined by the "value" field.

    • name: "test_10", value: 1 -> black
      name: "test_02", value: 1 -> black
      name: "test_30", value: 1 -> black
      name: "test_14", value: 2 -> darkgrey
      name: "test_25", value: 2 -> darkgrey
      name: "test_16", value: 4 -> black
      name: "test_27", value: 7 -> darkgrey
      name: "test_18", value: 7 -> darkgrey
      name: "test_09", value: 7 -> darkgrey
      name: "test_11", value: 9 -> black

    The list is sorted by value. But the numbers in value are not sequential.
    I found something on how to highlight according to color, but i only works with predefined values.

    • Item {
      id: contactDelegate
      height: 21
      anchors.left: parent.left
      anchors.right: parent.right

      Rectangle {
      color: model.value == 2 ? colors.darkgrey:

    I thought of looking to the "Value" field of the previous item in the list, but I don't know how to.

    My second question is in the same line. In an alphabetically sorted list I would like to do the same, thus change color each time the first letter of a certain value changes, but not all letters are present (ex. a.., c... d... e... k... l... y... z...) . How can this be accomplished?

    Could any of you help me out?


  • HI,

    Yes you can keep the prev value and while drawing current delegate validate that. I think below pseudo will work for u(I did not tried):

    ListView {
    property bool toggle: false
    property int currValue: 0
    property color rowColor: toggle ? "black" : "darkGray"

    function getValue(value) {
    	if(currValue != value) {
    		toggle = !toggle;
    		currValue = value;
    	return value;

    delegate: Rectangle {
    Text {
    text: getValue(model.value)
    color: rowColor

  • @Sydes lets model return color for the delegate

  • just set the Qt::BackgroundRole for the same index to the colour you want and it will work out of the box. no need to custom use delegates or views

  • @VRonin Yes for QStandardItemModel, No for QListStringModel … not all Q*Models support all roles.

  • Any reason why you can't use QStandardItemModel? in that case subclass QStyledItemDelegate and reimplement paint

    void QStyledItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
        QStyleOptionViewItem opt = option;
        initStyleOption(&opt, index);
    // Set the background based on the content
    opt.backgroundBrush = QBrush(Qt::red);
        const QWidget *widget = option.widget;
        QStyle *style = widget ? widget->style() : QApplication::style();
        style->drawControl(QStyle::CE_ItemViewItem, &opt, painter, widget);