Come impostare colori alternativi per gli oggetti ListView in QML

Question

È possibile assegnare 2 colori agli oggetti ListView alternativi in ​​QML? Voglio colorare la prima voce dell'elenco come nera, poi la 2a voce dell'elenco come blu, quindi 3a parte come nera, poi la 4a parte come blu e così via ...

Come ottenere questa cosa in qml? Per favore condividi i tuoi pensieri. Grazie.

Answer 1

È possibile utilizzare la proprietà indice del delegato per determinare se questo elemento delegato è pari o dispari e utilizzare quello per modificare il colore del delegato.

ListView { 
    anchors.fill: parent 
    model: 3 

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

Answer 2

Ho provato qualcosa di simile al seguente nel mio codice. Perché avevo bisogno dello stesso styling in un posto diverso nel codice. Quindi ho appena creato una funzione.

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

vi consiglio di usare "model.index" - è esattamente lo stesso, ma rende il codice molto più facile da capire. BTW, a causa di quello

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

ogni volta che il tuo "altColor" sarà chiamato, verrà creato un nuovo array. Molto inefficiente. Spostare dichiarazione di matrice alla visualizzazione di elenco:

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

Answer 4

Anche se la domanda è già rispondere, è ancora possibile definire una proprietà per il Listmodel che mantiene il colore

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

e visualizzarlo nel delegato:

Rectangle{ 
    anchors.fillIn:parent 
    color: elementColor 
}