[Rust GUI]fltk-rs的helloworld

时间:2022-12-31 01:16:17

1、安装VSCode

下载安装VSCode
安装VSCode扩展 rust-analyzerrust-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-rsfltk-fluid都需要安装CMake,如果以捆绑库的方式运行可以跳过安装


CMake官网腾讯软件,用IDM、Motrix等下载软件加速下载
可能的文件名:cmake-3.26.0-windows-x86_64.msi
选择Add CMake to the system PATH for all users
[Rust GUI]fltk-rs的helloworld

6、安装git

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


阿里镜像GitCloneGit官网
可能的文件名: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!
    [Rust GUI]fltk-rs的helloworld

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

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

cargo new fltkdemo2
cd .\fltkdemo2\
cargo add fltk
cargo run,成功输出Hello,world!
[Rust GUI]fltk-rs的helloworld

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,成功显示窗口
[Rust GUI]fltk-rs的helloworld

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

  1. 安装
    安装fltk-fluid需要先安装gitCMake
    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
    [Rust GUI]fltk-rs的helloworld

11、文档

fltk book 中文文档
fltk - crates



[Rust GUI]fltk-rs的helloworld