查看完整版本: [-- QML 和 C++ 列表的实现 --]

QTCN开发网 -> Qt QML开发 -> QML 和 C++ 列表的实现 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

chensh 2016-04-26 14:10

QML 和 C++ 列表的实现

新手一枚,根据官方文档和一些大神的说法做了以下关于lisview的实现。但是无法显示(简单的text能显示)。
环境:QT5.6.0 和 vs 2013。
// qmember.h
#ifndef QMEMBERITEM_H
#define QMEMBERITEM_H
#include <QObject>
#include <QQueue>
class QMemberItem : public QObject
{    
    Q_OBJECT    
    Q_PROPERTY(QString id READ uid WRITE setUid NOTIFY uidChanged)    
    Q_PROPERTY(QString image READ uimage WRITE setUimage NOTIFY uimageChanged)
public:    
    explicit QMemberItem(QObject *parent = 0);    
    // user id    
    QString uid();    
    void setUid(const QString& id);    
    // user image  
     QString uimage();    
     void setUimage(const QString& image);
signals:    
     void uidChanged();    
     void uimageChanged();
public slots:
private:    
     QString m_uid;    
     QString m_uimage;
};
class QMemberList : public QObject
{    
      Q_OBJECT
public:    
      explicit QMemberList(QObject *parent = 0);
signals:    
      void memberCountChanged(int arg);    
      void memberIncrease(QMemberItem* item);    
      void memberReduce(int index);
public slots:    
       void addMember(QMemberItem* item);    
       void removeMember(const QString& uid);
private:    
       QQueue<QMemberItem*> m_queueMembers;
};
#endif // QMEMBERITEM_H

// qmember.cpp
#include "qmember.h"
QMemberItem::QMemberItem(QObject *parent) : QObject(parent)
{
}
QString QMemberItem::uid()
{    
    return m_uid;
}
void QMemberItem::setUid(const QString& id)
{    
    m_uid = id;
}
QString QMemberItem::uimage()
{    
    return m_uimage;
}
void QMemberItem::setUimage(const QString& image)
{    
     m_uimage = image;
}
QMemberList::QMemberList(QObject *parent) : QObject(parent)
{    
    m_queueMembers.clear();  
     QMemberItem item_1;    
     item_1.setUid("0001");    
     addMember(&item_1);
}
void QMemberList::addMember(QMemberItem* item)
{    
    if(NULL != item && !m_queueMembers.contains(item))
    {      
          m_queueMembers<<item;        
          emit memberCountChanged(m_queueMembers.count());
          emit memberIncrease (item);  
    }
}
void QMemberList::removeMember(const QString& uid)
{    
       for(int i=0;i<m_queueMembers.count();++i){        
              QMemberItem* item = m_queueMembers;        
              if(NULL != item && item->uid() == uid)                        
             {            
                     m_queueMembers.removeAt(i);            
                     emit memberCountChanged (m_queueMembers.count ());            
                     emit memberReduce (i);            
                     break;        
              }    
        }
}

// main.cpp


#include <QGuiApplication>

#include <QQmlApplicationEngine>
#include <QtQml>
#include <QQuickView>
#include "qmember.h"
int main(int argc, char *argv[])

{    
         QGuiApplication app(argc, argv);    
         qmlRegisterType<QMemberItem>("the.myMemberItem", 1, 0, "QMemberItem");    
         QMemberList memlst;    
         QQuickView view;    
         view.engine()->rootContext()->setContextProperty("memlst", &memlst);    
         view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));    
         view.show();    
         return app.exec();
}

// main.qml

