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 Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Български 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 />}