Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to load ListModel to GridView depending on button clicked - QML
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved Unsolved General and Desktop
qmlc++ to qmlgridviewlistmodelbuttons
2 Posts 1 Posters 1.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Stravinsky
    wrote on 26 Oct 2015, 12:14 last edited by
    #1

    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?

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Stravinsky
      wrote on 26 Oct 2015, 15:59 last edited by
      #2

      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.

      1 Reply Last reply
      0

      1/2

      26 Oct 2015, 12:14

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved