[Rust GUI]fltk-rs的helloworld

1、安装VSCode

下载安装VSCode
安装VSCode扩展 rust-analyzer或rust-analyzer(CN)

2、安装Microsoft C++ 生成工具

访问微软官网下载生成工具，勾选使用 C++ 的桌面开发之后会自动勾选5个项目
取消勾选以下项目
用于 Windows 的 C++ CMake 工具
测试工具核心功能 - 生成工具
C++ AddressSanitizer
只保留以下两个(SDK版本不用管，Win10或Win11都行，勾什么就留什么，不用自己勾)
MSVC v143 - VS 2022 C++ x64/x86 生成工具
Windows 11 SDK (10.0.22000.0)

3、安装rust

安装前必须重启电脑
访问Rust官网下载并安装Rust

4、设置rust镜像

运行where rustc找到.cargo文件夹
在.cargo文件夹下新建无后缀文件，文件名为config，并输入以下内容，保存

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

5、安装CMake

fltk-rs和fltk-fluid都需要安装CMake，如果以捆绑库的方式运行可以跳过安装

---

CMake官网、腾讯软件，用IDM、Motrix等下载软件加速下载
可能的文件名：cmake-3.26.0-windows-x86_64.msi
选择Add CMake to the system PATH for all users

6、安装git

fltk-rs和fltk-fluid都需要安装git，如果以捆绑库的方式运行可以跳过安装

---

阿里镜像、GitClone、Git官网
可能的文件名：Git-2.40.0-64-bit.exe

7、创建项目(方式一 使用捆绑库)

1. 创建
   cargo new fltkdemo
cd .\fltkdemo\
cargo add fltk --features=fltk-bundled
cargo run

2. 解决捆绑库下载问题

   注意报错提示，下载github文件失败，手动下载或修改下载地址
   thread ‘main’ panicked at ‘Download bundled libraries from “https://github.com/fltk-rs/fltk-rs/releases/download/1.4.0/lib_x64-windows-msvc.tar.gz” failed’

   新建文件夹fltk-lib，新建子文件夹.\fltk-lib\1.4.0(版本号要符合下载链接)
   根据下载链接手动下载压缩包，放入.\fltk-lib\1.4.0文件夹
   VSCode安装Live Server插件
   用VSCode打开文件夹fltk-lib，点击VSCode右下角Go Live启用本地服务器
   浏览器将自动打开，查看压缩包链接，例如：http://127.0.0.1:5500/lib_x64-windows-msvc.tar.gz
   
   查看整句报错，注意.cargo\registry\src\***\fltk-sys-***\build\bundled.rs这个文件，编辑这个文件

   字符串：

   https://github.com/fltk-rs/fltk-rs/releases/download
   

   修改为：

   /*"https://gitclone.com/github.com/fltk-rs/fltk-rs/releases/download"*/"http://127.0.0.1:5500"
   

   (运行成功后Github链接记得改回来，不然影响其他项目)
   (运行成功后Live Server就可以关闭了，fltk-lib文件夹也用不着了)
   删除.\fltkdemo\target文件夹，修改才能有效

3. 运行
   重新运行cargo run，成功输出Hello,world!
   

8、创建项目(方式二 本地CMake编译)

安装cmake，浏览到第5段按步骤安装
安装git，浏览到第6段按步骤安装

cargo new fltkdemo2
cd .\fltkdemo2\
cargo add fltk
cargo run，成功输出Hello,world!

9、使用fltk-rs

编辑文件.\src\main.rs

use fltk::{app, prelude::*, window::Window};

fn main() {
    let app = app::App::default();
    let mut win = Window::new(100, 100, 250, 100, "你好，fltk-rs！");
    win.end();
    win.show();
    app.run().unwrap();
}

运行cargo run，成功显示窗口

10、Fluid(GUI程序开发工具)

1. 安装
   安装fltk-fluid需要先安装git和CMake
cargo install fltk-fluid
   在项目路径中运行cargo add fl2rust --build

2. 创建编译文件build.rs
   在项目的根目录下添加一个 build.rs 文件，内容如下

   // build.rs
   fn main() {
       use std::path::PathBuf;
       use std::env;
       println!("cargo:rerun-if-changed=src/myuifile.fl");
       let g = fl2rust::Generator::default();
       let out_path = PathBuf::from(env::var("OUT_DIR").unwrap());
       g.in_out("src/myuifile.fl", out_path.join("myuifile.rs").to_str().unwrap()).expect("Failed to generate rust from fl file!");
   }
   

3. 设计界面
   运行fluid打开FLTK UI Designer(UI设计器)
   
   菜单栏 - New - Code - Class，创建一个类
   菜单栏 - New - Code - Function/Method…，创建一个函数
   菜单栏 - New - Group - Window…，添加一个窗口
   
   双击Double_Window，出现预览窗口
   窗口太小，拖动窗口边框右下角，往右拽拽，拉大窗口
   
   双击预览窗口，出现属性窗口
   GUI - Label，输入我的应用
   Style - Color按钮，选择白色(第一行倒数第一个)
   C++ - Name，输入my_win
   点击Close按钮关闭属性窗口
   
   右键预览窗口，Buttons - Button…
   双击Button，出现属性窗口
   GUI - Label，输入点击按钮
   GUI - Position - Width，修改为64
   Style - Label Color按钮，选择天蓝色(第一行倒数第二个)
   Style - Color按钮，选择黑色(第一行第一个)
   C++ - Name，输入btn
   点击Close按钮关闭属性窗口
   
   单击选择Button
   菜单栏 - Layout - Center In Group，Horizontal和Vertical，两个都点
   按钮将移动到预览窗口*
   
   菜单栏 - File - Save As…(Ctrl_Shift+S)，命名为myuifile.fl，保存在.\src\myuifile.fl位置

4. UI文件
   在src目录下创建一个fluid相关文件 myuifile.rs，内容如下

   // src/myuifile.rs
   #![allow(unused_variables)]
   #![allow(unused_mut)]
   #![allow(unused_imports)]
   #![allow(clippy::needless_update)]
   
   include!(concat!(env!("OUT_DIR"), "/myuifile.rs"));
   

5. main.rs
   编辑文件.\src\main.rs

   use fltk::{app, prelude::WidgetExt};
   mod myuifile;
   
   fn main() {
       let app = app::App::default();
       let mut ui = myuifile::UserInterface::make_window();
       let mut win = ui.my_win.clone();
   
       ui.btn.set_callback(move |b| {
           b.set_label("已点击");
           win.set_label("已点击");
           println!("已点击");
       });
       
       app.run().unwrap();
   }
   

6. 运行
   cargo run
   

11、文档

fltk book 中文文档
fltk - crates

---