Qt5.9 UI设计(五)——将Tabwidget与treeWidget相互关联

前言

前面一章介绍了ControlTabWidget ControlTreeWidget maintitlebar 三个子页面同时布局到 mainwindow 的方法，本章介绍如何将ControlTreeWidget 与ControlTabWidget 联动。

(一)TabWidget子页面实现

1. 在maincontent 目录下创建 ota para tarnsmit telnet tester 五个目录，用来分别实现与ControlTabWidget的五个子页面。

   1. 使用添加UI的方式，添加 ota para tarnsmit telnet tester 五个类。
      

2. 将刚刚创建的5个widget类添加到可提升的类中
   

3. 将对应的页面提升为对应的类，这样就可以独立设计每个子页面了
   

4. 第一页设置到前面，也就是打开显示在最上面的为第一页
   

5. 添加一个 globaldef.hpp 全局文件，用来定义一些共用的结构体等信息
   

(二)ControlTabWidget 方法实现

1. 创建一个 MapWidget 容器，将页面索引和页面指针关联起来
2. 创建方法 initValue ，初始化的时候将各个页面信息填充到MapWidget 容器里
3. 创建信号发送函数 sendShowIndex ,用来发送切换信号
4. 创建槽函数 receiveShowCurrentTab，用来接收sendShowIndex 发送过来的信号，在该方法中，需要根据接收到的信号切换到对应的界面进行显示

#ifndef CONTROLTABWIDGET_H
#define CONTROLTABWIDGET_H

#include <QWidget>
#include "globaldef.hpp"
namespace Ui {
class ControlTabWidget;
}

typedef struct TabWidgetData
{
    QWidget *currentWidget;
    QString currentTabText;
}TabWidgetData;

using MapWidget = QMap<WidgetTabType, TabWidgetData>;

class ControlTabWidget : public QWidget
{
    Q_OBJECT

public:
    explicit ControlTabWidget(QWidget *parent = 0);
    ~ControlTabWidget();

signals:
    void sendShowIndex(WidgetTabType);

private slots:
    void receiveShowCurrentTab(WidgetTabType widgetTabType);

private:
    Ui::ControlTabWidget *ui;
    void initValue(void);
    MapWidget mapTabWidget;
};

#endif // CONTROLTABWIDGET_H

(三)ControlTreeWidget 方法实现

1. initValue 进行样式的设置
2. on_treeWidget_clicked 为按键事件处理槽函数
3. sendShowIndex 添加发送信号方法

#ifndef CONTROLTREEWIDGET_H
#define CONTROLTREEWIDGET_H

#include <QWidget>
#include "globaldef.hpp"
namespace Ui {
class ControlTreeWidget;
}

class ControlTreeWidget : public QWidget
{
    Q_OBJECT

public:
    explicit ControlTreeWidget(QWidget *parent = 0);
    ~ControlTreeWidget();

signals:
    void sendShowIndex(WidgetTabType);
private slots:
    void on_treeWidget_clicked(const QModelIndex &index);

private:
    Ui::ControlTreeWidget *ui;
    void initValue();
};

#endif // CONTROLTREEWIDGET_H

3. on_treeWidget_clicked 可以使用下面方式设置
   1. 在UI界面右键，选择转到槽函数
   2. 选择按键事件，OK，然后系统会自动创建该方法，我们只需要实现方法里面的内容就可以了。
      
      

(四) 将 ControlTabWidget 与 ControlTreeWidget 关联起来

1. 在 MainWindow 中创建 connect 连接
2. 将 widgetTree 的信号发送 sendShowIndex 方法 与widgetTab 的 receiveShowCurrentTab 信号接收槽函数相关联。
3. 这样就可以实现点击treeWidget的选项，然后跳到对应的tabwidget界面

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->widgetTree, SIGNAL(sendShowIndex(WidgetTabType)), ui->widgetTab, SLOT(receiveShowCurrentTab(WidgetTabType)));
}

4. 最终图像效果如下图：
   

总结

本章实现了ControlTreeWidget 与ControlTabWidget联动的功能，下面一章我们将介绍TileBar 功能的实现。
本章工程名为：page_sample_03.rar
完整工程下载地址，请到 liwen01 微信公众号中回复: QT 获取