Question

是否可以为QML中的备用ListView项目分配2种颜色？我想将第1个列表项目涂成黑色，然后将第2个列表项目涂成蓝色，然后将第3个项目涂成黑色，然后将第4个项目涂成蓝色，依此类推......

如何在qml中实现这个功能？请分享你的想法。感谢。

Answer 1

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

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 colors = [“＃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
}

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

4 个答案: