Rust学习与实践 (二) GTK4.0 GUI

Rust学习与实践 (二) GTK4.0 GUI

这里我使用的是blueprint这一个工具来进行UI界面的设计

一、BluePrint编译器

首先安装它的编译器

sudo apt install blueprint-compiler
1

二、创建项目

cargo new p01_hello_blueprint
1

创建结果如下图所示

进入到项目目录下

cd p01_hello_blueprint/
1

三、添加依赖包

cargo add gtk-blueprint
1

cargo add gtk4
1

cargo add phf
1

四、编辑src/main.blp

using Gtk 4.0;

ApplicationWindow MyAppWindow{
  default-width: 600;
  default-height: 300;
  title: _("Hello, Blueprint!");
  
  Box welcome {
    orientation: vertical;
    valign: center;
    halign: center;

    Image {
      name: "logo";
      icon-name: "re.sonny.Workbench";
      pixel-size: 196;
      margin-bottom: 30;

      styles [
        "icon-dropshadow",
      ]
    }

    Label {
      label: "Welcome to Workbench";
      margin-bottom: 30;

      styles [
        "title-1",
      ]
    }

    Box subtitle {
      orientation: vertical;
      halign: center;
      margin-bottom: 30;

      Label {
        label: "Learn and prototype with\nGNOME technologies";
        justify: center;
      }
    }

    Box {
      orientation: vertical;
      homogeneous: true;
      halign: center;

      Box {
        margin-bottom: 6;

        Image {
          icon-name: "update-symbolic";
          margin-end: 12;
          icon-size: normal;
        }

        Label {
          label: "Edit Style or UI to update the Preview";
        }
      }

      Box {
        margin-bottom: 6;

        Image {
          icon-name: "media-playback-start-symbolic";
          margin-end: 12;
          icon-size: normal;
        }

        Label {
          label: "Hit";
        }

        ShortcutsShortcut {
          accelerator: "<Control>Return";
          margin-start: 12;
        }

        Label {
          label: "to format and run Code";
        }
      }

      Box {
        margin-bottom: 6;

        Image {
          icon-name: "media-floppy-symbolic";
          margin-end: 12;
          icon-size: normal;
        }

        Label {
          label: "Changes are automatically saved and restored";
        }
      }

      Box {
        margin-bottom: 6;

        Image {
          icon-name: "library-symbolic";
          margin-end: 12;
          icon-size: normal;
        }

        Label {
          label: "Browse the Library for demos and examples";
        }
      }

      Box {
        margin-bottom: 6;

        Image {
          icon-name: "user-bookmarks-symbolic";
          margin-end: 12;
          icon-size: normal;
        }

        Label {
          label: "Checkout the Bookmarks menu to learn and get help";
        }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

五、编辑src/main.rs

use gtk4 as gtk;
use gtk4::Builder;
use gtk_blueprint::include_blp;
use gtk::Application;
use gtk::prelude::*;


gtk_blueprint::gen_blp_map!("");

fn main() {

    // Create app
    let application = Application::builder()
        .application_id("org.example.HelloWorld")
        .build();

    // Init app window and show it
    application.connect_activate(|app| {
        // You also can parse blueprint with Parser::parse
        // and then use it in gtk4::Builder
        let builder = Builder::new();
        let _ = builder.add_from_string(include_blp!("src/main.blp"));
        let window = builder.object::<gtk::ApplicationWindow>("MyAppWindow").unwrap();

        window.set_application(Some(app));

        window.present();
        println!("Hello World");
    });

    // Run app
    application.run();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

六、安装系统依赖环境

sudo apt install pkg-config librust-gobject-sys-dev libgdk-pixbuf-2.0-dev libcairo2-dev libgtk-4-dev
1

七、编译程序

cargo build
1

会下载程序包

八、运行程序

cargo run
1

由于开发板没有接显示器，所以无法正常运行，在命令行设置一下远程服务器(你的电脑)来显示界面

export DISPLAY=192.168.8.4:0.0
1

再次运行，效果如下图所示

远程的效果有点怪怪的

UI设计可以使用Ubuntu下的Workbench

所见即所得的方式，不知道为什么在Windows上面看起来那么丑，甚至图片都没有显示，有钱建议配个屏幕，因为ubuntu运行起来是这样的

踩坑

在更新了blp文件之后，需要删除target/debug/deps/下的可执行文件，这样在运行cargo run命令时才会重新生成二进制文件（猜测是把资源文件也集成到了可执行程序里面了，查看大小由70多M）