完成第一章
This commit is contained in:
cvraindays
parent
f258c35124
commit
5bcef47617
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 965 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -13,10 +13,10 @@
|
|||
| :-: | :--------- | :-: |
|
||||
| 起步 | 前言 | 完成 |
|
||||
| 起步 | 什么是Slint | 完成 |
|
||||
| 起步 | 搭建C++开发环境 | |
|
||||
| 起步 | 搭建Rust开发环境 | |
|
||||
| 起步 | 试一下在线编辑器 | |
|
||||
| 起步 | 我们的第一个窗口 | |
|
||||
| 起步 | 搭建C++开发环境 | 完成 |
|
||||
| 起步 | 搭建Rust开发环境 | 完成 |
|
||||
| | | |
|
||||
|
||||
|
||||
## 参考连接
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,242 @@
|
|||
|
||||
## 前置准备
|
||||
- 可以使用任意支持C++, CMake语言的IDE进行开发，比如vscode，Clion, VS。
|
||||
- 最好能够支持Slint语法的编辑器
|
||||
|
||||
## 在CLion上配置
|
||||
|
||||
创建一个项目
|
||||
|
||||
|
||||
|
||||
这是此时我们的`CMakeLists.txt`文件中的内容：
|
||||
```CMake
|
||||
cmake_minimum_required(VERSION 3.28)
|
||||
project(hello_slint)
|
||||
|
||||
set(CMAKE_CXX_STANDARD 17)
|
||||
|
||||
add_executable(hello_slint main.cpp)
|
||||
```
|
||||
|
||||
|
||||
创建`ui/application.slint`文件并编写如下代码：
|
||||
```Slint
|
||||
export component MainWindow inherits Window{
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
创建`src/main.cpp`
|
||||
```C++
|
||||
int main(){
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
**目录结构**
|
||||
- hello_slint
|
||||
- src
|
||||
- main.cpp
|
||||
- ui
|
||||
- application.slint
|
||||
- CMakeLists.txt
|
||||
|
||||
```CMake
|
||||
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()
|
||||
```
|
||||
|
||||
|
||||
在这个配置文件中
|
||||
```CMake
|
||||
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
|
||||
```bash
|
||||
mkdir hello_in_vs
|
||||
cd hello_in_vs
|
||||
code .
|
||||
```
|
||||
|
||||
安装如下插件：
|
||||
|
||||
|
||||
创建`ui/application.slint`文件并编写如下代码：
|
||||
```Slint
|
||||
export component MainWindow inherits Window{
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
创建`src/main.cpp`
|
||||
```C++
|
||||
int main(){
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
编写`CMakeLists.txt`并写入如下内容
|
||||
```CMake
|
||||
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()
|
||||
```
|
||||
|
||||
在这个配置文件中
|
||||
```CMake
|
||||
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`
|
||||
```C++
|
||||
#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的头文件。再之后聊到控件的交互通信会详细介绍这些内容。
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
## 前置准备
|
||||
- 可以使用任意支持Rust语言的IDE进行开发，比如vscode和RustRover。
|
||||
- 最好能够支持Slint语法的编辑器。
|
||||
|
||||
## 创建项目
|
||||
1. 通过命令创建： `cargo new first_window`
|
||||
2. 或者直接通过IDE直接创建
|
||||
|
||||
## 添加Slint库
|
||||
1. 通过指令添加：`cargo add slint@1.4.1`
|
||||
2. 在`Cargo.toml`中手动添加：
|
||||
```toml
|
||||
[package]
|
||||
name = "first_window"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
slint = "1.4.1"
|
||||
```
|
||||
|
||||
## 创建窗口
|
||||
|
||||
### 第一次创建窗口
|
||||
|
||||
编辑 `main.rs`
|
||||
```Rust
|
||||
fn main() {
|
||||
MainWindow::new().unwrap().run().unwrap();
|
||||
}
|
||||
|
||||
slint::slint! {
|
||||
export component MainWindow inherits Window {
|
||||
Text {
|
||||
text: "hello world";
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
之后编译运行，就得到了一个窗口出现在屏幕中，Slint的窗口默认是跟随系统主题的，由于我运行在Arch hyprland 深色主题的环境上，所以窗口呈现的是主题设置的颜色。如果是在windows上运行，应该是一个经典的窗口。
|
||||
|
||||
|
||||
|
||||
我们观察代码，不难发现这里使用了一个`slint::slint!`的宏，在其中使用Slint语法格式完成的窗口定义。而且实际代码书写中，不会大面积的使用内嵌代码的方式去构建一个应用，我们需要将UI布局，也就是Slint文件拆出来进行编写。
|
||||
|
||||
|
||||
### 第二次创建窗口
|
||||
|
||||
**创建并编辑 ui/applicatin.silnt**
|
||||
```Slint
|
||||
export component MainWindow inherits Window {
|
||||
}
|
||||
```
|
||||
|
||||
**在项目中创建build.rs**
|
||||
```Rust
|
||||
fn main(){
|
||||
slint_build::compile("ui/application.slint").unwrap();
|
||||
}
|
||||
```
|
||||
这只是一个简略写法，事实上我们可以遍历整个ui目录，批量编译各个文件，当然也可以发挥你自己的想法加入比如多线程编译或者其他内容。
|
||||
|
||||
|
||||
在`Cargo.toml`进行如下编辑：
|
||||
```toml
|
||||
[package]
|
||||
...
|
||||
build = "build.rs"
|
||||
|
||||
[dependencies]
|
||||
...
|
||||
|
||||
[build-dependencies]
|
||||
slint-build = "1.4.1"
|
||||
```
|
||||
到了这一步后，先进行`cargo build`以下，让cargo_build帮我生成rust文件。
|
||||
|
||||
**编辑 main.rs**
|
||||
```Rust
|
||||
slint::include_modules!();
|
||||
|
||||
fn main() {
|
||||
MainWindow::new()
|
||||
.expect("Cloud not create window")
|
||||
.run();
|
||||
}
|
||||
```
|
||||
接下来编译运行项目，就再次可以看到窗口啦！
|
||||
|
||||
|
||||
当看到这里就可以发现，slint文件和qt的qwidget、qml，gtk的Cambalache类似，会在编译源码之前，将ui文件编译为对应平台对应系统的代码文件。在Rust中就将MainWindow编译为MainWindow模块（通过`slint::include_modules!();`导入），在C++就编译为一个名为MainWindow.h的头文件。再之后聊到控件的交互通信会详细介绍这些内容。
|
||||
Loading…
Reference in New Issue