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?



  • 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.



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.