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: colors.black
      ....

    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?

    Thx



  • 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
    {
        Q_ASSERT(index.isValid());
    
        QStyleOptionViewItem opt = option;
        initStyleOption(&opt, index);
    /////////////////////////////////////
    // Set the background based on the content
    if(index.data().toInt()==1)
    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);
    }
    
    


Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.