qt简单的浏览器

最新推荐文章于 2024-01-25 16:26:27 发布

我与松柏

最新推荐文章于 2024-01-25 16:26:27 发布

阅读量1.9k

点赞数 3

文章标签： qt web

本文链接：https://blog.youkuaiyun.com/weixin_42422991/article/details/116247547

版权

本文介绍了如何使用Qt框架创建一个简单的浏览器。配置.pro文件以包含webengine模块，设计UI包括后退、前进、重载按钮及地址栏。通过自定义MyTabWidget、MyWebView和MainWindow类，实现浏览器功能，如在QTabWidget中展示QWebEngineView，处理前进、后退、重载操作，并支持视频播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,

最低0.47元/天解锁文章