Qt Quick设置父子的操作不简单



  • 题图送给论坛大大。post_cover
    今天我告诉大家一个事儿,Qt Quick设置父子操作不简单!😲
    比如这段代码:

            function insertItem_impl( item, splitIndex )
            {
                // 尝试在某个项目之前插入项目
                fillIndex = splitIndex;
    
    // 注意这段Start
                var handlesToResetIndex = [ ];
                print( "previous it has: " + splitterHandles.children.length + " splitters." );
                var i = 0;
                for ( i = splitIndex; i < splitterHandles.children.length; ++i )
                {
                    var handle = splitterHandles.children[i];
                    print( "[][] the previous handle(" + handle.__handleIndex + ") will be set to: " + ( i + 1 ) );
                    handle.__handleIndex = i + 1;
                    handle.parent = null;
                    handlesToResetIndex.push( handle );
                }
    
                var newHandle = handleLoader.createObject( splitterHandles, {"__handleIndex": splitIndex } );
                newHandle.parent = splitterHandles;
    
                for ( i in handlesToResetIndex )
                {
                    handlesToResetIndex[i].parent = splitterHandles;
                }
    // 注意这段End
    
                print( "insertItem_impl: Finally, inserting item ( objectName: " + item.objectName +
                      " ) at splitIndex: " + splitIndex );
                var childrenToRestore = [ ];            
                for ( i = splitIndex; i < splitterItems.children.length; ++i )
                {
                    var child = splitterItems.children[i];
                    child.objectName = i + 1;
                    childrenToRestore.push( child );
                    child.parent = null;
                }
    
                // 新增该item为孩子
                item.parent = splitterItems;
    
                // 把其余的补充进来
                for ( i in childrenToRestore )
                {
                    childrenToRestore[i].parent = splitterItems;
                }
    
    
                //splitterItems.children
                //item.parent = splitterItems
                d.initItemConnections(item)
            }
    

    本来我想通过handle拉出界面的。像Blender这样的。
    0_1499333766101_bff2255b-e14e-4580-8a0e-67bf83b7d05a-image.png
    但是……
    0_1499333781416_070450ee-d392-4f1c-a74b-40a2e8d5d55d-image.png
    OK
    0_1499333801993_7fd1c332-d0e2-41ba-a93b-a2509b0494fb-image.png
    OK
    0_1499333833534_d9962576-ee02-42b8-987b-4eb4a65432ca-image.png
    OK
    0_1499333849468_6224144e-7a82-4900-ab94-f68639903233-image.png
    Error

    为什么会这样呢?查了好多的代码,最后我终于理解了其中的奥秘。为了以后不再犯错误,我记录一下。



  • 上面的截图表示,本来按照0、1、2、3的顺序一次排列的handle(抓手),但是错乱了。原来是Qt Quick的item设置父子关系的问题。

    好了,为了阐述问题,你需要明白两点。

    1. 如何在运行期创建新的item呢?答案是Component.createObject()函数,就像这样写的:
    var newHandle = handleLoader.createObject( splitterHandles, {"__handleIndex": splitIndex } );
    
    1. 如何在运行期将item从它的父亲中移除吗?因为Item没有remove这样操作,所以想从Item中找到答案是很难的。但是其实方法相当简单:
    handle.parent = null;
    

    这样就可以将Item和它的父亲解除关系。

    好了,有了这些知识,再看看我原来的代码有哪些问题呢?

                for ( i = splitIndex; i < splitterHandles.children.length; ++i )
                {
                    var handle = splitterHandles.children[i];
                    print( "[][] the previous handle(" + handle.__handleIndex + ") will be set to: " + ( i + 1 ) );
                    handle.__handleIndex = i + 1;
                    handle.parent = null;
                    handlesToResetIndex.push( handle );
                }
    

    看出来了没有?问题在于for循环中设置结束条件是需要对splitterHandles.children.length求值,但是在循环体中却对每一个handle都解除了父子关系,结果导致循环过早结束。导致程序出现了大的BUG。

    知道问题所在了,解决起来就方便了。下面是我解决后的代码(请忽视一些输出语句和注释,会优化的……)

    function insertItem_impl( item, splitIndex )
            {
                // 尝试在某个项目之前插入项目
                fillIndex = splitIndex;
    // 注意这段Start
                var handlesToResetIndex = [ ];
                print( "previous it has: " + splitterHandles.children.length + " splitters." );
                var i = 0;
                for ( i = splitIndex; i < splitterHandles.children.length; ++i )
                {
                    var handle = splitterHandles.children[i];
                    print( "[][] the previous handle(" + handle.__handleIndex + ") will be set to: " + ( i + 1 ) );
                    handle.__handleIndex = i + 1;
                    //handle.parent = null;
                    handlesToResetIndex.push( handle );
                }
                for ( i in handlesToResetIndex )
                {
                    handlesToResetIndex[i].parent = null;
                }
    
                var newHandle = handleLoader.createObject( splitterHandles, {"__handleIndex": splitIndex } );
                newHandle.parent = splitterHandles;
    
                for ( i in handlesToResetIndex )
                {
                    handlesToResetIndex[i].parent = splitterHandles;
                }
    // 注意这段End
                print( "insertItem_impl: Finally, inserting item ( objectName: " + item.objectName +
                      " ) at splitIndex: " + splitIndex );
                var childrenToRestore = [ ];            
                for ( i = splitIndex; i < splitterItems.children.length; ++i )
                {
                    var child = splitterItems.children[i];
                    child.objectName = i + 1;
                    childrenToRestore.push( child );
                    //child.parent = null;
                }
                for ( i in childrenToRestore )
                {
                    childrenToRestore[i].parent = null;
                }
    
                // 新增该item为孩子
                item.parent = splitterItems;
    
                // 把其余的补充进来
                for ( i in childrenToRestore )
                {
                    childrenToRestore[i].parent = splitterItems;
                }
    
    
                //splitterItems.children
                //item.parent = splitterItems
                d.initItemConnections(item)
            }
    

    希望遇到的这些问题给大家提供一些有益的启示,以后可不要犯我同样的错误了哦。学到了没有学过的操作,真好。



  • 我好像看到有人点赞我~😲


