qt简单的浏览器

1 .pro项目文件配置

添加webengine相关的模块

QT       += core gui webenginewidgets

2 ui设计

方左边是三个按钮，分别是后退、前进和重载功能，右边是QLabel和lineEdit，存放网页的地址。
下方是一个QTabWidget组件，默认有两个tabBar，在代码中处理掉一个。在每个tab下的tabView中放入的是QWebEngineView组件（Widget），在代码中处理。

3 主要的3个类

3.1 MyTabWidget

这个是自己新建的类，继承自QTabWidget。在ui中，将对应的QTabWidget组件提升为这个新建的类。
在这个myTabWidget类中，只对tab控件的一些qss属性进行设置，不做多余的改动。
mytabwidget.cpp

#include "mytabwidget.h"

MyTabWidget::MyTabWidget(QWidget *parent) : QTabWidget(parent)
{
    this->setStyleSheet("QTabBar::tab { width:200px;}"); //设置tabBar的宽度固定
    this->setTabsClosable(true);//设置tabBar上右边的关闭按钮（X）显示出来
}

3.2 MyWebView类

这个类也是自己新建的类，继承自QWebEngineView类，主要目的是生成view用来放在MyTabWidget中。这个类中，需要对createWindow函数进行重写，以便实现功能。其余的修改没有。

//这个函数是重写，参数类型这些都不能修改
//这个函数要返回视图指针，因为也还要给page包装
QWebEngineView* MyWebView::createWindow(QWebEnginePage::WebWindowType type)
{
	//  需要在头文件中，包含#include"mainwindow.h",才能使用MainWindow这个类。
	//  this->window(),返回的是视图所在的窗口，这个很重要，有了这个可以实现一些数据的交互
    MainWindow *mainWindow = qobject_cast<MainWindow*>(window());
    if (!mainWindow)
        return nullptr;

    switch (type)
    {
        case QWebEnginePage::WebBrowserTab: // html网页请求的是打开一个新的tab
        {
        	// 需要包含MyWebView类的头文件；创建一个新视图
            MyWebView* webview = new MyWebView; 
            // 在窗口的mytabwidget（成员变量）添加tab，tab的视图为这个新视图
            mainWindow->mytabwidget->addTab(webview,"");
            // 获得当前mytabwidget中的tab数目，即打开了多少个网页
            int index = mainWindow->mytabwidget->count();
            // 将刚添加进来的tab设置为当前的
            mainWindow->mytabwidget->setCurrentIndex(index-1);
            // 这个信号槽是绑定视图的title和mytabwidget对应的tabBar的文字内容
            connect(webview,&MyWebView::titleChanged,this,[=](QString qs){
                mainWindow->mytabwidget->setTabText(index-1,qs);
            });
            // 这个信号槽是绑定视图的图标和mytabwidget对应的tabBar的图标
            connect(webview,&MyWebView::iconChanged,this,[=](QIcon ic){
                mainWindow->mytabwidget->setTabIcon(index-1,ic);
            });
            // 这个信号槽是绑定视图的网页地址和地址栏（lineEdit）的文本内容
            connect(webview,&MyWebView::urlChanged,this,[=](){
               mainWindow->edit->setText(webview->url().toString());
            });
			// 这个信号槽使绑定视图的网页加载进度和状态栏的进度显示
            connect(webview,&MyWebView::loadProgress,this,[=](int p){
                if (p ==100) // 加载完成
                {
                    mainWindow->stabar->showMessage("加载完成");//显示message
                }
                else
                {
                    mainWindow->stabar->showMessage("");//这个不能省略，作用是先屏蔽文字内容，否则不能显示进度条的进度信息
                    mainWindow->progress->setValue(p); //progress成员变量，进度条
                }
            });
			// qlist是QList<_T>的链表，用来存储视图webview，否则便不能再mainwindow中处理视图
            mainWindow->qlist.append(webview); 
            return webview; //返回新建的视图
        }
        case QWebEnginePage::WebBrowserBackgroundTab:
        {
            return this;
        }
        case QWebEnginePage::WebBrowserWindow: // html网页请求的是打开一个新的窗口，这里没有处理，后续可以完善
        {
            return this;
        }
    case QWebEnginePage::WebDialog: {// html网页请求的是打开一个对话框，这里没有处理，后续可以完善
        return this;
    }
    }
    return this;
}

3.3 MainWindow类

代码中进行注释讲解。
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 
#include"mywebview.h"
#include"mytabwidget.h"
#include
#include
#include
#include
#include
#include

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    // 这几个成员需要能够在MyWebView类中访问，所以需要新建这样的成员变量。
    MyTabWidget* mytabwidget; //mytabwidget
    QLineEdit* edit; // 
    QList<MyWebView*> qlist; //存放tabView视图
    QProgressBar* progress; // 进度条类
    QStatusBar* stabar; //状态栏


