Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    General and Desktop
    qml c++ to qml gridview listmodel buttons
    1
    2
    1561
    Loading More Posts
    • 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
      Stravinsky last edited by

      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 Reply Quote 0
      • S
        Stravinsky last edited by

        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 Reply Quote 0
        • First post
          Last post