3.QT悬浮窗口及TAB窗口--Apple的学习笔记

一，前言

之前做了基本的界面自动布局控件，以及掌握界面切换及隐藏显示的方法，可以参考我的blog:2.QT界面切换及隐藏--Apple的学习笔记。但是之前的界面是比较古老的工具界面，新的工具界面，比如IDE的工具界面，都是有悬浮窗口，可以自动拖拉位置的，比如我用的CANoe,CANape软件有选项卡，选项卡中有悬浮窗。所以我需要掌握这类界面制作方法。

二，小练习

自定义需求：制作4个tab窗口，其中一个窗口中需要支持可悬浮的窗口，并且可以自由拖动固定到布局中。

三，遇到的问题

1. 如何使用Tabwidget？
解决方法：用QTabWidget控件，参考官网tabdialog工程，可以知道每个tab可以当做一个widget界面。然后add到tabdiaglog中，布局后显示即可。关键代码如下,API使用起来还是很简单的。

tabWidget = new QTabWidget;
tabWidget->addTab(new GeneralTab(fileInfo), tr("General"));
tabWidget->addTab(new PermissionsTab(fileInfo), tr("Permissions"));
tabWidget->addTab(new ApplicationsTab(fileInfo), tr("Applications"));
......
mainLayout->addWidget(tabWidget);

2. 如何制作悬浮窗口？
解决方法：用QDockWidget控件，参考官网dockwidgets工程，使用起来也很容易，感觉雷同，都是AddWidget这样的API。

    //窗口悬浮窗口
    QDockWidget *dock = new QDockWidget(tr("Customers"), this);
    dock->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
    //初始化列表框
    customerList = new QListWidget(dock);
    customerList->addItems
    ......
    //为dock窗体绑定控件
    dock->setWidget(customerList);
    //mainwindows中添加悬浮窗口，并且放置在左边
    addDockWidget(Qt::LeftDockWidgetArea, dock);
    //menu工具栏点击按钮则显示/隐藏悬浮窗口
    viewMenu->addAction(dock->toggleViewAction());

3. 悬浮窗口无法嵌套到中间
解决方法：mainwindow->setDockNestingEnabled(true);可以解决。

四，效果展示

第二个General page中有5个浮动窗口可以自由拖动。其它的界面都是之前做的，把他们打包到Widget后再添加到tab控件后就成为了这样的效果，改动很少，可扩展性不错~

image.png

五，小结

连续做了3个刻意练习，让我感觉到就是层层打包，然后api主要就是add和set。看来要做一个QT的小工具应该是比较简单的。毕竟不涉及到GUI界面重绘。