Nest开发笔记-NestUI v0.1.0

在本篇博客中，我将介绍NestUI模块的设计与实现，并说明如何集成第三方UI库SARibbon，如何设计MainWindow、DockWidget、DockWidgetManager等类

项目仓库：

Jerryym

Nest

Waiting for api.github.com...

00K

Waiting...

NestUI模块概述#

模块职责#

为Nest框架提供基于Qt的UI组件
负责对于框架中的UI进行管理，如：对于停靠窗口的管理(DockWidgetManager)

集成SARibbon#

SARibbon
- 是一个Qt下的Ribbon界面控件，提供了类似微软Office系列软件的操作界面
- SARibbon适用于大型软件、工业软件、复杂软件的ui
- SARibbon在设计时参考了MFC Ribbon接口的命名风格
- SARibbon的界面样式参考了微软Office系列软件以及WPS软件的Ribbon界面，并结合了两者的优点
- SARibbon是一个可定义多种主题风格的Ribbon控件，它能通过qss快速的定义出自己想要的主题风格
集成SARibbon

在NestUI中，我将SARibbon库作为第三方构件来支撑框架中的UI。
- 使用命令git submodule add https://github.com/Jerryym/SARibbon.git NestUI/vendor/SARibbon将SARibbon作为子模块添加到NestUI项目中，并通过命令git submodule update --init --recursive保证子模块被正确初始化和更新

MainWindow#

设计思路、
- 设计一个结构体用于存储主窗口属性：窗口宽度、窗口高度和窗口标题
- 设计一个名为MainWindow的类，此类继承于SARibbonMainWindow，使其能够使用SARibbon风格的UI
  
  NOTE
  后续根据开发和应用的实际需求，可能会把MainWindow设计成纯虚类。

代码

1
namespace NestUI {
2

3
    /// @brief 窗口属性
4
    typedef struct NESTUI_API sWindowProp
5
    {
6
        unsigned int m_nWidth;  //窗口宽
7
        unsigned int m_nHeight;  //窗口高
8
        QString m_STitle;   //窗口标题
9

10
        sWindowProp(unsigned int width = 1600, unsigned int height = 900,
11
          const QString& title = "Nest")
12
          : m_nWidth(width), m_nHeight(height), m_STitle(title)
13
        {}
14
    }sWindowProp;
15

16
    /// @brief 主窗口
17
    class NESTUI_API MainWindow : public SARibbonMainWindow
18
    {
19
        Q_OBJECT
20
    public:
21
        MainWindow(QWidget* parent = nullptr, const sWindowProp& sProp = sWindowProp());
22
        virtual ~MainWindow() {}
23

24
    public:
25
        /// @brief 获取主窗口宽度
26
        /// @return
27
        unsigned int GetWidth() const { return m_sProp.m_nWidth; }
28
        /// @brief 获取主窗口高度
29
        /// @return
30
        unsigned int GetHeigth() const { return m_sProp.m_nHeight; }
31
        /// @brief 获取主窗口标题名
32
        /// @return
33
        QString GetTitle() const { return m_sProp.m_STitle; }
34

35
    private:
36
        /// @brief 主窗口属性
37
        sWindowProp m_sProp;
38
    };
39

40
}
41

42
//MainWindow.cpp
43
namespace NestUI {
44

45
    MainWindow::MainWindow(QWidget* parent, const sWindowProp& sProp)
46
      : SARibbonMainWindow(parent), m_sProp(sProp)
47
    {
48
        //设置窗口标题
49
        setWindowTitle(sProp.m_STitle);
50
        //初始化窗口大小
51
        resize(QSize(sProp.m_nWidth, sProp.m_nHeight));
52
    }
53

54
}

DockWidget#

设计思路
- 由于整个Nest框架是基于Qt开发的，所以主窗口类一定要能满足Qt相关特性（e.g：信号和槽机制）
- 支持窗口设计，如设置窗口初始大小，窗口标题，窗口图标等
- 支持可扩展，能够根据不同应用场景进行对应的继承扩展
实现
- 设计一个名为 DockWidget的类，此类继承于 QDockWidget，使其满足Qt停靠窗口相关功能和特性。
- 设计一个名为 clearWidget方法，用于清空DockWidget内容。
- 设计一个名为 refreshWidget方法，用于刷新DockWidget内容。

代码

1
namespace NestUI {
2

3
  class NESTUI_API DockWidget : public QDockWidget
4
  {
5
      Q_OBJECT
6
  public:
7
      DockWidget(QWidget* parent = nullptr);
8
      ~DockWidget();
9

10
  public:
11
      /// @brief 清空DockWidget内容
12
      virtual void clearWidget() = 0;
13
      /// @brief 刷新DockWidget
14
      virtual void refreshWidget() = 0;
15
  };
16

17
}

