如何爲QML中的ListView項目設置替代顏色

Question

是否可以將2種顏色分配給QML中的替代ListView項目？我想第一個顏色列表項爲黑色，然後第二個列表項爲藍色，然後第三個項目爲黑色，然後第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 { 
    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" 
    } 
} 

的ListModel的屬性，並在委託其顯示：

Rectangle{ 
    anchors.fillIn:parent 
    color: elementColor 
}