QT浏览器学习之二：浏览器主界面（1）

 

原创文章，转载请注明出处，谢谢！
作者：清林，博客名：飞空静渡

 

这里的浏览器的制作是参考易简浏览器来制作的，在查看了易简浏览器的源代码0.45版本后，一步一步构建一个易简浏览器。

易简浏览器遵循GPL来发布，具体可以到易简浏览器主页上下载源代码来查看（http://eazy.uueasy.com/），在写这篇文章时，最新的是0.47版，但现在使用的是0.45版。

 

这个主界面只是一个未完成的简单的主界面，遵循着一步步构建的步骤，由简单到复杂，最后完成一个浏览器的步骤。

这步的浏览器，没有设计网页，只是一个简单的框架。下一步会构建复杂点的主界面，一步步的添砖加瓦，这也是学习的最好步骤。

 

我这里的易简浏览器代码和原作者的源代码有些不一样，所以在看我的代码时，要注意一点。代码不单是要看，要抄，还会要修改，这样才会学得到。

 

开发工具：Qtcreator。

 

这一个步骤的主界面如下：

 

下面是代码的简单说明：

主界面是一个MainWindow的类：

mainwindow.h:

#include <QPoint> #include <QSize> class TabToolBar; class ToolBar; class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow (QWidget *parent = 0); virtual ~MainWindow (); QDockWidget *head; TabToolBar *m_pTopTab; public slots: void slotWindowQuit(); void slotWindowMin(); void slotWindowMax(); protected: void mousePressEvent(QMouseEvent *event); void mouseMoveEvent(QMouseEvent *event); void mouseDoubleClickEvent(QMouseEvent *event); private: // test if the current window is maxisize // if the current windows is maxisize return true or return false bool bIsMaxiSize(); // if window is max, set it to presize and prepoint or set it to max size void setMaxiSize(); private: // keep the pre window's point and size QPoint m_windowPoint; QSize m_windowSize; QPoint m_dragPos; ToolBar *m_pMainToolBar; };

 

主界面的构建如下：

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent) { if(!BrowserWindow) { BrowserWindow = this; } setWindowFlags(Qt::CustomizeWindowHint | Qt::FramelessWindowHint); // no Boarder setWindowTitle(tr("Eazy")); QDockWidget *pMainDockWiget = new QDockWidget(this); m_pTopTab = new TabToolBar(this, this); pMainDockWiget->setTitleBarWidget(m_pTopTab); QMainWindow *pMainWindow = new QMainWindow(this); m_pMainToolBar = new ToolBar(this); pMainWindow->addToolBar(m_pMainToolBar); pMainDockWiget->setWidget(pMainWindow); pMainDockWiget->setFloating(false); pMainDockWiget->setFeatures(QDockWidget::NoDockWidgetFeatures); setCentralWidget(pMainDockWiget); // test this->resize(800, 600); }

 

由上面的代码可以看到，主界面用

setWindowFlags(Qt::CustomizeWindowHint | Qt::FramelessWindowHint); // no Boarder

去掉了标题栏。

 

其头部有这几个结构组成：

一个QDockWidget的pMainDockWidget，这个是主的widget，所有widget都在这上面，所以最后会setCentralWidget(pMainDockWiget);

 

主widget会添加一个

m_pTopTab = new TabToolBar(this, this);
pMainDockWiget->setTitleBarWidget(m_pTopTab);

这是一个网页浏览的tab，这里还没添加实现代码。

 

下面是一个工具栏，工具栏嵌在QMainWindow中：

QMainWindow *pMainWindow = new QMainWindow(this);
m_pMainToolBar = new ToolBar(this);
pMainWindow->addToolBar(m_pMainToolBar);
pMainDockWiget->setWidget(pMainWindow);

 

移动界面靠

void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);

 

在void mouseMoveEvent(QMouseEvent *event)中：

void MainWindow::mouseMoveEvent(QMouseEvent *event) { if (event->buttons() & Qt::LeftButton) //if (event->button() == Qt::LeftButton) // not work { if (m_dragPos.y() < 20) { if (bIsMaxiSize()) { setMaxiSize(); move(event->globalPos() - QPoint(m_windowSize.width()/2, 5)); m_dragPos = event->globalPos() - frameGeometry().topLeft(); } else { move(event->globalPos() - m_dragPos); } } event->accept(); } }

 

靠 m_dragPos.y() < 20 这句判断限制只有在头部才可以移动整个界面，这和易简的代码不一样。

移动时如果界面是最大化，则缩小到其前一个状态时的大小。

 

源代码下载地址：http://download.youkuaiyun.com/source/3236209