Qt网络开发之Qt内嵌浏览器（其二）基于WebEngine实现（QML版）

前言

上一节在QWidget中用传统web引擎模块实现了一版浏览器。于是我心想又用QML来实现一遍，看效果怎样。于是我用ai帮忙写了段代码，纯qml的，顺便记录一下学习过程和最终代码。

一、原理模块和设计思路

这里我们用到了qml的QtWebEngine模块，基础组件是WebEngineView，相当于一个网页页面。给WebEngineView正常设置一个url，就能打开网址了。如果是新增弹页，则需要监听onNewWindowRequested信号处理，然后再新增页面。不然的话，qml默认是不处理新增弹页的哦。

1.1 整体架构
Header(ToolBar) - 导航控制
[←] [→] [↻] [地址栏_______] [Go] [+] [×]
TabBar- 标签页切换
WebView Container- 网页显示区 (多个 WebEngineView，只有一个 visible=true) │ │

1.2 三大核心模块
数据层 ListModel 存储每个标签的 URL、标题
控制层 TabBar + 自定义函数 标签切换、新建、关闭
视图层 Repeater + WebEngineView 网页渲染和显示

1.3 数据流设计

二、代码演示

2.1 完整代码

importQtQuick2.15importQtQuick.Window2.15importQtQuick.Controls2.15importQtWebEngine1.15importQtQuick.Layouts1.15ApplicationWindow{id:root visible:truewidth:1024height:768title:webViewContainer.currentTitle+" - Qt Browser"// ==================== 顶部工具栏 ====================header:ToolBar{RowLayout{anchors.fill:parent spacing:5anchors.margins:5// 导航按钮Button{text:"←"enabled:currentView&&currentView.canGoBack onClicked:currentView.goBack()}Button{text:"→"enabled:currentView&&currentView.canGoForward onClicked:currentView.goForward()}Button{text:"↻"enabled:currentView onClicked:currentView.reload()}// 地址栏TextField{id:urlField Layout.fillWidth:trueplaceholderText:"输入网址..."onAccepted:loadUrl(text)}// Go 按钮Button{text:"Go"enabled:urlField.text.trim().length>0onClicked:loadUrl(urlField.text)}Item{Layout.preferredWidth:10;}// 标签管理Button{text:"+";onClicked:addNewTab("about:blank")}Button{text:"×"enabled:tabModel.count>0onClicked:closeCurrentTab()}}}// ==================== 数据模型 ====================ListModel{id:tabModel ListElement{url:"https://www.baidu.com";title:"百度"}}// ==================== 主内容区 ====================ColumnLayout{anchors.fill:parent spacing:0// 标签栏TabBar{id:tabBar Layout.fillWidth:trueheight:35currentIndex:activeTabIndex onCurrentIndexChanged:{activeTabIndex=currentIndexupdateCurrentView()}Repeater{model:tabModel delegate:TabButton{text:model.title||"新标签页"width:150contentItem:RowLayout{Label{text:parent.parent.text elide:Text.ElideRight Layout.fillWidth:true}Button{text:"×"flat:truepadding:0Layout.preferredWidth:20Layout.preferredHeight:20background:Rectangle{color:parent.hovered?"#ddd":"transparent"radius:4}onClicked:{closeTab(index)mouse.accepted=true}}}onClicked:tabBar.currentIndex=index}}}// 网页容器Item{id:webViewContainer Layout.fillWidth:trueLayout.fillHeight:trueproperty string currentTitle:""Repeater{id:webViewRepeater model:tabModel delegate:Item{anchors.fill:parent visible:index===activeTabIndex WebEngineView{id:webView anchors.fill:parent url:model.url// URL 变化 - 同步地址栏和模型onUrlChanged:{tabModel.setProperty(index,"url",url.toString())if(index===activeTabIndex){urlField.text=url.toString()}}// 标题变化 - 更新标签和窗口标题onTitleChanged:{tabModel.setProperty(index,"title",title)if(index===activeTabIndex){webViewContainer.currentTitle=title}}// 拦截新窗口请求 - 在新标签打开onNewWindowRequested:function(request){addNewTab(request.requestedUrl.toString())request.reject()}// 加载状态onLoadingChanged:{if(loadRequest.status===WebEngineView.LoadFailedStatus){console.log("加载失败:",loadRequest.errorString)}}}}}}}// ==================== 全局属性 ====================propertyintactiveTabIndex:0property var currentView:null// ==================== 核心函数 ====================// 更新当前视图引用functionupdateCurrentView(){if(webViewRepeater.count>0&&activeTabIndex<webViewRepeater.count){var item=webViewRepeater.itemAt(activeTabIndex)if(item&&item.children.length>0){currentView=item.children[0]urlField.text=currentView.url.toString()webViewContainer.currentTitle=currentView.title}}}// 加载网址functionloadUrl(text){if(!currentView){updateCurrentView()if(!currentView)return}var cleanText=text.trim()if(!cleanText.startsWith("http://")&&!cleanText.startsWith("https://")&&!cleanText.startsWith("qrc:/")){cleanText="https://"+cleanText}currentView.url=cleanText urlField.text=cleanText currentView.forceActiveFocus()}// 新建标签functionaddNewTab(urlStr){tabModel.append({"url":urlStr,"title":"加载中..."})tabBar.currentIndex=tabModel.count-1}// 关闭标签functioncloseTab(index){if(tabModel.count<=1){tabModel.setProperty(0,"url","about:blank")tabModel.setProperty(0,"title","新标签页")return}tabModel.remove(index)if(index===tabBar.currentIndex&&index>=tabModel.count){tabBar.currentIndex=tabModel.count-1}elseif(index<tabBar.currentIndex){tabBar.currentIndex--}}functioncloseCurrentTab(){closeTab(tabBar.currentIndex)}// ==================== 初始化 ====================Component.onCompleted:{updateCurrentView()}}

2.2 代码要点说明

三、效果展示

3.1 功能清单

3.2 界面预览

3.3 使用流程
启动 → 默认打开百度首页
输入网址 → 地址栏输入后按 Enter 或点 Go
新建标签 → 点 + 按钮
切换标签 → 点击标签栏按钮
关闭标签 → 点标签上的 × 或工具栏 ×
点击外链 → 自动在新标签打开

四、总结

4.1 收获
QML 数据绑定 - 深刻理解了 Model-View 模式在 QML 中的实现
Repeater 用法 - 学会了如何正确访问 Repeater 生成的子项
WebEngine 集成 - 掌握了网页加载、弹窗拦截等核心功能
调试技巧 - console.log() 是 QML 调试的好朋友

4.2 可扩展方向
历史记录（用 ListElement 存储）
书签管理（持久化到文件）
下载管理（WebEngineDownloadItem）
隐私模式（WebEngineProfile 配置）
广告拦截（WebEngineUrlRequestInterceptor）