qt怎么实现这个效果

qt如何实现这个效果
如下图，点紫色按钮后，两个qdockwidget隐藏起来，然后按钮朝右，再次点击两个qdockwidget又显示出来。没怎么接触过qt ，以前也没做过这种效果。最好有类似的Demo。
------解决思路----------------------
参考 http://doc.qt.io/qt-5/qtwidgets-mainwindows-dockwidgets-example.html
------解决思路----------------------
QT 有个QSplitter 类实现窗口切分

用QSplitter 先添加QPushButton， 然后再插入红紫色框的Layout或者Widget。然后在插入最右侧白板。

通过响应 QPushButtond clicked()信号，产生时先将窗口右侧白板移除QSplitter ，在移除红紫色框。 修改QPushButton的按钮图片。 最后将 白板插入 QSplitter 

第二次点击响应 QPushButtond clicked()信号， 先移除右侧白板， 修改按钮图片，插入红紫色框。 插入右侧白板

Qt C++ GUI编程第四版 1,2,6章好好看看就行了。。

如果你有用过向MFC之类的框架代码 转Qt一两天的事情。