dnrops
/
slint-tutorial-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
slint-tutorial-cn/起步/3 - 搭建C++开发环境.md

9.2 KiB
Raw Permalink Blame History

前置准备

  • 可以使用任意支持C++, CMake语言的IDE进行开发，比如vscode，Clion, VS。
  • 最好能够支持Slint语法的编辑器

在CLion上配置

创建一个项目

这是此时我们的CMakeLists.txt文件中的内容：

cmake_minimum_required(VERSION 3.28)  
project(hello_slint)  
  
set(CMAKE_CXX_STANDARD 17)  
  
add_executable(hello_slint main.cpp)

创建ui/application.slint文件并编写如下代码：

export component MainWindow inherits Window{

}

创建src/main.cpp

int main(){

}

目录结构

  • hello_slint
    • src
      • main.cpp
    • ui
      • application.slint
    • CMakeLists.txt
cmake_minimum_required(VERSION 3.28)  
project(hello_slint)  
  
set(CMAKE_CXX_STANDARD 17)  
  
include(FetchContent)  
FetchContent_Declare(  
        Slint  
        GIT_REPOSITORY https://github.com/slint-ui/slint.git  
        GIT_TAG release/1  
        SOURCE_SUBDIR api/cpp  
)  
FetchContent_MakeAvailable(Slint)  
  
set(SRC src/main.cpp)  
add_executable(hello_slint ${SRC})  
  
target_link_libraries(hello_slint PRIVATE Slint::Slint)  
  
set(UI ui/application.slint)  
slint_target_sources(hello_slint ${UI})  
  
if (WIN32)  
    add_custom_command(TARGET hello_slint POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_RUNTIME_DLLS:hello_slint> $<TARGET_FILE_DIR:hello_slint> COMMAND_EXPAND_LISTS)  
endif()

在这个配置文件中

include(FetchContent)  
FetchContent_Declare(  
        Slint  
        GIT_REPOSITORY https://github.com/slint-ui/slint.git  
        # `release/1` will auto-upgrade to the latest Slint >= 1.0.0 and < 2.0.0  
        # `release/1.0` will auto-upgrade to the latest Slint >= 1.0.0 and < 1.1.0        GIT_TAG release/1  
        SOURCE_SUBDIR api/cpp  
)  
FetchContent_MakeAvailable(Slint)

无需进行任何更改，熟悉CMake的小伙伴可能会了解这是一种导入库的方式，CMake会自动git clone 项目，然后根据项目的规则进行配置。

  • target_link_libraries(hello_slint PRIVATE Slint::Slint) 第一个参数是项目名，根据当前项目进行修改
  • slint_target_sources(hello_slint memory.slint) 第一个参数也是项目名，第二个以其之后的参数是slint文件的路径，也就是也可以写成slint_target_sources(hello_slint memory.slint another.slint)
  • add_custom_command(TARGET hello_slint POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_RUNTIME_DLLS:hello_slint> $<TARGET_FILE_DIR:hello_slint> COMMAND_EXPAND_LISTS) 针对windows平台的语句，需要注意其中不只是第一个参数需要修改，后面的参数例如 $<TARGET_RUNTIME_DLLS:hello_slint> 中也要同时进行修改

让我们来修改一下当前项目的结构，方便之后的管理，同时也会对CMakeLists.txt进行同步修改，并且这里让我们创建一个slint ui文件：

不用着急，我们暂时还不需要编写main.cpp和application.slint中的代码部分，让我们先对项目构建以下，可是我们似乎会遇到这样的报错信息：

[1/9] Creating directories for 'slint-populate' [1/9] Performing download step (git clone) for 'slint-populate' 正克隆到 'slint-src'... 致命错误：在 '/mnt/Workspace/CLang/hello_slint/cmake-build-debug/_deps/slint-src' 检测到可疑的仓库所有权 要为本仓库创建特例，请运行： git config --global --add safe.directory /mnt/Workspace/CLang/hello_slint/cmake-build-debug/_deps/slint-src CMake Error at slint-subbuild/slint-populate-prefix/tmp/slint-populate-gitclone.cmake:49 (message): Failed to checkout tag: 'release/1' ... -- Configuring incomplete, errors occurred! [Finished]

git clone相关的知识这里不做过多赘述，此时我们从善如流，将建议的代码输入，再配置一次。如果没猜错，接下来还有一些内容也需要git, 所以同样也要用到上述的指令多次配置。

如果顺利的完成配置，你就可以看到这样的输出：

