English Български

This wiki entry is created in response to a few forum threads (relevant link at bottom) asking for this method. Feel free to contribute to this article with explanations or code.

Real-time Sorting and Filtering of a GridView

I first generate a list of elements of various colours and shapes. After this, I create two text boxes for each variable (shape, colour).

In the latter section of code that deals with the GridView, I create a filter function which sifts through the elements in the model. I have hooked this function on to the onTextChanged event to create a real-time effect.

Having found an item that doesn’t match, it gets sent to the end of the list. If the item is matched, it is restored to its original index. The item will automatically fade away when it isn’t matched as the opacity property illustrates.

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

Relevant forum thread: How to Assing an id property for dynamically created element. [developer.qt.nokia.com]

Categories:

  • snippets
    • Creative Commons Attribution-ShareAlike 2.5 Generic

    Content is available under

    Creative Commons Attribution-ShareAlike 2.5 Generic

     

    © 2011 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Nokia Corporation and/or its subsidiaries and is used pursuant to a license from Nokia Corporation and/or its subsidiaries.
    All other trademarks are property of their respective owners. Privacy Policy
    This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

    Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Phone: +47 21 60 27 32. Org. Nr. 997 447 913