Using C++ Models in QML



  • 参考视频:Using C++ Models in QML {tutorial}

    这个视频比较长,40多分钟,内容也比较丰富。

    主要功能

    • 一个简单的待办事项
    • 可以增加新的待办事项,也可以删除已经完成的事情

    源码

    ToDoList.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.3
    import ToDo 1.0
    ColumnLayout{
        Frame {
            Layout.fillWidth: true
            ListView{
                id:listView
                implicitWidth: 300
                implicitHeight: 300
                anchors.fill: parent
                clip: true
    
                model: ToDoModel{
                    list:toDoList
                }
    
                delegate: RowLayout{
                    width: listView.width
                    CheckBox{
                        checked: model.done
                        onCheckedChanged: model.done = checked
                    }
                    TextField{
                        Layout.fillWidth: true
                        text: model.description
                        onEditingFinished: model.description = text
                    }
                }
            }
        }
        RowLayout{
            Button{
                text:qsTr("Add new item")
                onClicked: toDoList.appendItem()
                Layout.fillWidth: true
            }
            Button{
                text:qsTr("Remove complete items")
                onClicked: toDoList.removeCompletedItem()
                Layout.fillWidth: true
            }
        }
    }
    
    

    main.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.4
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("To Do List")
    
        ToDoList{
            anchors.centerIn: parent
        }
    }
    
    

    ToDoList.h

    #ifndef TODOLIST_H
    #define TODOLIST_H
    #include <QObject>
    #include <QVector>
    struct ToDoItem{
        bool done;
        QString description;
        bool equals(const ToDoItem& item) const {
            return this->done == item.done && this->description == item.description;
        }
    };
    class ToDoList : public QObject
    {
        Q_OBJECT
    public:
        explicit ToDoList(QObject *parent = nullptr);
        QVector<ToDoItem> items() const;
        bool setItemAt(int index, const ToDoItem &item);
    signals:
        void preItemAppended();
        void postItemAppended();
    
        void preItemRemoved(int index);
        void postItemRemoved();
    public slots:
        void appendItem();
        void removeCompletedItem();
    private:
        QVector<ToDoItem> m_items;
    };
    
    #endif // TODOLIST_H
    
    

    ToDoList.cpp

    #include "ToDoList.h"
    
    ToDoList::ToDoList(QObject *parent) : QObject(parent)
    {
        m_items.append({true,"Wash the car"});
        m_items.append({false,"Fix the sink"});
    }
    
    QVector<ToDoItem> ToDoList::items() const
    {
        return m_items;
    }
    
    bool ToDoList::setItemAt(int index, const ToDoItem &item)
    {
        if(index < 0 || index >= m_items.size()){
            return false;
        }
        const ToDoItem& oldItem = m_items[index];
        if(oldItem.equals(item)){
            return false;
        }
        m_items[index] = item;
        return true;
    }
    
    void ToDoList::appendItem()
    {
        emit preItemAppended();
        ToDoItem item;
        item.done = false;
        m_items.append(item);
        emit postItemAppended();
    }
    
    void ToDoList::removeCompletedItem()
    {
        for(int i=0;i<m_items.size();){
            if(m_items[i].done){
                emit preItemRemoved(i);
                m_items.remove(i);
                emit postItemRemoved();
            }else{
                i++;
            }
        }
    }
    
    

    ToDoModel.h

    #ifndef TODOMODEL_H
    #define TODOMODEL_H
    
    #include <QAbstractListModel>
    class ToDoList;
    
    class ToDoModel : public QAbstractListModel
    {
        Q_OBJECT
        Q_PROPERTY(ToDoList *list READ list WRITE setList)
    public:
        explicit ToDoModel(QObject *parent = nullptr);
        enum{
            DoneRole = Qt::UserRole,
            DescriptionRole
        };
        // Basic functionality:
        int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    
        QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
    
        // Editable:
        bool setData(const QModelIndex &index, const QVariant &value,
                     int role = Qt::EditRole) override;
    
        Qt::ItemFlags flags(const QModelIndex& index) const override;
    
    private:
        ToDoList* m_list;
        // QAbstractItemModel interface
    public:
        virtual QHash<int, QByteArray> roleNames() const override;
        ToDoList *list() const;
        void setList(ToDoList *list);
    };
    
    #endif // TODOMODEL_H
    
    

    ToDoModel.cpp

    #include "ToDoModel.h"
    #include "ToDoList.h"
    ToDoModel::ToDoModel(QObject *parent)
        : QAbstractListModel(parent),
          m_list(nullptr)
    {
    }
    
    int ToDoModel::rowCount(const QModelIndex &parent) const
    {
        // For list models only the root node (an invalid parent) should return the list's size. For all
        // other (valid) parents, rowCount() should return 0 so that it does not become a tree model.
        if (parent.isValid() || m_list == nullptr)
            return 0;
    
        return m_list->items().size();
    }
    
    QVariant ToDoModel::data(const QModelIndex &index, int role) const
    {
        if (!index.isValid() || m_list==nullptr)
            return QVariant();
        auto item = m_list->items().at(index.row());
        switch (role) {
        case DoneRole:{
            return QVariant(item.done);
        }
        case DescriptionRole:{
            return QVariant(item.description);
        }
        }
        return QVariant();
    }
    
    bool ToDoModel::setData(const QModelIndex &index, const QVariant &value, int role)
    {
        if(m_list == nullptr){
            return false;
        }
        auto item = m_list->items().at(index.row());
    
        switch (role) {
        case DoneRole:{
            item.done = value.toBool();
            break;
        }
        case DescriptionRole:{
            item.description = value.toString();
            break;
        }
        }
        if (m_list->setItemAt(index.row(),item)) {
            emit dataChanged(index, index, QVector<int>() << role);
            return true;
        }
        return false;
    }
    
    Qt::ItemFlags ToDoModel::flags(const QModelIndex &index) const
    {
        if (!index.isValid())
            return Qt::NoItemFlags;
    
        return Qt::ItemIsEditable;
    }
    
    ToDoList *ToDoModel::list() const
    {
        return m_list;
    }
    
    void ToDoModel::setList(ToDoList *list)
    {
        beginResetModel();
        if(m_list != nullptr){
            m_list->disconnect(this);
        }
        m_list = list;
        if(m_list!=nullptr){
            connect(m_list,&ToDoList::preItemAppended,[=](){
                const int index = m_list->items().size();
                beginInsertRows(QModelIndex(),index,index);
            });
            connect(m_list,&ToDoList::postItemAppended,[=](){
                endInsertRows();
            });
            connect(m_list,&ToDoList::preItemRemoved,[=](int index){
                beginRemoveRows(QModelIndex(),index,index);
            });
            connect(m_list,&ToDoList::postItemRemoved,[=](){
                endRemoveRows();
            });
        }
        endResetModel();
    }
    
    QHash<int, QByteArray> ToDoModel::roleNames() const
    {
        QHash<int, QByteArray> names;
        names[DoneRole] = "done";
        names[DescriptionRole] = "description";
        return names;
    }
    
    

    main.cpp

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QQmlContext>
    #include "ToDoModel.h"
    #include "ToDoList.h"
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
        qmlRegisterType<ToDoModel>("ToDo",1,0,"ToDoModel");
        qmlRegisterUncreatableType<ToDoList>("ToDo",1,0,"ToDoList",
            QStringLiteral("ToDoList should not be created in QMl"));
        ToDoList toDoList;
        QQmlApplicationEngine engine;
        engine.rootContext()->setContextProperty("toDoList",&toDoList);
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }
    
    

    截图

    最后的运行效果

    image

    自己做的时候留下的部分截图

    image
    image
    image

    思考与总结

    虽然是一个简单的ToDo-List,却是目前做过的最难的一个qml Demo,牵涉到的Qt相关的知识非常多。

    • 在Layout中使用fillWidth: true使控件填充满

    不同于css中设置display的方式,qml的layout采用这种方式使得控件填充满layout,同时还可以实现对其,如这个例子中的两个Button的宽度和ListView宽度一样

    • Model-View-Delegate的使用

    在我的使用经历中,Qt的这个模式是一个很难的点,我看了很多视频教程,也尝试着自己去写基于这个模式的Demo,往往是失败告终。在这次的ToDo-List中,视频非常详细的介绍了从简单的model,一步一步到复杂的model,如何编写,如何使用。我认为是这个视频对我最大的帮助之一。

    • 使用信号槽实现的双向绑定

    我开始只能把model的数据展示在listview上,如果我去勾选框或者去编辑,model是感应不到的,是不会改变的。后来是onCheckedChanged和onEditingFinished两个槽函数,把改变的数据赋给模型,才完成这个双向绑定。

    • 在QML是用C++编写的models

    本来这是这个视频的重点,结果发现,在最后使用的时候,非常简单,两个注册函数就搞定了。反倒是把大量的精力花在了如何编写model上。在编辑器中,qml对于C++槽函数的智能提示也做得非常的好,很方便。
    GitHub: https://github.com/PikachuHy/qml-demo/tree/master/using-cpp-models-in-qml


