Real-time Sorting and Filtering of a GridView/bg

From Qt Wiki
< Real-time Sorting and Filtering of a GridView
Revision as of 07:07, 24 February 2015 by Maintenance script (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Български English


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

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

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

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

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

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: &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
            opacity: (shapeFilter != &amp;quot;&amp;quot; ? shapeFilter  shape : true) &amp;&amp;<br /> (colorFilter != &quot;&quot; ? 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 />}