使用CLion创建包含有QWebEngineView控件的项目

hitzsf

已于 2023-12-09 15:28:06 修改

阅读量760

点赞数 2

分类专栏： # Qt CLion 文章标签： qt 开发语言

于 2022-07-10 16:30:42 首次发布

本文链接：https://blog.csdn.net/hitzsf/article/details/125707305

版权

Qt CLion 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

为啥用CLion开发QT?

CLion 能够支持Qt的开发
QtCreator 在代码规模偏大时,自动完成的提示反应会比较迟钝
.clangformat格式也是坑,调整了很多次也不顺心
个人比较喜欢IDEA开发程序的高度顺滑,想来作为统一家族的CLion也不会差

怎么使用CLion开发QT ?

1. 下载安装

CLion: A Cross-Platform IDE for C and C++ by JetBrains

2.新建Qt Widgets 项目

在这里插入图片描述

3. 设置ToolChain 工具链

在这里插入图片描述

4. CMake 设置

在这里插入图片描述

5. 编译运行

在这里插入图片描述

CLion从模板生成的简单widget项目,运行起来还是很顺畅的。

开发包含WebEngineView的项目

以上述代码为基础，开发一个自定义的widget，包含一个webengineview的控件

Clion使用cmake作为项目管理工具，反正我对cmak不懂，正好一道学习一些cmake的知识。有些东西还没有弄清除。只能随用随学随记录。😄

1. 新建一个文件夹src

个人偏好：喜欢将源代码集中放到一个源代码目录中。

1.1 新建文件夹

右键根节点 --> 新建 --> directory <src>
在这里插入图片描述

1.2 标记为源代码目录

在这里插入图片描述

1.3 将main.cpp移动到src下

在这里插入图片描述

2. 再新建一个自定义类的文件夹

2.1 新建自定义类的文件夹 Widget

2.2 新建一个Qt 界面类

在这里插入图片描述

此时的项目结构如下:
在这里插入图片描述

2.3 定义外部工具使用QtDesigner编辑UI文件

在这里插入图片描述

2.4 编辑widget.ui文件

右键 widget.ui 使用外部工具打开,拖入一个QWebEngineView控件，设置QWebEngineView的url，比如 https://www.baidu.com

在这里插入图片描述

2.5 点击编译 ,从ui生成对应的头文件

此时ui文件还没有生成相应的头文件,需要点击才会生成

2.6 加入 webengineview模块

在这里插入图片描述

2.7 cmake 加入运行时的依赖

由于对cmake 不熟悉,只能手动填写了,详见55~80行,这是cmake在打包的时候,需要复制一些依赖的程序和动态链接库, webengineview依赖的东西比较多,而且和普通的库文件不太一致。

cmake_minimum_required(VERSION 3.22)
project(test)

set(CMAKE_CXX_STANDARD 14)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

set(CMAKE_PREFIX_PATH "C:/Qt/5.14.2/msvc2017_64")

find_package(Qt5 COMPONENTS
        Core
        Gui
        Widgets
        WebEngineWidgets
        REQUIRED)

add_executable(test src/main.cpp src/Widget/widget.cpp src/Widget/widget.h src/Widget/widget.ui)
target_link_libraries(test
        Qt5::Core
        Qt5::Gui
        Qt5::Widgets
        Qt5::WebEngineWidgets
        )

if (WIN32)
    set(DEBUG_SUFFIX)
    if (MSVC AND CMAKE_BUILD_TYPE MATCHES "Debug")
        set(DEBUG_SUFFIX "d")
    endif ()
    set(QT_INSTALL_PATH "${CMAKE_PREFIX_PATH}")
    if (NOT EXISTS "${QT_INSTALL_PATH}/bin")
        set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")
        if (NOT EXISTS "${QT_INSTALL_PATH}/bin")
            set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")
        endif ()
    endif ()
    if (EXISTS "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll")
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E make_directory
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/platforms/")
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy
                "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll"
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/platforms/")
    endif ()
    foreach (QT_LIB Core Gui Widgets)
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy
                "${QT_INSTALL_PATH}/bin/Qt5${QT_LIB}${DEBUG_SUFFIX}.dll"
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>")
    endforeach (QT_LIB)


    #    WebEngineWidgets
    if ( TRUE )
        MESSAGE("copy WebEngineWidgets")
        # copy WebEngineWidgets 模块的依赖 *.dll
        foreach (WebEngineWidgets_dependency Network Positioning PrintSupport Qml QmlModels Quick QuickWidgets WebChannel WebEngineCore WebEngineWidgets)
            add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                    COMMAND ${CMAKE_COMMAND} -E copy
                    "${QT_INSTALL_PATH}/bin/Qt5${WebEngineWidgets_dependency}${DEBUG_SUFFIX}.dll"
                    "$<TARGET_FILE_DIR:${PROJECT_NAME}>")
        endforeach (WebEngineWidgets_dependency)
        # copy  WebEngineWidgets 模块的依赖 QtWebEngineProcess.exe
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy                 "${QT_INSTALL_PATH}/bin/QtWebEngineProcess${DEBUG_SUFFIX}.exe"
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>")
        # copy  WebEngineWidgets 模块的依赖 translations 目录
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy_directory
                "${QT_INSTALL_PATH}/translations"
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/translations")
        # copy  WebEngineWidgets 模块的依赖 translations 目录
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy_directory
                "${QT_INSTALL_PATH}/resources"
                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/resources")
    endif ()
endif ()