Log in to reply
 

走马观花

最近的回复

  • 由于我们在二次开发的过程中,需要采用调试来测试开发的效果,而使用cmake生成的Visual Studio项目,代码都是O2优化的,不太符合我们的需求,而我们必须每次都要载入Visual Studio 2017手动修改代码优化到禁用,这的确有一些麻烦,于是我们需要找一个更加便利的方法达到效果。我在稍微研究了一下之后得到结论:其实很好解决。

    准备环境

    Windows 10
    Visual Studio 2017
    Notepad++

    随便打开一个vcxproj文件,然后按下快捷键:Ctrl + F,转到文件查找一栏。按照下面的要求填写:

    文件类型 *.vcxproj 查找目标 <Optimization>MaxSpeed</Optimization> 替换为 <Optimization>Disabled</Optimization>

    然后点击“在文件中替换”,等待一会儿,就可以看到优化全部去掉了。这样就可以顺利地单步调试而不会出现断点下不了或者是其它问题了。
    替换代码优化

    read more
  • 惊讶图.jpg
    USD是一个正在发展过程中的文件格式,最基础的,能够支持网格、简单的材质、简单的光照。稍微复杂一点,就可能要借助后续的插件支持了。比如说骨骼动画,这个在USD之前的版本都是没有的,后面慢慢地得到了支持。它是通过UsdSkel这个模块支持的。这个算是和USD核心代码平级的,所以算是USD的外围插件。其实看USDSkel的发展,USDSkel其实是打算做一个动画的最小集,即仅仅支持骨骼和约束的功能,后面更加复杂的功能,通过修改UsdSkel的特性来实现。

    USD已经有一套完善的机制可以很方便地添加自定义的类型。这主要通过USD内置的usdGenSchema.py脚本来达到效果。usdGenSchema.py脚本所在的位置是:

    D:\Develop\USD\pxr\usd\lib\usd

    所以要让USD支持约束,可以选择自己通过Schema来规划一下约束这个类型,包括哪些属性。USD的说明符(specifier)包括class、def和over。其中class和C++的类很相似。我们要自己写一个Schema,大致的内容是这样:

    #usda 1.0 ( """ This file constains schema for supporting skeletal animations in USD. """ subLayers = [ @usdGeom/schema.usda@ ] ) over "GLOBAL" ( customData = { string libraryName = "usdRig" string libraryPath = "qtdream/usd/usdRig" } ) { } class Constraint "Constraint" ( inherits = </Imageable> ) { uniform asset target ( doc = """Target represent affectors whom the constraint will affect to.""" ) uniform asset[] targets ( doc = """The parent targets representing this constraint tied to.""" ) uniform float[] weights ( doc = """Optionally, weights can control the percentage the constraint is affected.""" ) uniform vector3f[] targetOffsetTranslates ( doc = """Optionally, we can specify translate offset to precisely adjust.""" ) uniform vector3f[] targetOffsetRotates ( doc = """Optionally, we can specify rotate offset to precisely adjust.""" ) uniform vector3f rotationDecompositionTarget ( doc = """Used in parentConsstraint.""" ) uniform bool useDecompositionTarget ( doc = """Used in parentConstraint.""" ) }

    接着要根据这个schema产生一大堆的代码,于是,编写以下的脚本:

    :: 运行UsdView插件.bat set Path=^ D:\Develop\Python27;^ D:\Develop\Python27\Scripts;^ D:\Develop\USD_Build\lib;^ D:\Develop\USD_Build\bin;^ D:\Develop\USD_Build\third_party\maya\lib;^ D:\Develop\Autodesk\Maya2018\bin;^ %Path% set MAYA_PLUG_IN_PATH=%MAYA_PLUG_IN_PATH%;^ D:\Develop\USD_Build\third_party\maya\plugin set PYTHONPATH=%PYTHONPATH%;^ D:\Develop\USD_Build\lib\python;^ D:\Develop\Autodesk\Maya2018\Python\Lib\site-packages set MAYA_SCRIPT_PATH=%MAYA_SCRIPT_PATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources;^ D:\Develop\USD_Build\third_party\maya\plugin\pxrUsdPreviewSurface\resources set XBMLANGPATH=%XBMLANGPATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources :: 需要安装Jinja2,否则会报错 pip install Jinja2 :: 开始定位到D盘目标位置上,然后执行脚本。 pushd D:\Develop\USD\qtdream\usd\lib\usdRig python D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py schema.usda . popd

    如果出现了

    Traceback (most recent call last):
    File "D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py", line 43, in <module>
    from jinja2 import Environment, FileSystemLoader
    ImportError: No module named jinja2
    错误,那么可能要想办法让python寻找到Jinja2。于是脚本中添加了:

    pip install Jinja2

    最后很高兴,顺利地生成了想要的C++文件,和产生的Schema文件。

    read more
  • USDView推出了插件的框架,可以顺利地编写Python脚本,作为插件让USDView载入。网上有一个高手,他在他的github上发布了自己的USDView插件。这个插件可不简单,他将USDView推出的插件架构活灵活用,并且添加了一些值得赞赏的效果:支持了USDView不曾支持的节点编辑功能。这个插件的名称叫usdNodeGraph。

    他的github地址在这里:

    https://github.com/1xinghuan/usdNodeGraph.git

    下面介绍一下如何使用吧。

    首先当然是把他的库拿下来了。推荐安装git,并且执行git clone放在本地。

    git clone git@github.com:1xinghuan/usdNodeGraph.git

    获取Qt.py库
    Qt.py库是统一Qt的版本用的。大家知道Qt4的时候有PySide,而Qt5有PySide2。我们在使用Python的时候,通常要执行 from PySide2.QtWidgets import QWidget

    等等脚本,而Qt.py将其统一起来了。不用你写PySide还是PySide2了。所以要执行下面的脚本:

    sudo pip install qt.py

    编写脚本支持其载入
    这个脚本和普通载入USDView插件差不多,唯一的不同是需要设置PYTHONPATH。因为它还要引入其它的库。脚本的内容是: #!/bin/sh export LD_LIBRARY_PATH=/usr/local/USD/lib64:$LD_LIBRARY_PATH export PYTHONPATH=$PYTHONPATH:/usr/local/USD/lib/python # 让usdView能够顺利地载入usdNodeGraph的地址 currentDir=$(cd `dirname $0`; pwd) export PXR_PLUGINPATH_NAME=$currentDir/usdNodeGraph/plugin export PYTHONPATH=$PYTHONPATH:/$currentDir/usdNodeGraph/lib/python:$currentDir/usdNodeGraph/plugin /usr/local/USD/bin/usdview $currentDir/model/7_29_1.usda

    保存文件,就可以顺利地执行了。其实还是挺简单的。执行后的效果如下:
    USDView结合usdNodeGraph.gif

    read more
  • 首先这是一个未知的旅程,有安装Maya软件有风险,一是因为它是商业软件,可能会有版权纠纷,二是Maya软件非常大,安装不慎,可能会出现各种奇怪的问题。我也是参考国外一篇文章才敢开始自己的Maya之路。至于遇到的问题,的确非常多,Maya依赖的版本太多,一些版本不一致的问题可能会导致很多诡异的问题,这时找Maya,找Autodesk是无济于事的。

    安装Maya的运行必备项

    tbb:Intel库,支持并行计算用,典型的是paralell_for用法。
    tiff:图像格式支持
    ssl:加密用
    png:图像格式支持
    gcc:编译器套件

    sudo apt-get install -y libtbb-dev libtiff5-dev libssl-dev libpng12-dev libssl1.0.0 gcc libjpeg62

    安装Alien

    因为Maya是rpm包,要转为deb包,就要借助alien了。alien的安装如下:

    sudo apt-get install -y alien elfutils

    安装多媒体库

    Maya的多媒体编辑功能依赖多媒体库,Linux最常见的就是gstreamer了。

    sudo apt-get install -y libaudiofile-dev libgstreamer-plugins-base0.10-0

    安装图形库

    Maya在Linux中,只有OpenGL是支持的(Maya这么古老的软件是不会这么快支持Vulkan的啦),所以也要安装。目前OpenGL的Linux实现是mesa。命令是:

    sudo apt-get install -y libglw1-mesa libglw1-mesa-dev mesa-utils

    这和安装Qt支持的图形库差不多,事实上Maya的GUI也是大部分依赖Qt。

    安装字体库

    Maya是极度依赖字体的,试想一下,在Linux字体那么丑,能看吗?当然不能。所以还是要安装合适的字体才行。命令是:

    sudo apt-get install -y xfonts-100dpi xfonts-75dpi ttf-mscorefonts-installer fonts-liberation

    在配置ttf-mscorefonts的时候,点击Ok和Yes就可以了。

    同时安装其它依赖Maya的包

    其余依赖Maya的包可以通过下面的命令安装。
    csh:c外壳命令行程序
    fam:Linux中计算机文件或者目录改变的观察者。一旦改变了执行通知操作。

    sudo apt-get install -y csh tcsh libfam0 libfam-dev xfstt

    安装xp6包

    cd /tmp
    wget http://launchpadlibrarian.net/183708483/libxp6_1.0.2-2_amd64.deb
    sudo dpkg -i libxp6_1.0.2-2_amd64.deb

    下载Maya2018

    你可以去Maya官网下载Maya2018,它有给出链接,下载应该不会遇到太多问题。
    然后解压Maya2018到合适的位置。
    我这里是:/media/jiangcaiyang/Data/软件安装包/Linux安装包/Maya2018

    安装Maya2018

    现在需要利用alien将所有rpm包转为deb包。

    sudo alien -cv *.rpm

    接着安装deb包

    udo dpkg -i *.deb

    掉包rpm,欺骗Maya并且让安装通过

    因为Maya的Linux安装包是给Redhat或者是CentOS开发的,所以默认rpm作为安装包的程序。对于debian系,它一直不认的,所以在运行带界面的程序的时候,总是出错。于是我们要执行一下欺骗,让rpm一直返回正确,这样才能欺骗Maya的安装包,让其安装通过。

    编写一个简单的C程序:

    echo "int main (void) {return 0;}" > mayainstall.c

    编译C程序

    gcc mayainstall.c

    备份rpm

    sudo mv /usr/bin/rpm /usr/bin/rpm_backup

    替换掉rpm

    sudo cp -v a.out /usr/bin/rpm

    对一些库位置建立软连接,让Maya识别到

    因为Maya的安装程序在Redhat或者是CentOS测试成功,而在Debian系不成功,对于处于Debian系的Deepin来说,还是挺麻烦的呢。因此还是要重新建立链接才行。

    sudo ln -s /usr/lib/x86_64-linux-gnu/libtbb.so /usr/lib/x86_64-linux-gnu/libtbb_preview.so.2
    sudo ln -s /usr/lib/x86_64-linux-gnu/libtiff.so /usr/lib/libtiff.so.3
    sudo ln -s /usr/lib/x86_64-linux-gnu/libssl.so /usr/autodesk/maya2018/lib/libssl.so.10
    sudo ln -s /usr/lib/x86_64-linux-gnu/libcrypto.so /usr/autodesk/maya2018/lib/libcrypto.so.10

    启动Maya 2018的安装包并且进行安装

    Maya 2018的安装包名称是setup,需要为此添加可执行的权限,因此要执行以下的命令:

    chmod +x setup
    然后执行之
    sudo ./setup
    之后就出现了Maya安装的界面了。久违了哈。
    Maya安装界面

    选择单机版,并且全部输入1。
    Maya安装全部输入1

    下个界面选择【继续】,然后就顺利地完成啦。点击【完成】
    Maya安装完成
    还没有完呢,还需要继续进行下一步的操作才行。

    对已经安装的Maya执行额外的操作

    首先是创建目录。

    sudo mkdir -p /usr/tmp
    给新建立的目录满权限
    sudo chmod 777 /usr/tmp

    为Maya创建一些配置目录。

    mkdir -p ~/maya/2018 ~/maya/2018/syncColor/Shared

    添加一句配置,解决Maya段错误

    echo "MAYA_DISABLE_CIP=1" >> ~/maya/2018/Maya.en

    运行命令解决颜色管理错误

    echo "LC_ALL=C" >> ~/maya/2018/Maya.env

    执行命令,递归地强制让~/maya给满权限。

    chmod -Rfv 777 ~/maya

    恢复扫尾工作

    还记得我们将rpm掉包了吗?现在恢复回来。

    sudo rm -v /usr/bin/rpm
    sudo mv -v /usr/bin/rpm_backup /usr/bin/rpm

    替换正版的Maya2018(选用)

    因为我们安装Maya2018的时候,序列号和产品密钥都是随便填写的1,但是如果是换用正版的Maya2018,我们需要将序列号填写为666-69696969,密钥填写为657J1,并且我们需要用正版的库替换掉我们自己安装的库。因此要执行下面的操作:

    sudo mv /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23_old
    sudo cp libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib

    最后出现我们喜闻乐见的结果~
    Maya 2018的运行效果

    read more

关注我们

微博
QQ群