4. How to load ListModel to GridView depending on button clicked - QML

Qt World Summit: Submit your Presentation


How to load ListModel to GridView depending on button clicked - QML


  • I have GridView based on ListModel and Component delegete. ListModel contains images which represent some options ( option have to states: active or not )

    main.qml :

    import QtQuick 2.2
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1

ApplicationWindow {

title: qsTr("NoxiMove Schedule")
visibility: "Maximized"
visible: true

MainForm {

        anchors.fill: parent

        /* TOP FRAME */
        Rectangle
        {
            id: frame
            width: parent.width
            height: parent.height/5
            visible: true

            Row {
                id: row
                spacing: 10
                width:  frame.width
                height: frame.height
                anchors.fill: frame
                anchors.margins: 10

                property real itemWidth : ((width + spacing) / 3) - spacing;

                Tbutton { bWidth: row.itemWidth; bHeight: row.height; titleImg: "/images/images/t2logo.png"; tableImg: "/images/images/t2izo.png" }
                Tbutton { bWidth: row.itemWidth; bHeight: row.height; titleImg: "/images/images/t3logo.png"; tableImg: "/images/images/t3izo.png" }
                Tbutton { bWidth: row.itemWidth; bHeight: row.height; titleImg: "/images/images/t7logo.png"; tableImg: "/images/images/t7izo.png" }

                visible: true
            }
        }
        /*************/

        GridView {
            id: grid
            height: parent.height - frame.height - 150
            width: parent.width/3
            anchors.top: frame.bottom
            anchors.right: parent.right
            anchors.margins: 20
            cellWidth: grid.width/4
            cellHeight: grid.height/4
            model: optionsModel
            delegate: optionsDelegate
            visible: false
        }

        Component {
            id: optionsDelegate

            Item {
                id: wrapper
                width: grid.cellWidth-10
                height: grid.cellHeight-10

                Image {
                    id: itemImage
                    source: imagePath
                    anchors.centerIn: wrapper
                    width: wrapper.width-10
                    height: wrapper.width-10
                    smooth: true
                    opacity: 0.4
                    state: "UNCHECKED"

                    MouseArea {
                        id: mouseArea;
                        anchors.fill: itemImage
                        hoverEnabled: true
                        onClicked: {
                            checkedAnimation.start()
                            itemImage.state == "CHECKED" ? itemImage.state = "UNCHECKED" : itemImage.state = "CHECKED"
                            grid.currentIndex = index
                            _myClass.buttonClicked(grid.currentIndex)
                        }
                        onEntered: enteringAnimation.start()
                        onExited:  exitingAnimation.start()
                    }

                    NumberAnimation {
                        id: checkedAnimation
                        target: itemImage
                        property: "scale"
                        from: 0.4
                        to: 1.3
                        duration: 150
                        easing.type: Easing.OutSine
                    }

                    NumberAnimation {
                        id: enteringAnimation
                        target: itemImage
                        property: "scale"
                        from: 1
                        to: 1.3
                        duration: 150
                        easing.type: Easing.Linear
                    }

                    NumberAnimation {
                        id: exitingAnimation
                        target: itemImage
                        property: "scale"
                        from: 1.3
                        to: 1
                        duration: 150
                        easing.type: Easing.Linear
                    }

                    states: [
                        State {
                            name: "CHECKED"
                            PropertyChanges {
                                target: itemImage
                                opacity: 1.0
                            }
                        },
                        State {
                            name: "UNCHECKED"
                            PropertyChanges {
                                target: itemImage
                                opacity: 0.4
                            }
                        }
                    ]

                } // image

            } // item

        } // component

        ListModel {
            id: optionsModel
            ListElement { imagePath: "/images/images/zaglowek.png" }
            ListElement { imagePath: "/images/images/pilot.png" }
            ListElement { imagePath: "/images/images/uklad_jezdny.png" }
            ListElement { imagePath: "/images/images/nozne_sterowanie.png" }
            ListElement { imagePath: "/images/images/zaglowek.png" }
            ListElement { imagePath: "/images/images/pilot.png" }
            ListElement { imagePath: "/images/images/uklad_jezdny.png" }
            ListElement { imagePath: "/images/images/nozne_sterowanie.png" }
            ListElement { imagePath: "/images/images/zaglowek.png" }
            ListElement { imagePath: "/images/images/pilot.png" }
            ListElement { imagePath: "/images/images/uklad_jezdny.png" }
            ListElement { imagePath: "/images/images/nozne_sterowanie.png" }
            ListElement { imagePath: "/images/images/zaglowek.png" }
            ListElement { imagePath: "/images/images/pilot.png" }
            ListElement { imagePath: "/images/images/uklad_jezdny.png" }
            ListElement { imagePath: "/images/images/nozne_sterowanie.png" }
        }

        StatusBar{
                anchors.bottom: parent.bottom
                Label { text: "Read Only" }
        }

}

MessageDialog {
    id: messageDialog
    title: qsTr("May I have your attention, please?")

    function show(caption) {
        messageDialog.text = caption;
        messageDialog.open();
    }

}
}

    I have 3 buttons. I want to load specified images (and their states) to GridView depending on these buttons, but i dont know how.

    For exmaple: First button clicked:

    • images 0,1,2,3,4,5 is disable (entered and exited animation doesn't work ) and always active ( opacity equal to 1 )
    • images 6,7,8,9,10,11 is disable (entered and exited animation doesn't work ) and always not active ( opacity equal to 0.4 )
    • images 12,13,14,15 is enable and we can choose the state by clicking ( all animation work )

    Tbutton.qml :

     import QtQuick 2.4
 import QtQuick.Controls 1.3
 import QtQuick.Window 2.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1

Item {
id: container
property alias titleImg: title.source
property alias tableImg: table.source
property alias bWidth: container.width
property alias bHeight: container.height

Rectangle {

            id: rectangle
            color: "#e4d8d8"
            border.color: "transparent"
            border.width: 3
            radius: 10
            anchors.fill: parent
            gradient: Gradient {
                GradientStop {
                    position: 0.00;
                    color: "#e0d9d9";
                }
                GradientStop {
                    position: 1.00;
                    color: "#ffffff";
                }
            }

            MouseArea {
                id: mouseArea;
                anchors.fill: parent
                hoverEnabled: true
                onEntered: rectangle.state = "ENTERED"
                onExited: rectangle.state = "EXITED"
                onClicked: {
                    scaleAnimation.start()
                    numberAnim.start()
                    grid.visible = true
                }
                onReleased: {
                    if (containsMouse)
                        rectangle.state="HOVERING";
                    else
                        rectangle.state="EXITED";
                    }
            }

            PropertyAnimation{
                id:scaleAnimation
                target: rectangle
                property: "scale"
                from: 0
                to: 1
                duration: 500
                easing.type: Easing.OutCirc
            }

            NumberAnimation {
                id:numberAnim
                target: rectangle
                property: "opacity"
                from: 0
                to: 1
                duration: 500
                easing.type: Easing.OutSine
            }

            states: [
                State {
                     name: "HOVERING"
                     PropertyChanges {
                     target: rectangle
                     border.color: "lightgray"
                     opacity: 1.0
                     }
                },
                State {
                    name: "ENTERED"
                    PropertyChanges {
                        target: rectangle
                        border.color: "lightgray"
                        opacity: 1.0
                    }
                },
                State {
                    name: "EXITED"
                    PropertyChanges {
                        target: rectangle
                        border.color: "transparent"

                    }
                }
            ]

            transitions: [
                Transition {
                     from: "EXITED";
                     to: "HOVERING"
                      ColorAnimation {
                          target: rectangle
                          duration: 200
                      }
                },
                Transition {
                    from: "EXITED"
                    to: "ENTERED"
                    ColorAnimation {
                        target: rectangle
                        duration: 800
                    }
                },
                Transition {
                    from: "ENTERED"
                    to: "EXITED"
                    ColorAnimation {
                        target: rectangle
                        duration: 800
                    }
                }
            ]

            Row {
                    spacing: 2
                    anchors.fill: rectangle
                    anchors.margins: 5

                    Image {
                        id: title;
                        width: (rectangle.width/2 - 10);
                        height: (rectangle.height - 10);
                        opacity: 0.5
                    }
                    Image {
                        id: table;
                        width: (rectangle.width/2 - 10);
                        height: (rectangle.height - 10);
                        opacity: 1
                        antialiasing: true
                    }
                }


}

    }

    It's my first project in QML so I'm confused. I don't now how to solve this problem properly. Can someone help me?

    0

  • I create MyClass and pass 4 images to QML in main.cpp

    class.h

    #ifndef MYCLASS_H
#define MYCLASS_H

#include <QDebug>
#include <QObject>

class MyClass : public QObject
{
Q_OBJECT
Q_PROPERTY(QString imagePath READ imagePath WRITE setImagePath NOTIFY pathChanged);
public:
explicit MyClass(QObject *parent = 0);
MyClass(QString path)
{
    m_imagePath = path;
}

QString imagePath();
void setImagePath(const QString & path);

signals:
void pathChanged(QString path);

private:
QString m_imagePath;

};

 #endif // MYCLASS_H

    main.cpp

    QApplication app(argc, argv);

app.setWindowIcon(QIcon("qrc:/images/logo.ico"));
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

QList<QObject*> dataList;
dataList.append(new MyClass("/images/images/zaglowek.png"));
dataList.append(new MyClass("/images/images/pilot.png"));
dataList.append(new MyClass("/images/images/uklad_jezdny.png"));
dataList.append(new MyClass("/images/images/nozne_sterowanie.png"));
engine.rootContext()->setContextProperty("myModel", QVariant::fromValue(dataList));

    For Now MyClass has only image path, but it will also set state (checked-unchecked) and animation (enable-disable).
    I would like to reload this QList ( with another images, states etc. ) when button ( one of three ) is clicked ( TButton.qml ).
    How to do it ? Please help.

    0
qml 1322 gridview 24 listmodel 23 c++ to qml 14 buttons 13
Log in to reply