前言上一节在QWidget中用传统web引擎模块实现了一版浏览器。于是我心想又用QML来实现一遍看效果怎样。于是我用ai帮忙写了段代码纯qml的顺便记录一下学习过程和最终代码。一、原理模块和设计思路这里我们用到了qml的QtWebEngine模块基础组件是WebEngineView相当于一个网页页面。给WebEngineView正常设置一个url就能打开网址了。如果是新增弹页则需要监听onNewWindowRequested信号处理然后再新增页面。不然的话qml默认是不处理新增弹页的哦。1.1 整体架构Header(ToolBar) - 导航控制[←] [→] [↻] [地址栏_______] [Go] [] [×]TabBar- 标签页切换WebView Container- 网页显示区 (多个 WebEngineView只有一个 visibletrue) │ │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:currentViewcurrentView.canGoBack onClicked:currentView.goBack()}Button{text:→enabled:currentViewcurrentView.canGoForward onClicked:currentView.goForward()}Button{text:↻enabled:currentView onClicked:currentView.reload()}// 地址栏TextField{id:urlField Layout.fillWidth:trueplaceholderText:输入网址...onAccepted:loadUrl(text)}// Go 按钮Button{text:Goenabled:urlField.text.trim().length0onClicked:loadUrl(urlField.text)}Item{Layout.preferredWidth:10;}// 标签管理Button{text:;onClicked:addNewTab(about:blank)}Button{text:×enabled:tabModel.count0onClicked: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:{activeTabIndexcurrentIndexupdateCurrentView()}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:transparentradius:4}onClicked:{closeTab(index)mouse.acceptedtrue}}}onClicked:tabBar.currentIndexindex}}}// 网页容器Item{id:webViewContainer Layout.fillWidth:trueLayout.fillHeight:trueproperty string currentTitle:Repeater{id:webViewRepeater model:tabModel delegate:Item{anchors.fill:parent visible:indexactiveTabIndex WebEngineView{id:webView anchors.fill:parent url:model.url// URL 变化 - 同步地址栏和模型onUrlChanged:{tabModel.setProperty(index,url,url.toString())if(indexactiveTabIndex){urlField.texturl.toString()}}// 标题变化 - 更新标签和窗口标题onTitleChanged:{tabModel.setProperty(index,title,title)if(indexactiveTabIndex){webViewContainer.currentTitletitle}}// 拦截新窗口请求 - 在新标签打开onNewWindowRequested:function(request){addNewTab(request.requestedUrl.toString())request.reject()}// 加载状态onLoadingChanged:{if(loadRequest.statusWebEngineView.LoadFailedStatus){console.log(加载失败:,loadRequest.errorString)}}}}}}}// 全局属性 propertyintactiveTabIndex:0property var currentView:null// 核心函数 // 更新当前视图引用functionupdateCurrentView(){if(webViewRepeater.count0activeTabIndexwebViewRepeater.count){var itemwebViewRepeater.itemAt(activeTabIndex)if(itemitem.children.length0){currentViewitem.children[0]urlField.textcurrentView.url.toString()webViewContainer.currentTitlecurrentView.title}}}// 加载网址functionloadUrl(text){if(!currentView){updateCurrentView()if(!currentView)return}var cleanTexttext.trim()if(!cleanText.startsWith(http://)!cleanText.startsWith(https://)!cleanText.startsWith(qrc:/)){cleanTexthttps://cleanText}currentView.urlcleanText urlField.textcleanText currentView.forceActiveFocus()}// 新建标签functionaddNewTab(urlStr){tabModel.append({url:urlStr,title:加载中...})tabBar.currentIndextabModel.count-1}// 关闭标签functioncloseTab(index){if(tabModel.count1){tabModel.setProperty(0,url,about:blank)tabModel.setProperty(0,title,新标签页)return}tabModel.remove(index)if(indextabBar.currentIndexindextabModel.count){tabBar.currentIndextabModel.count-1}elseif(indextabBar.currentIndex){tabBar.currentIndex--}}functioncloseCurrentTab(){closeTab(tabBar.currentIndex)}// 初始化 Component.onCompleted:{updateCurrentView()}}2.2 代码要点说明代码段作用关键点ListModel存储标签数据数据驱动 UI 更新visible: index activeTabIndex控制页面显示代替 StackLayoutwebViewRepeater.itemAt()获取页面对象解决 currentItem 为空onNewWindowRequested拦截弹窗request.reject() 必须调用onUrlChanged / onTitleChanged双向同步保持数据一致性三、效果展示3.1 功能清单功能状态说明多标签管理✅支持新建、切换、关闭地址栏同步✅标签切换/网页加载自动更新导航控制✅前进、后退、刷新弹窗拦截✅新窗口请求转为新标签自动协议补全✅输入域名自动加 https://标题显示✅窗口标题随网页变化3.2 界面预览3.3 使用流程启动 → 默认打开百度首页输入网址 → 地址栏输入后按 Enter 或点 Go新建标签 → 点 按钮切换标签 → 点击标签栏按钮关闭标签 → 点标签上的 × 或工具栏 ×点击外链 → 自动在新标签打开四、总结4.1 收获QML 数据绑定 - 深刻理解了 Model-View 模式在 QML 中的实现Repeater 用法 - 学会了如何正确访问 Repeater 生成的子项WebEngine 集成 - 掌握了网页加载、弹窗拦截等核心功能调试技巧 - console.log() 是 QML 调试的好朋友4.2 可扩展方向历史记录用 ListElement 存储书签管理持久化到文件下载管理WebEngineDownloadItem隐私模式WebEngineProfile 配置广告拦截WebEngineUrlRequestInterceptor