DockWidgetManager#

在框架中，我希望有一个对象能管理应用程序主窗口中的所有停靠窗口，且能够提供相关增删改查的方法。

功能设计
- 这个类的对象在应用程序主窗口生命周期内当前仅存在一个，因此我们可以使用单例模式设计这个类。
- 提供相关增删改查的方法。
实现
- 设计一个名为 DockWidgetManager的类，使用单例模式设计。
- 在类中定义一个 QMap类型的成员变量，实现DockWidget对应的窗口标题与对应的DockWidget对象对应。

代码

1
namespace NestUI {
2

3
    /// @brief DockWidget窗口管理类
4
    class NESTUI_API DockWidgetManager
5
    {
6
    public:
7
        /// @brief 获取当前DockManager
8
        /// @return
9
        static DockWidgetManager* GetDockManager(QMainWindow* mainWindow);
10

11
        /// @brief 添加DockWidget
12
        /// @param STitle DockWidget对应的窗口标题
13
        /// @param dockWidget
14
        void AddDockWidget(const QString& STitle, QDockWidget* dockWidget, Qt::DockWidgetArea area);
15

16
        /// @brief 获取DockWidget
17
        /// @param STitle STitle DockWidget对应的窗口标题
18
        /// @return
19
        QDockWidget* GetDockWidget(const QString& STitle);
20

21
        /// @brief 移除DockWidget
22
        /// @param STitle DockWidget对应的窗口标题
23
        void RemoveDockWidget(const QString& STitle);
24

25
        /// @brief 获取当前主窗口中的dockWidget个数
26
        /// @return
27
        int GetDockWidgetNum() const { return m_DockWidgetMap.size(); }
28

29
    protected:
30
        DockWidgetManager(QMainWindow* mainWindow);
31
        ~DockWidgetManager();
32

33
    private:
34
        /// @brief DockWidget窗口管理单例: 程序运行时，每个主窗口当且只能有一个DockManager存在
35
        static DockWidgetManager* s_Instance;
36
        QMainWindow* m_mainWindow; //应用程序主窗口
37
        //dockWidget Map
38
        QMap<QString, QDockWidget*> m_DockWidgetMap;
39
    };
40

41
}
42

43
//DockWidgetManager.cpp
44
namespace NestUI {
45

46
    DockWidgetManager* DockWidgetManager::s_Instance = nullptr;
47

48
    DockWidgetManager::DockWidgetManager(QMainWindow* mainWindow)
49
    {
50
        m_mainWindow = mainWindow;
51
    }
52

53
    DockWidgetManager::~DockWidgetManager()
54
    {
55
        m_mainWindow = nullptr;
56
    }
57

58
    DockWidgetManager* DockWidgetManager::GetDockManager(QMainWindow* mainWindow)
59
    {
60
        // FIXED: 在此处插入 return 语句
61
        s_Instance = new DockWidgetManager(mainWindow);
62
        return s_Instance;
63
    }
64

65
    void DockWidgetManager::AddDockWidget(const QString& STitle, QDockWidget* dockWidget, Qt::DockWidgetArea area)
66
    {
67
        m_DockWidgetMap.insert(STitle, dockWidget);
68
        m_mainWindow->addDockWidget(area, dockWidget);
69
    }
70

71
    QDockWidget* DockWidgetManager::GetDockWidget(const QString& STitle)
72
    {
73
        if (m_DockWidgetMap.contains(STitle) == true)
74
        {
75
            return m_DockWidgetMap[STitle];
76
        }
77
        return nullptr;
78
    }
79

80
    void DockWidgetManager::RemoveDockWidget(const QString& STitle)
81
    {
82
        if (m_DockWidgetMap.contains(STitle) == true)
83
        {
84
            m_mainWindow->removeDockWidget(m_DockWidgetMap[STitle]);
85
            m_DockWidgetMap.remove(STitle);
86
        }
87
    }
88
}

测试#

为了检测当前程序设计的可用性，在Example项目中，修改了main.cpp文件中的代码：

1
int main(int argc, char* argv[])
2
{
3
    NestApp::Application app(argc, argv);
4

5
    NestUI::MainWindow* pMainWindow = new NestUI::MainWindow;
6
    app.SetMainWindow(pMainWindow);
7
    app.Run();
8

9
    return app.exec();
10
}

运行效果 从图上可以看到，最简单的MainWindow成功显示，大功告成~

Reference#

SARibbon