Real-time Sorting and Filtering of a GridView: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
'''English''' [[Real- | '''English''' [[Real-time_Sorting_and_Filtering_of_a_GridView_Bulgarian|Български]] | ||
[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]<br />[[Category:Developing_with_Qt::Qt Quick::Tutorial]] | |||
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. | 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= | = 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). | I first generate a list of elements of various colours and shapes. After this, I create two text boxes for each variable (shape, colour). | ||
Line 9: | Line 11: | ||
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. | 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 | 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'''<br /><code>import QtQuick 1.0 | |||
Rectangle {<br /> property alias shapeFilter: inputTextShape.text<br /> property alias colorFilter: inputTextcolor.text<br /> width: 480; height: 480<br /> ListModel {<br /> id: widgetModel<br /> ListElement { index: 0; hue: "green&quot;; shape: "circle&quot; }<br /> ListElement { index: 1; hue: "purple&quot;; shape: "circle&quot; }<br /> ListElement { index: 2; hue: "blue&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 3; hue: "purple&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 4; hue: "blue&quot;; shape: "circle&quot; }<br /> ListElement { index: 5; hue: "green&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 6; hue: "green&quot;; shape: "circle&quot; }<br /> }<br /> Component {<br /> id: widgetDelegate<br /> Rectangle {<br /> width: 80; height: 80<br /> smooth: true<br /> color: hue<br /> radius: shape &quot;circle&quot; ? 80 : 0 | |||
opacity: (shapeFilter != &quot;&quot; ? shapeFilter shape : true) &&<br /> (colorFilter != "" ? colorFilter == hue : true) | |||
* | Behavior on opacity { NumberAnimation { duration: 500 } }<br /> }<br /> }<br /> GridView {<br /> width: parent.width; height: parent.height * 0.9<br /> anchors.top: parent.top<br /> model: widgetModel<br /> delegate: widgetDelegate<br /> MouseArea {<br /> id: selectCircleFromShape<br /> anchors.fill: parent<br /> }<br /> }<br /> Item {<br /> id: textArea<br /> height: 60; width: parent.width/2<br /> anchors.bottom: parent.bottom<br /> anchors.bottomMargin: 20<br /> Text {<br /> width: 50; height: parent.height/2; anchors.leftMargin: 20<br /> text: "Shape:"; font.pixelSize: 24<br /> }<br /> Text {<br /> width: 50; height: parent.height/2; anchors.leftMargin: 20<br /> anchors.bottom: parent.bottom<br /> text: "Color:"; font.pixelSize: 24<br /> }<br /> function filter(type, comp) {<br /> if (shapeFilter &quot;&quot; &amp;&amp; colorFilter "")<br /> {<br /> for (var i = 0; i < widgetModel.count; i+'')<br /> widgetModel.move(i,widgetModel.get(i).index,1)<br /> }<br /> else<br /> {<br /> for (var j = 0, i = 0; j < widgetModel.count; j, i''+)<br /> if ((type ? widgetModel.get(i).hue : widgetModel.get(i).shape) != comp)<br /> widgetModel.move(i—,widgetModel.count - 1,1)<br /> }<br /> }<br /> Rectangle {<br /> anchors.right: parent.right<br /> width: 100; height: parent.height / 2<br /> border.color: "steelblue&quot;<br /> border.width: 5; radius: 10<br /> TextInput {<br /> id: inputTextShape; focus: true<br /> anchors.fill: parent; anchors.leftMargin: 10<br /> font.pixelSize: 24<br /> onTextChanged: textArea.filter(false, shapeFilter)<br /> }<br /> }<br /> Rectangle {<br /> anchors.right: parent.right<br /> anchors.bottom: parent.bottom<br /> width: 100; height: parent.height / 2<br /> border.color: "steelblue&quot;<br /> border.width: 5; radius: 10<br /> TextInput {<br /> id: inputTextcolor<br /> anchors.fill: parent; anchors.leftMargin: 10<br /> font.pixelSize: 24<br /> onTextChanged: textArea.filter(true, colorFilter)<br /> }<br /> }<br /> }<br />}</code> |
Revision as of 09:39, 24 February 2015
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
import QtQuick 1.0
Rectangle {<br /> property alias shapeFilter: inputTextShape.text<br /> property alias colorFilter: inputTextcolor.text<br /> width: 480; height: 480<br /> ListModel {<br /> id: widgetModel<br /> ListElement { index: 0; hue: "green&quot;; shape: "circle&quot; }<br /> ListElement { index: 1; hue: "purple&quot;; shape: "circle&quot; }<br /> ListElement { index: 2; hue: "blue&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 3; hue: "purple&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 4; hue: "blue&quot;; shape: "circle&quot; }<br /> ListElement { index: 5; hue: "green&quot;; shape: "rectangle&quot; }<br /> ListElement { index: 6; hue: "green&quot;; shape: "circle&quot; }<br /> }<br /> Component {<br /> id: widgetDelegate<br /> Rectangle {<br /> width: 80; height: 80<br /> smooth: true<br /> color: hue<br /> radius: shape &quot;circle&quot; ? 80 : 0
opacity: (shapeFilter != &quot;&quot; ? shapeFilter shape : true) &&<br /> (colorFilter != "" ? colorFilter == hue : true)
Behavior on opacity { NumberAnimation { duration: 500 } }<br /> }<br /> }<br /> GridView {<br /> width: parent.width; height: parent.height * 0.9<br /> anchors.top: parent.top<br /> model: widgetModel<br /> delegate: widgetDelegate<br /> MouseArea {<br /> id: selectCircleFromShape<br /> anchors.fill: parent<br /> }<br /> }<br /> Item {<br /> id: textArea<br /> height: 60; width: parent.width/2<br /> anchors.bottom: parent.bottom<br /> anchors.bottomMargin: 20<br /> Text {<br /> width: 50; height: parent.height/2; anchors.leftMargin: 20<br /> text: "Shape:"; font.pixelSize: 24<br /> }<br /> Text {<br /> width: 50; height: parent.height/2; anchors.leftMargin: 20<br /> anchors.bottom: parent.bottom<br /> text: "Color:"; font.pixelSize: 24<br /> }<br /> function filter(type, comp) {<br /> if (shapeFilter &quot;&quot; &amp;&amp; colorFilter "")<br /> {<br /> for (var i = 0; i < widgetModel.count; i+'')<br /> widgetModel.move(i,widgetModel.get(i).index,1)<br /> }<br /> else<br /> {<br /> for (var j = 0, i = 0; j < widgetModel.count; j, i''+)<br /> if ((type ? widgetModel.get(i).hue : widgetModel.get(i).shape) != comp)<br /> widgetModel.move(i—,widgetModel.count - 1,1)<br /> }<br /> }<br /> Rectangle {<br /> anchors.right: parent.right<br /> width: 100; height: parent.height / 2<br /> border.color: "steelblue&quot;<br /> border.width: 5; radius: 10<br /> TextInput {<br /> id: inputTextShape; focus: true<br /> anchors.fill: parent; anchors.leftMargin: 10<br /> font.pixelSize: 24<br /> onTextChanged: textArea.filter(false, shapeFilter)<br /> }<br /> }<br /> Rectangle {<br /> anchors.right: parent.right<br /> anchors.bottom: parent.bottom<br /> width: 100; height: parent.height / 2<br /> border.color: "steelblue&quot;<br /> border.width: 5; radius: 10<br /> TextInput {<br /> id: inputTextcolor<br /> anchors.fill: parent; anchors.leftMargin: 10<br /> font.pixelSize: 24<br /> onTextChanged: textArea.filter(true, colorFilter)<br /> }<br /> }<br /> }<br />}