Real-time Sorting and Filtering of a GridView: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''English''' [[Real-time_Sorting_and_Filtering_of_a_GridView_Bulgarian|Български]]
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
{{LangSwitch}}
[[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]]
[[Category:Snippets::QML]]
[[Category:Developing with Qt::Qt Quick::QML]]
[[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.
Line 13: Line 15:
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.
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
'''main.qml'''
<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: &quot;green&amp;quot;; shape: &quot;circle&amp;quot; }<br /> ListElement { index: 1; hue: &quot;purple&amp;quot;; shape: &quot;circle&amp;quot; }<br /> ListElement { index: 2; hue: &quot;blue&amp;quot;; shape: &quot;rectangle&amp;quot; }<br /> ListElement { index: 3; hue: &quot;purple&amp;quot;; shape: &quot;rectangle&amp;quot; }<br /> ListElement { index: 4; hue: &quot;blue&amp;quot;; shape: &quot;circle&amp;quot; }<br /> ListElement { index: 5; hue: &quot;green&amp;quot;; shape: &quot;rectangle&amp;quot; }<br /> ListElement { index: 6; hue: &quot;green&amp;quot;; shape: &quot;circle&amp;quot; }<br /> }<br /> Component {<br /> id: widgetDelegate<br /> Rectangle {<br /> width: 80; height: 80<br /> smooth: true<br /> color: hue<br /> radius: shape  &amp;quot;circle&amp;quot; ? 80 : 0
Rectangle {
             opacity: (shapeFilter != &amp;quot;&amp;quot; ? shapeFilter  shape : true) &amp;&amp;<br /> (colorFilter != &quot;&quot; ? colorFilter == hue : true)
property alias shapeFilter: inputTextShape.text
property alias colorFilter: inputTextcolor.text
width: 480; height: 480
ListModel {
id: widgetModel
ListElement { index: 0; hue: "green"; shape: "circle" }
ListElement { index: 1; hue: "purple"; shape: "circle" }
ListElement { index: 2; hue: "blue"; shape: "rectangle" }
ListElement { index: 3; hue: "purple"; shape: "rectangle" }
ListElement { index: 4; hue: "blue"; shape: "circle" }
ListElement { index: 5; hue: "green"; shape: "rectangle" }
ListElement { index: 6; hue: "green"; shape: "circle" }
}
Component {
id: widgetDelegate
Rectangle {
width: 80; height: 80
smooth: true
color: hue
radius: shape  "circle" ? 80 : 0
             opacity: (shapeFilter != "" ? shapeFilter  shape : true) &&
(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: &quot;Shape:&quot;; font.pixelSize: 24<br /> }<br /> Text {<br /> width: 50; height: parent.height/2; anchors.leftMargin: 20<br /> anchors.bottom: parent.bottom<br /> text: &quot;Color:&quot;; font.pixelSize: 24<br /> }<br /> function filter(type, comp) {<br /> if (shapeFilter  &amp;quot;&amp;quot; &amp;amp;&amp;amp; colorFilter  &quot;&quot;)<br /> {<br /> for (var i = 0; i &lt; widgetModel.count; i+'')<br /> widgetModel.move(i,widgetModel.get(i).index,1)<br /> }<br /> else<br /> {<br /> for (var j = 0, i = 0; j &lt; 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: &quot;steelblue&amp;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: &quot;steelblue&amp;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>
Behavior on opacity { NumberAnimation { duration: 500 } }
}
}
GridView {
width: parent.width; height: parent.height * 0.9
anchors.top: parent.top
model: widgetModel
delegate: widgetDelegate
MouseArea {
id: selectCircleFromShape
anchors.fill: parent
}
}
Item {
id: textArea
height: 60; width: parent.width/2
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
Text {
width: 50; height: parent.height/2; anchors.leftMargin: 20
text: "Shape:"; font.pixelSize: 24
}
Text {
width: 50; height: parent.height/2; anchors.leftMargin: 20
anchors.bottom: parent.bottom
text: "Color:"; font.pixelSize: 24
}
function filter(type, comp) {
if (shapeFilter  "" && colorFilter  "")
{
for (var i = 0; i < widgetModel.count; i+'')
widgetModel.move(i,widgetModel.get(i).index,1)
}
else
{
for (var j = 0, i = 0; j < widgetModel.count; j, i''+)
if ((type ? widgetModel.get(i).hue : widgetModel.get(i).shape) != comp)
widgetModel.move(i—,widgetModel.count - 1,1)
}
}
Rectangle {
anchors.right: parent.right
width: 100; height: parent.height / 2
border.color: "steelblue"
border.width: 5; radius: 10
TextInput {
id: inputTextShape; focus: true
anchors.fill: parent; anchors.leftMargin: 10
font.pixelSize: 24
onTextChanged: textArea.filter(false, shapeFilter)
}
}
Rectangle {
anchors.right: parent.right
anchors.bottom: parent.bottom
width: 100; height: parent.height / 2
border.color: "steelblue"
border.width: 5; radius: 10
TextInput {
id: inputTextcolor
anchors.fill: parent; anchors.leftMargin: 10
font.pixelSize: 24
onTextChanged: textArea.filter(true, colorFilter)
}
}
}
}</code>

Latest revision as of 13:20, 28 November 2016

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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 {
 property alias shapeFilter: inputTextShape.text
 property alias colorFilter: inputTextcolor.text
 width: 480; height: 480
 ListModel {
 id: widgetModel
 ListElement { index: 0; hue: "green"; shape: "circle" }
 ListElement { index: 1; hue: "purple"; shape: "circle" }
 ListElement { index: 2; hue: "blue"; shape: "rectangle" }
 ListElement { index: 3; hue: "purple"; shape: "rectangle" }
 ListElement { index: 4; hue: "blue"; shape: "circle" }
 ListElement { index: 5; hue: "green"; shape: "rectangle" }
 ListElement { index: 6; hue: "green"; shape: "circle" }
 }
 Component {
 id: widgetDelegate
 Rectangle {
 width: 80; height: 80
 smooth: true
 color: hue
 radius: shape  "circle" ? 80 : 0
            opacity: (shapeFilter != "" ? shapeFilter  shape : true) &&
 (colorFilter != "" ? colorFilter == hue : true)

Behavior on opacity { NumberAnimation { duration: 500 } }
 }
 }
 GridView {
 width: parent.width; height: parent.height * 0.9
 anchors.top: parent.top
 model: widgetModel
 delegate: widgetDelegate
 MouseArea {
 id: selectCircleFromShape
 anchors.fill: parent
 }
 }
 Item {
 id: textArea
 height: 60; width: parent.width/2
 anchors.bottom: parent.bottom
 anchors.bottomMargin: 20
 Text {
 width: 50; height: parent.height/2; anchors.leftMargin: 20
 text: "Shape:"; font.pixelSize: 24
 }
 Text {
 width: 50; height: parent.height/2; anchors.leftMargin: 20
 anchors.bottom: parent.bottom
 text: "Color:"; font.pixelSize: 24
 }
 function filter(type, comp) {
 if (shapeFilter  "" && colorFilter  "")
 {
 for (var i = 0; i < widgetModel.count; i+'')
 widgetModel.move(i,widgetModel.get(i).index,1)
 }
 else
 {
 for (var j = 0, i = 0; j < widgetModel.count; j, i''+)
 if ((type ? widgetModel.get(i).hue : widgetModel.get(i).shape) != comp)
 widgetModel.move(i,widgetModel.count - 1,1)
 }
 }
 Rectangle {
 anchors.right: parent.right
 width: 100; height: parent.height / 2
 border.color: "steelblue"
 border.width: 5; radius: 10
 TextInput {
 id: inputTextShape; focus: true
 anchors.fill: parent; anchors.leftMargin: 10
 font.pixelSize: 24
 onTextChanged: textArea.filter(false, shapeFilter)
 }
 }
 Rectangle {
 anchors.right: parent.right
 anchors.bottom: parent.bottom
 width: 100; height: parent.height / 2
 border.color: "steelblue"
 border.width: 5; radius: 10
 TextInput {
 id: inputTextcolor
 anchors.fill: parent; anchors.leftMargin: 10
 font.pixelSize: 24
 onTextChanged: textArea.filter(true, colorFilter)
 }
 }
 }
}