Difference between revisions of "Real-time Sorting and Filtering of a GridView/bg"

From Qt Wiki
Jump to: navigation, search
 
(Sub-categorize)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Български''' [[Real-time_Sorting_and_Filtering_of_a_GridView|English]]
+
{{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]]
  
 
Тази статия е създадена като отговор на наколко дискусии във форума (препратки към тях най-отдолу), в които се обсъждаше този метод.
 
Тази статия е създадена като отговор на наколко дискусии във форума (препратки към тях най-отдолу), в които се обсъждаше този метод.
Line 13: Line 15:
 
При намирането на елемент, който не съвпада с търсенето, той се изпраща в края на листа. Ако елемента съвпада, той се връща на оригиналната си позиция. Елемента автоматично ще избледнее ако не съвпада, както се вижда от анимацията на прозрачността.
 
При намирането на елемент, който не съвпада с търсенето, той се изпраща в края на листа. Ако елемента съвпада, той се връща на оригиналната си позиция. Елемента автоматично ще избледнее ако не съвпада, както се вижда от анимацията на прозрачността.
  
'''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:19, 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

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

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

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

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

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

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