import QtQuick 2.4
import QtQuick.Window 2.2
import the.myMemberItem 1.0
Item{  

         id:member_list    
         visible: true    
         width:720    
         height:640  
         // 这个text能显示   /*
        Text{        
               text:"Hello World."  
        }*/    
       // 这个listview无法显示    
       ListModel{            
            id: mymodel  
       }    
       Component {      
            id:myDelegate      
            Item{          
                     id: item_root            
                      height: 120            
                      width: 120          
                      property QMemberItem myinfo:obj_info  // 这个不懂,可能是错误          
                       Image{              
                             id: image_avatar              
                              width: 120              
                              height: 90                
                              source:myinfo.uimage()          
                       }            
                      Text{              
                              x:20              
                              y:image_avatar.height + 5              
                              text: myinfo.uid()          
                       }        
              }  
        }    
       ListView{      
               id: list_member        
               anchors.fill: parent      
               width:700        
               height: 600        
               model: mymodel        
               delegate:myDelegate    
      }    
      Connections{      
               target: memlst        
               onMemberIncrease:{//增加item            
                     mymodel.append({"obj_info": info})      
               }        
               onMemberReduce:{//移除item          
                    mymodel.remove(index)      
               }  
        }
}
问题是:当我在qmember.cpp 中 类 QMemberList初始化队列时,并进行调用addMember进行添加人员,在此时给QML发送一个添加人员的信号,进行添加人员信息,疑惑在于不懂在接收这个数据,即Connections的onMemberIncrease方法中怎么处理,接收的数据,该怎么填充对应的text或image的source。希望懂得大神,解一下惑。




ycj211 2016-04-26 16:44
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import the.myMemberItem 1.0
Rectangle{
    id:member_list
    visible: true
    color: "green"

    width:720
    height:640
    ListModel{
        id: mymodel
    }
    Component {
        id:myDelegate
        Item{
            id: item_root
            height: 120
            width: 120
            //property QMemberItem myinfo:obj_info  // 这个不懂,可能是错误
            Image{
                id: image_avatar
                width: 120
                height: 90
                source:mem.image
            }
            Text{
                x:20
                y:image_avatar.height + 5
                text: mem.id
            }
        }
    }
    ListView{
        id: list_member
        anchors.fill: parent
        width:700
        height: 600
        model: memlst
        delegate:myDelegate
    }
//    Connections{
//        target: memlst
//        onMemberIncrease:{//增加item
//            mymodel.append({"obj_info": info})
//        }
//        onMemberReduce:{//移除item
//            mymodel.remove(index)
//        }
//    }
    QMemberItem{
        id:mem
    }
}

chensh 2016-04-27 09:51
ycj211:import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import the.myMemberItem 1.0
....... (2016-04-26 16:44) 

谢谢您的回答。我用你的这个qml文件试过了,发现还是显示不了。而且我想实现的是动态加载item项,通过信号机制,在QML和C++间进行交互。QML接收C++的数据,然后进行界面显示。而C++负责给QML发送数据,进行逻辑控制。所以想用Connections这个东西。如果您熟悉这个用法,麻烦教一下。

chensh 2016-04-27 10:58
经过修改,现在可以实现由C++控制,动态加载item项。本人是初学者,不太懂。代码或UI可能比较粗糙,请大家见谅。代码如下:[attachment=15069][attachment=15070][attachment=15071]。修改后的UI,.qml文件如下:

// main.qml

import QtQuick 2.4
import QtQuick.Window 2.2
//import the.myMemberItem 1.0

Item{
    id:member_list
    visible: true
    width:720
    height:640

    ListModel{
        id: mymodel
    }
    Component {
        id:myDelegate
        Item{
            id: item_root
            height: 120
            width: 120

            Image{
                id: image_avatar
                width: 120
                height: 90
                source:userimage
            }
            Text{
                x:20
                y:image_avatar.height + 5
                text: userid
            }
        }
    }
    ListView{
        id: list_member
        anchors.fill: parent
        width:700
        height: 600

        model: mymodel
        delegate:myDelegate
    }
    Connections{
        target: memlst
        onMemberIncrease:{//增加item
            // 以下这个item不知从哪接收的数据
            // 对于C++研发人员来说,这个不能理解。
            // 没有声明和定义的对象
            var uid = item.usid;
            var uimage = item.image;
            mymodel.append({userid:uid,userimage:uimage})
        }
        onMemberReduce:{//移除item
            mymodel.remove(index)
        }
    }
}

想要看动态移除item项的,就各自通过按钮,调用C++方法,进行交互删除了。这里不做介绍。


查看完整版本: [-- QML 和 C++ 列表的实现 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled