QMLのListViewアイテムの代替色を設定する方法

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