private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include
#include
#include
#include
#include

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this); 
    progress = new QProgressBar; // 在堆内存上，分配一个进度条
    this->showMaximized(); //窗口默认最大化打开
    mytabwidget = ui->tabWidget; // ui->tabWidget是私有属性，转成公有的成员变量，方便访问
    edit = ui->lineEdit; //同上
    stabar = ui->statusbar; //同上

    ui->tabWidget->removeTab(1); //移除两个tab以便重新添加
    ui->tabWidget->removeTab(0);

    ui->lineEdit->setText("http://www.baidu.com/"); // 浏览器初始打开网页
	
	//下面分成几个部分，太长了看着烦
    //---------------------------------------------------------------------------------------
    //  浏览器初始化，即第一个网页的一些设置
    MyWebView* webview = new MyWebView; 
    qlist.append(webview); //添加视图
    webview->load(QUrl("http://www.baidu.com/")); //加载网址

    ui->tabWidget->addTab(webview,"tab"); //将webview添加到窗口的tabwidget中

	// 设置TabBar的text。注意绑定的是这个新建的view
    connect(webview,&MyWebView::titleChanged,this,[=](){
            ui->tabWidget->setTabText(0,webview->title());
    });
    //设置tabBar的图标
    connect(webview,&MyWebView::iconChanged,this,[=](QIcon ic){
        mytabwidget->setTabIcon(0,ic);
    });

    //---------------------------------------------------------------------------------------
    // 对于的MyTabWidget的一些映射操作
    //tabBar被左键单击两次，则关闭这个tab
    connect(mytabwidget,&MyTabWidget::tabBarDoubleClicked,this,[=](int index){
        mytabwidget->removeTab(index); // 移除这个tab
        qlist.removeAt(index); //视图链表中，删除这个视图
        ui->statusbar->showMessage("加载完成");//显示message，避免进度条重新变化
    });
	// tabBar右边的×被点击时，同样删除这个tab
    connect(mytabwidget,&MyTabWidget::tabCloseRequested,this,[=](int index){
        mytabwidget->removeTab(index);
        qlist.removeAt(index);
        ui->statusbar->showMessage("加载完成");//显示message
    });
	// 前进按钮
    connect(ui->forwardBtn,&QPushButton::clicked,this,[=](){
        int index = mytabwidget->currentIndex(); // 当前在那个tab下
        qlist.at(index)->forward(); //对应tab的视图前进。因为新建tab、视图和添加视图是在同时完成的，所以视图链表存储的顺序即是tab的索引顺序
    });
    //同上
    connect(ui->backBtn,&QPushButton::clicked,this,[=](){
        int index = mytabwidget->currentIndex();
        qlist.at(index)->back();
    });
    //同上
    connect(ui->reloadBtn,&QPushButton::clicked,this,[=](){
        int index = mytabwidget->currentIndex();
        qlist.at(index)->reload();
    });
    //---------------------------------------------------------------------------------------
	// 地址栏的文本框内回车键被按下，则将当前tab中视图的url进行修改，即重定向网页
    connect(ui->lineEdit,&QLineEdit::returnPressed,this,[=](){
        int index = mytabwidget->currentIndex();
        qlist.at(index)->setUrl(QUrl(ui->lineEdit->text()));
    });
	// 如果当前tab被删除，或者新建tab等时，则刷新地址栏的网页地址文本内容
    connect(mytabwidget,&MyTabWidget::currentChanged,this,[=](int index){
        if (index >= 0 && index< qlist.length())
            edit->setText(qlist.at(index)->url().toString());
    });

	// 状态栏中添加进度条
    ui->statusbar->addWidget(progress);
    // 进度条的qs设置
    progress->setStyleSheet("QProgressBar{\
                            border: none;\
                            color: white;\
                            text-align: center;\
                            background: rgb(68, 69, 73);\
                    }\
                    QProgressBar::chunk {\
                            border: none;\
                            background: rgb(0, 160, 230);}");
	// 初始化视图的加载进度
    connect(webview,&MyWebView::loadProgress,this,[=](int p){
        if (p ==100)
        {
            ui->statusbar->showMessage("加载完成");//显示message
        }
        else
        {
            ui->statusbar->showMessage("");
            progress->setValue(p);
        }
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}

4 运行结果

可以正常浏览网页，可以在地址栏输入网址回车即可跳转，可以在一个webview中完成前进、后退、重载。可以播放视频。


注：CSDN能够上传的gif图片不能超过5M，太烦了。