Български English

Тази статия е създадена като отговор на наколко дискусии във форума (препратки към тях най-отдолу), в които се обсъждаше този метод.

Сортиране и филтриране в реално време на GridView

Първо създаваме примерен лист от елементи, съдържащи полета за цвят и форма. След това, създаваме две текстови полета за всяка променлива (форма, цвят).

В кода по-долу, който се занимава с GridView, създаваме филтрираща функция, която пресява елементите в модела. Връзваме функцията към събитието onTextChanged, за да създадем ефект, че всичко става във реално време.

При намирането на елемент, който не съвпада с търсенето, той се изпраща в края на листа. Ако елемента съвпада, той се връща на оригиналната си позиция. Елемента автоматично ще избледнее ако не съвпада, както се вижда от анимацията на прозрачността.

main.qml

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     property alias shapeFilter: inputTextShape.text
  5.     property alias colorFilter: inputTextcolor.text
  6.     width: 480; height: 480
  7.     ListModel {
  8.         id: widgetModel
  9.         ListElement { index: 0; hue: "green";  shape: "circle"    }
  10.         ListElement { index: 1; hue: "purple"; shape: "circle"    }
  11.         ListElement { index: 2; hue: "blue";   shape: "rectangle" }
  12.         ListElement { index: 3; hue: "purple"; shape: "rectangle" }
  13.         ListElement { index: 4; hue: "blue";   shape: "circle"    }
  14.         ListElement { index: 5; hue: "green";  shape: "rectangle" }
  15.         ListElement { index: 6; hue: "green";  shape: "circle"    }
  16.     }
  17.     Component {
  18.         id: widgetDelegate
  19.         Rectangle {
  20.             width: 80; height: 80
  21.             smooth: true
  22.             color: hue
  23.             radius: shape == "circle" ? 80 : 0
  24.             opacity: (shapeFilter != "" ? shapeFilter == shape : true) &&
  25.                      (colorFilter != "" ? colorFilter == hue   : true)
  26.  
  27.             Behavior on opacity { NumberAnimation { duration: 500 } }
  28.         }
  29.     }
  30.     GridView {
  31.         width: parent.width; height: parent.height * 0.9
  32.         anchors.top: parent.top
  33.         model: widgetModel
  34.         delegate: widgetDelegate
  35.         MouseArea {
  36.             id: selectCircleFromShape
  37.             anchors.fill: parent
  38.         }
  39.     }
  40.     Item {
  41.         id: textArea
  42.         height: 60; width: parent.width/2
  43.         anchors.bottom:  parent.bottom
  44.         anchors.bottomMargin: 20
  45.         Text {
  46.             width: 50; height: parent.height/2; anchors.leftMargin: 20
  47.             text: "Shape:"; font.pixelSize: 24
  48.         }
  49.         Text {
  50.             width: 50; height: parent.height/2; anchors.leftMargin: 20
  51.             anchors.bottom: parent.bottom
  52.             text: "Color:"; font.pixelSize: 24
  53.         }
  54.         function filter(type, comp) {
  55.             if (shapeFilter == "" && colorFilter == "")
  56.             {
  57.                 for (var i = 0; i < widgetModel.count; i++)
  58.                     widgetModel.move(i,widgetModel.get(i).index,1)
  59.             }
  60.             else
  61.             {
  62.                 for (var j = 0, i = 0; j < widgetModel.count; j++, i++)
  63.                     if ((type ? widgetModel.get(i).hue : widgetModel.get(i).shape) != comp)
  64.                         widgetModel.move(i--,widgetModel.count - 1,1)
  65.             }
  66.         }
  67.         Rectangle {
  68.             anchors.right: parent.right
  69.             width: 100; height: parent.height / 2
  70.             border.color: "steelblue"
  71.             border.width: 5; radius: 10
  72.             TextInput {
  73.                 id: inputTextShape; focus:  true
  74.                 anchors.fill: parent; anchors.leftMargin: 10
  75.                 font.pixelSize: 24
  76.                 onTextChanged: textArea.filter(false, shapeFilter)
  77.             }
  78.         }
  79.         Rectangle {
  80.             anchors.right: parent.right
  81.             anchors.bottom: parent.bottom
  82.             width: 100; height: parent.height / 2
  83.             border.color: "steelblue"
  84.             border.width: 5; radius: 10
  85.             TextInput {
  86.                 id: inputTextcolor
  87.                 anchors.fill: parent; anchors.leftMargin: 10
  88.                 font.pixelSize: 24
  89.                 onTextChanged: textArea.filter(true, colorFilter)
  90.             }
  91.         }
  92.     }
  93. }

Тема, в която това е обсъждано: How to Assing an id property for dynamically created element. [developer.qt.nokia.com]

Categories:

  • Tutorial
  • snippets
  •