Log in to reply
 

走马观花

最近的回复

  • C

    Qt for MCU需要商业授权的

    read more
  • Qt for MCUs

    搭建Qt for MCUs PC端开发环境。qt for mcus提供了一个完整的图形框架和工具包,包含了在MCUs上设计、开发和部署gui所需的一切。它允许您在裸机或实时操作系统上运行应用程序。

    先决条件

    开发主机环境支持仅限于Windows 10

    MSVC compiler v19.16 (Visual Studio 2017 15.9.9 or newer) x64

    CMake v3.13 or newer (you can install it using the Qt Online installer) x64

    使用Qt联机安装程序安装Qt for MCUs,该安装程序可通过Qt帐户下载

    安装Qt 5.14和Qt Creator 4.11 or higher

    安装链接

    › Qt: https://account.qt.io/downloads
    › CMake: https://cmake.org/download/
    › Python 2.7 32-bit: https://www.python.org/downloads/release/python-2716/
    › Arm GCC: https://developer.arm.com/tools-and-software/open-source-software/developer-tools/gnutoolchain/gnu-rm/downloads
    › J-Link Software Pack: https://www.segger.com/downloads/jlink/JLink_Windows.exe
    › J-Link OpenSDA Firmware: https://www.segger.com/downloads/jlink/OpenSDA_MIMXRT1050-EVKHyperflash
    › STM32CubeProgrammer: https://www.st.com/en/development-tools/stm32cubeprog.html
    › STM32 ST-LINK Utility: https://www.st.com/en/development-tools/stsw-link004.html​​​​​​​

    Qt Creator设置 启用Qt Creator插件 选择“帮助>关于插件”,然后从列表中选择“MCU支持(实验性)”插件,重新启动Qt Creator以应用更改
    替代文字 为MCU创建Qt工具包

    选择工具>选项>设备>MCU

    选择Qt for MCUs-Desktop 32bpp作为目标

    如果尚未设置,请提供Qt for MCUs安装目录的路径。

    单击Apply应用。

    替代文字

    替代文字
    替代文字

    注意:

    编译器要选X64,Qt版本要选64bit,CMake Tool选x64

    打开恒温器项目demo

    选择文件>打开文件或项目。。。

    打开CMakefiles.txt文件来自thermo文件夹的文件。

    选择Qt作为MCU-桌面32bpp套件。

    单击“配置项目”以完成。

    替代文字

    问题

    开发主机环境支持仅限于Windows 10

    C++编译失败,文本大字体.pixelSize.

    文本类型无法正确呈现需要复杂文本布局的unicode序列。对复杂文本使用StaticText

    read more
  • H

    hi 有问题请教你,方便加个联系方式吗

    read more
  • boost.asio是一个很棒的网络库,这回儿我也开始系统地学习起来了。想想当年接触boost,也有八年多了。这次开始接触boost,觉得既熟悉又陌生。熟悉的是小写字母+下划线的命名方式、晦涩的模板、很慢的编译速度以及较大的程序体积,陌生的是asio的各种概念:io服务、接收器、套接字等等:我之前对网络编程不是非常了解。

    于是根据我的理解,参考《Boost.Asio C++网络编程》实现了这样一个简单的客户端和服务端通信的例子,例子非常简单,还不完善,但是幸运的是,可以在本机上互通了。
    下面是客户端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void writeHandler( const boost::system::error_code& ec, size_t bytesTransferred ) { if ( ec ) { cout << "Write data error, code: " << ec.value( ) << "transferred: " << bytesTransferred << endl; } else { cout << "OK! " << bytesTransferred << "bytes written. " << endl; } } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::socket sock( service ); ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; sock.connect( ep, ec ); if ( ec ) { cout << "Connect error, code: " << ec.value( ) << ", We will exit." << endl; return ec.value( ); } else { char buf[1024] = "Hello world!"; sock.async_write_some( buffer( buf ), writeHandler ); sock.close( ); } return service.run( ); }

    下面是服务端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void acceptHandle( const boost::system::error_code& code ) { cout << "Accepted." << endl; } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; ip::tcp::socket sock( service ); ip::tcp::acceptor acceptor( service, ep ); acceptor.async_accept( sock, acceptHandle ); if ( ec ) { cout << "There is an error in server. code: " << ec.value( ) << endl; } return service.run( );// 阻塞运行 }

    运行结果是这样的:
    78448d7b-b3ae-42fc-9e2e-4dd2fbdac2c2-image.png

    我对boost.asio中几个概念的理解:

    io_service,这就是一个类似事件循环的东西,它为io设备提供服务,故名。不管是套接字、文件还是串口设备,都要使用它的服务。它的run()函数相当于启动了一个事件循环。一旦有消息了,即进行响应。这也是实现异步编程的重要基础。 socket,这个类则是套接字,可以处理TCP或者是UDP请求。有同步以及异步的处理方式,也有带异常以及不带异常的处理方式。 acceptor,接收器,仅仅是服务端使用。相当于其余框架中的listener,作接收用的。

    比较浅显,如果有不当之处,敬请指正。

    read more

关注我们

微博
QQ群