Български English
Тази статия е създадена като отговор на наколко дискусии във форума (препратки към тях най-отдолу), в които се обсъждаше този метод.
Сортиране и филтриране в реално време на 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)
- }
- }
- }
- }
Тема, в която това е обсъждано: How to Assing an id property for dynamically created element. [developer.qt.nokia.com]