-- The C compiler identification is GNU 13.2.1 -- The CXX compiler identification is GNU 13.2.1 -- Detecting C compiler ABI info -- Detecting C compiler ABI info - done -- Check for working C compiler: /usr/bin/cc - skipped -- Detecting C compile features -- Detecting C compile features - done -- Detecting CXX compiler ABI info -- Detecting CXX compiler ABI info - done -- Check for working CXX compiler: /usr/bin/c++ - skipped -- Detecting CXX compile features -- Detecting CXX compile features - done -- Rust Toolchain: nightly-x86_64-unknown-linux-gnu -- Rust Target: x86_64-unknown-linux-gnu -- Determining required link libraries for target x86_64-unknown-linux-gnu -- Required static libs for target x86_64-unknown-linux-gnu: gcc_s;util;rt;pthread;m;dl;c -- Found Rust: /home/cvrain/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu/bin/rustc (found version "1.78.0") -- Using Corrosion as a subdirectory -- Rust Toolchain: nightly-x86_64-unknown-linux-gnu -- Rust Target: x86_64-unknown-linux-gnu -- Found Rust: /home/cvrain/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu/bin/rustc (found suitable version "1.78.0", minimum required is "1.70") -- Performing Test HAVE_STDATOMIC -- Performing Test HAVE_STDATOMIC - Success -- Found OpenGL: /usr/lib/libOpenGL.so
-- Configuring done (15.5s) -- Generating done (0.0s) -- Build files have been written to: /mnt/Workspace/CLang/hello_slint/cmake-build-debug [Finished]

在vscode上配置

选择一个你喜欢的位置创建一个文件夹，在当前目录打开vscode

mkdir hello_in_vs
cd hello_in_vs
code .

安装如下插件：

创建ui/application.slint文件并编写如下代码：

export component MainWindow inherits Window{

}

创建src/main.cpp

int main(){

}

编写CMakeLists.txt并写入如下内容

cmake_minimum_required(VERSION 3.28)  
project(hello_slint)  
  
set(CMAKE_CXX_STANDARD 17)  
  
include(FetchContent)  
FetchContent_Declare(  
        Slint  
        GIT_REPOSITORY https://github.com/slint-ui/slint.git  
        GIT_TAG release/1  
        SOURCE_SUBDIR api/cpp  
)  
FetchContent_MakeAvailable(Slint)  
  
set(SRC src/main.cpp)  
add_executable(hello_slint ${SRC})  
  
target_link_libraries(hello_slint PRIVATE Slint::Slint)  
  
set(UI ui/application.slint)  
slint_target_sources(hello_slint ${UI})  
  
if (WIN32)  
    add_custom_command(TARGET hello_slint POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_RUNTIME_DLLS:hello_slint> $<TARGET_FILE_DIR:hello_slint> COMMAND_EXPAND_LISTS)  
endif()

在这个配置文件中

include(FetchContent)  
FetchContent_Declare(  
        Slint  
        GIT_REPOSITORY https://github.com/slint-ui/slint.git  
        # `release/1` will auto-upgrade to the latest Slint >= 1.0.0 and < 2.0.0  
        # `release/1.0` will auto-upgrade to the latest Slint >= 1.0.0 and < 1.1.0        GIT_TAG release/1  
        SOURCE_SUBDIR api/cpp  
)  
FetchContent_MakeAvailable(Slint)

无需进行任何更改，熟悉CMake的小伙伴可能会了解这是一种导入库的方式，CMake会自动git clone 项目，然后根据项目的规则进行配置。

  • target_link_libraries(hello_slint PRIVATE Slint::Slint) 第一个参数是项目名，根据当前项目进行修改
  • slint_target_sources(hello_slint memory.slint) 第一个参数也是项目名，第二个以其之后的参数是slint文件的路径，也就是也可以写成slint_target_sources(hello_slint memory.slint another.slint)
  • add_custom_command(TARGET hello_slint POST_BUILD COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_RUNTIME_DLLS:hello_slint> $<TARGET_FILE_DIR:hello_slint> COMMAND_EXPAND_LISTS) 针对windows平台的语句，需要注意其中不只是第一个参数需要修改，后面的参数例如 $<TARGET_RUNTIME_DLLS:hello_slint> 中也要同时进行修改

在构建CMake项目中，会弹出如下报错信息：

[cmake] [0/8] Performing download step (git clone) for 'slint-populate' [cmake] 正克隆到 'slint-src'... [cmake] 致命错误：在 '/mnt/Workspace/CLang/Slint/hello_in_vs/build/_deps/slint-src' 检测到可疑的仓库所有权 [cmake] 要为本仓库创建特例，请运行： [cmake] git config --global --add safe.directory /mnt/Workspace/CLang/Slint/hello_in_vs/build/_deps/slint-src

git clone相关的知识这里不做过多赘述，此时我们从善如流，将建议的代码输入，再配置一次。如果没猜错，接下来还有一些内容也需要git, 所以同样也要用到上述的指令多次配置。

最后一步

接下来让我们重新编辑main.cpp

#include "application.h"

int main(){
    auto window = MainWindow::create();
    window->run();
}

此时我们再编译运行项目，便会获得一个空窗口出现在你的视线内，恭喜你，完成了项目的配置。

当看到这里就可以发现，slint文件和qt的qwidget、qml，gtk的Cambalache类似，会在编译源码之前，将ui文件编译为对应平台对应系统的代码文件。在Rust中就将MainWindow编译为MainWindow模块（通过slint::include_modules!();导入），在C++就编译为一个名为MainWindow.h的头文件。再之后聊到控件的交互通信会详细介绍这些内容。