Qt （高仿Visio）流程图组件开发（七） 流程图 简单操作界面搭建

---

本系列目录

Qt （高仿Visio）流程图组件开发（一） 效果展示及基本开发框架构思
Qt （高仿Visio）流程图组件开发（二） 基本图元绘制 图元间连线绘制
Qt （高仿Visio）流程图组件开发（三） 图元基类如何定义，流程图多种图元类型实现
Qt （高仿Visio）流程图组件开发（四） 流程图 图元对齐 磁吸线功能
Qt （高仿Visio）流程图组件开发（五） 流程图 双击编辑图元内容实现
Qt （高仿Visio）流程图组件开发（六） 流程图 线图元 如何绘制曲线 连接线移除视口后无法显示
Qt （高仿Visio）流程图组件开发（七） 流程图 简单操作界面搭建
Qt （高仿Visio）流程图组件开发（八） 流程图 鼠标拖动图元到场景（QGraphicsScene）创建
Qt （高仿Visio）流程图组件开发（九） 流程图 代码展示

---

前言

  本文讲解如何为流程图搭建一个简易界面，将不同功能区分别封装为不同的类，方便维护与后期扩展。只是经验分享，描述内容并不绝对，如有误差欢迎指正。

---

一、界面实现。

  整体布局使用QMainWindow窗口，分为工具栏，图元工具栏，编辑栏，状态栏，图元编辑区域。目前只实现部分简单功能。实现效果如下。

  一些全局的功能存放在顶部工具栏，方便取用。图元类型全部存放在左侧图元工具栏，后期开发其他流程图图元，或者UML图、类图等等都可以添加在此处显示。图元编辑区域就是我们开发的FlowchartView（视口类）。
  为了方便开发，建议各部分功能区自定义自己实现，现有实现如下。

    // 流程图编辑框
    class FlowCharToolButtonBar;
    class FlowCharToolSideBar;
    class FlowCharWidget : public QMainWindow
    {
        Q_OBJECT

    public:

        FlowCharWidget(QWidget *parent = Q_NULLPTR);

        // 获取流程图数据
        FlowchartInforBases GetFlowCharData();

        // 设置流程图数据
        void SetFlowChartData(FlowchartInforBases _datas);

    private:

        // 初始化窗体
        void InitWindow();

        void DataTest();


    private:

        FlowchartScene*					scene_;							// 流程图编辑界面
        FlowCharToolSideBar*			tool_side_bar_;					// 左侧形状菜单
        FlowCharToolButtonBar*			tool_button_bar_;				// 顶层工具栏
    };


    //*******************************工具栏************************************
    class FlowCharToolButtonBar : public QToolBar
    {
        Q_OBJECT

    public:

        FlowCharToolButtonBar(QWidget *parent = Q_NULLPTR);

        ~FlowCharToolButtonBar();

        // 传入场景对象
        void SetFlowchartScene(FlowchartScene* _scene);

        // 传入形状栏
        void SetToolSideBar(FlowCharToolSideBar* _side_bar);

    private:

        // 初始化界面
        void InitWidget();

        // 文件保存
        void FileSave();

        // 文件读取
        void FileRead();

    private slots:

        // action通用槽函数
        void FlowActionSlot();


    private:

        // 设置鼠标状态		指针工具	连接线
        QAction *mouse_status_nomal_, *mouse_status_link_;
        // 形状
        QAction *item_type_;
        // 保存为文件	读取文件
        QAction* file_save_, * file_read_;

        FlowchartScene* scene_;
        FlowCharToolSideBar* side_bar_;

        // 测试数据
        FlowchartInforBases datas;
    };


    //*******************************左侧工具栏************************************
    class  FlowCharToolSideBar : public QDockWidget
    {
        Q_OBJECT

    public:
        FlowCharToolSideBar(QWidget *parent = Q_NULLPTR);
        ~FlowCharToolSideBar();

        void SetFlowchartScene(FlowchartScene* _scene);

    private:

        void InitWidget();

        void InitData();

    private slots:

        void FlowButtonSlot();

    private:

        QStackedWidget* stacked_widget_;

        FlowchartScene* scene_;
        QMap<std::string, QPushButton*> vec_btn_;
    };

总结

本文主要讲解界面如何搭建。
本文只是经验分享，描述内容并不绝对，如有误差欢迎指正。

如果此文帮助到你( •̀ ω •́ )✧，动动小手点个赞可好O(∩_∩)O。

原创文章，转载请标明本文出处。