qt - 如何在 QML 中为 ListView 项目设置备用颜色

Question

是否可以为 QML 中的备用 ListView 项目分配 2 种颜色？我想将第一个列表项着色为黑色，然后将第二个列表项着色为蓝色，然后将第三个项目着色为黑色，然后将第四个项目着色为蓝色，依此类推......

如何在qml中实现这个东西？请分享你的想法。谢谢。

Answer 1

您可以使用委托的index属性来确定此委托元素是偶数还是奇数，并使用它来更改委托的颜色。

ListView {
  anchors.fill: parent
  model: 3

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

Answer 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)
           }
      }
}

Answer 3

我建议你使用“model.index”——它完全一样，但是让你的代码更容易理解。顺便说一句，正因为如此

var 颜色 = [ "#E4DDE8", "#00000000" ];

每次调用“altColor”时，都会创建新数组。非常低效。将数组声明移动到列表视图：

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

Answer 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
}