Как установить альтернативные цвета для элементов ListView в QML

Можно ли назначить 2 цвета альтернативным элементам ListView в QML? Я хочу, чтобы цвет элемента 1-го списка был черным, затем вторым элементом списка, как синий, затем 3-й элемент как черный, затем 4-й элемент как синий и так далее...

Как добиться этой цели в qml? Пожалуйста, поделитесь своими мыслями. Спасибо.

Ответы

Ответ 1

Вы можете использовать свойство index делегата, чтобы определить, является ли этот элемент делегата четным или нечетным, и использовать его для изменения цвета делегата.

ListView {
  anchors.fill: parent
  model: 3

  delegate:
    Rectangle {
        width: 20
        height: 30
        color: index % 2 == 0 ? "blue" : "black"
    }
}

Ответ 2

Я пробовал в своем коде что-то вроде следующего. Потому что мне нужен был тот же стиль в другом месте в коде. Поэтому я просто создал функцию.

 ListView {
      anchors.fill: parent
      model: 3

      delegate:
        Item{
           function altColor(i) {
              var colors = [ "#E4DDE8", "#00000000" ];
              return colors[i];
           }
           Rectangle {
              width: 20
              height: 30
              color: altColor(index % 2)
           }
      }
}

Ответ 3

Я рекомендую вам использовать "model.index" - это точно так же, но делает ваш код намного понятнее. Кстати, из-за этого

var colors = [ "# E4DDE8", "# 00000000" ];

каждый раз, когда вы вызываете "altColor", будет создан новый массив. Очень неэффективно. Переместить объявление массива в представление списка:

property var colors: ["#E4DDE8", "#00000000"]

Ответ 4

Хотя вопрос уже отвечает, вы все равно можете определить свойство для Listmodel, которое сохраняет цвет

ListModel {
    id: fruitModel

    ListElement {
        name: "Apple"
        cost: 2.45
        elementColor: "red"
    }
    ListElement {
        name: "Orange"
        cost: 2.45
        elementColor: "black"
    }
    ListElement {
        name: "Banana"
        cost: 2.45
        elementColor: "gray"
    }
}

И отобразите его в делегате:

Rectangle{
    anchors.fillIn:parent
    color: elementColor
}