哎，兄弟们，今天咱聊聊怎么在 QML 里把 WebView 给整合进桌面应用。

先说一句，别以为 QML 只Neng玩移动端 UI，实际上配合 QtWebEngine，简直Neng把个完整的浏览器塞进你的小工具里。

下面我就像老友一样，慢慢道来。记得随时点头哈，别走神。

Qt 安装包里挑选带有 WebEngine 的版本。

IDE 用 Qt Creator Zui省事，要是你喜欢手敲 CMake 那也行。

确保你的机器装了对应的 OpenGL 或者软件渲染后端，不然 WebView 渲染会卡顿。

还有一点要注意：QtWebEngine 在 macOS 上默认禁用了硬件加速，需要在 .pro 或 CMakeLists 里加上 -qtwebengine-disable-gpu。

项目根目录下新建 main.qml 当入口文件。

再新建一个 Resources 文件夹，放图标、配置文件啥的。

别忘了在 CMakeLists 里声明依赖：

find_package
qt_add_executable
qt_add_qml_module(MyBrowser
    URI MyBrowser
    VERSION 1.0
    QML_FILES main.qml
)
target_link_libraries

先把窗口给整出来再往里塞个 WebEngineView。

下面这段代码基本够用了：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtWebEngine 1.9
import Qt.labs.platform 1.1
ApplicationWindow {
    id: mainWin
    visible: true
    width: 1024
    height: 720
    title: "内置网页浏览器"
    // 网页渲染控件
    WebEngineView {
        id: webView
        anchors.fill: parent
        url: ""   // 默认空白页，后面会自动跳转
        onUrlChanged: historyData.append})
    }
    // 历史记录模型
    ListModel { id: historyData }
    // 隐藏/显示历史面板
    ListView {
        id: historyList
        width: parent.width
        height: parent.height * 0.3
        model: historyData
        delegate: Text { text: url }
        visible: false
        anchors.bottom: parent.bottom
        clip:true
        background: Rectangle { color:"#f5f5f5"; opacity:0.9 }
    }
    // 鼠标右键弹出菜单区块
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onPressed:{
            if rightMenu.popup
        }
    }
    // 上下文快捷菜单
    Menu{
        id:rightMenu
        MenuItem{ text:"复制"; onTriggered:webView.triggerWebAction }
        MenuItem{ text:"粘贴"; onTriggered:webView.triggerWebAction }
        MenuItem{ text:"全选"; onTriggered:webView.triggerWebAction }
        MenuItem{ text:"刷新页面"; onTriggered:webView.triggerWebAction }
        MenuItem{ text:"放大"; onTriggered:webView.zoomFactor+=0.1 }
        MenuItem{ text:"缩小"; onTriggered:webView.zoomFactor-=0.1 }
        MenuItem{ text:"外部浏览器打开"; onTriggered:{ Qt.openUrlExternally } }
    }
    // 系统托盘图标 + 菜单
    SystemTrayIcon{
        id: trayIcon
        visible:true
        icon.source:"qrc:/Resources/icon.png"
        menu:Menu{
            MenuItem{ text:"显示窗口"; onTriggered:{ mainWin.show; mainWin.raise; mainWin.requestActivate } }
            MenuItem{ text:"切换历史面板"; onTriggered:{ historyList.visible=!historyList.visible } }
            MenuItem{ text:"退出程序"; onTriggered:{ Qt.quit } }
        }
        // 单击托盘图标切换显隐状态
       onActivated:{ reason=> {
            if{
                mainWin.visible ? mainWin.hide : mainWin.show
            }
       }}
   }
   // 拦截关闭按钮，让窗口Zui小化到托盘而不是直接退出
   onClosing:{ close.accepted=false; mainWin.hide }
   Component.onCompleted:{
       // 启动时直接打开一个默认页面可自行改成你的业务入口……
       webView.url = "about:blank"
       trayIcon.show
   }
}

说实话，这两个功Neng是桌面感Zui强的点儿。

SystemTrayIcon 本身只负责在系统通知区放个图标。

它的 .menu 属性Ke以直接绑定一个 Menu, 那里面写啥dou行——打开窗口、切换历史、甚至调出设置页面。

鼠标左键点一下图标，会触发 .onActivated, 我们在里面写了“Ru果Yi经可见就隐藏，不可见就显示”。这招在hen多轻量级客户端里超受欢迎，用户体验杠杠的。

有时候你想让原生 C++ 把一些数据塞进 QML，比如本地缓存路径或者用户登录状态。

C++ 那边只需要继承自 , 用 @Q_INVOKABLE` 标记方法，然后在主函数里把对象注入上下文：

QObject *bridge = new BridgeObject;
engine.rootContext->setContextProperty;

SystemTrayIcon {
    id: trayIconExample 
    visible:true 
    icon.source:"qrc:/Resources/icon.png"
}
ApplicationWindow {
   id:centerWindow 
   visible:true 
   width:auto height:auto title:"内置网页浏览器"
   /* 网页渲染控件 /
   WebEngineView {
      id:webPage 
      anchors.fill.parent 
      url:"about:"
      / 地址变geng自动存入历史 /
      onUrlChanged:{
          historyModel.append})
      } 
   } 
   / 历史记录数据模型 /
   ListModel {id:historyModel}
   / 历史列表面板，默认隐藏 */
   ListView{
       id:hList 
       width:auto height:auto model=historyModel delegate=Text{text:url} visible:false}
}