Rust语言桌面应用开发GTK3 Gtk3-rs Glade

文章目录

GTK-RS
Github
官网
Rust 教程
Rust 环境
安装 GTK
安装 Glade
demo.glade 文件
完整示例 main.rs
- 创建 Rust 项目
- Cargo.toml 文件
- main.rs 文件
编译运行
GTK主题

GTK-RS

gtk-rs 是一个用于在 Rust 编程语言中使用 GTK 图形用户界面工具包的库。GTK 是一个流行的跨平台 GUI 工具包，用于创建图形界面应用程序，它最初是为 GIMP 图像编辑器开发的，现在广泛用于许多开源和商业应用程序中。

Github

https://github.com/gtk-rs/gtk3-rs
https://github.com/gtk-rs/gtk4-rs

官网

https://gtk-rs.org/
https://gtk-rs.org/gtk3-rs/
https://gtk-rs.org/gtk4-rs/

Rust 教程

https://rustwiki.org/zh-CN/rust-by-example/index.html

Rust 环境

参考我的这篇文章《使用 Rustup 管理 Rust 版本》

安装 GTK

注：版本兼容问题，gtk4 目前暂不支持 Glade 推荐安装 gtk3 版本。
gtk3 对应 gtk3-rs 版本
gtk4 对应 gtk4-rs 版本

xcode-select --install
brew install pkg-config
# pkgconfig 路径
find / -name pkgconfig
# 是否支持GTK+
brew search gtk
brew install gtk+3
# 验证 gtk+3
pkg-config --cflags --libs gtk+-3.0

配置环境变量

# 检查 pkgconfig 路径
find / -name pkgconfig
# 将以上路径添加到环境变量中（.bash_profile 或 .zshrc）
vim ~/.zshrc
export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig/:$PKG_CONFIG_PATH
source ~/.zshrc

安装 Glade

Glade是一个用于创建GTK图形用户界面的用户界面构建器。它允许开发者通过可视化方式设计和布局GUI元素，而不必手动编写代码。Glade生成XML格式的描述文件，描述了用户界面的结构和属性。然后，这个XML文件可以由程序加载和解释，从而创建用户界面。

Glade Github
- https://github.com/GNOME/glade
- https://gitlab.gnome.org/GNOME/glade
Glade 教程
- https://developer.gnome.org/
安装 Glade

# 目前版本支持gtk+3
brew install glade
glade --version
# 启动glade
glade

Glade 操作界面

在这里插入图片描述

保存后会生成如下 demo.glade 文件

demo.glade 文件

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.40.0 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <object class="GtkWindow" id="window">
    <property name="width-request">400</property>
    <property name="height-request">200</property>
    <property name="can-focus">False</property>
    <property name="title" translatable="yes">demo</property>
    <child>
      <object class="GtkBox" id="box">
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkButton" id="button">
            <property name="label" translatable="yes">button</property>
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="receives-default">True</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkComboBoxText" id="combobox">
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
            <property name="active">0</property>
            <property name="active-id">1</property>
            <items>
              <item id="1" translatable="yes">item1</item>
              <item id="2" translatable="yes">item2</item>
              <item id="3" translatable="yes">item3</item>
              <item id="4" translatable="yes">item4</item>
            </items>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkEntry" id="entry">
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

完整示例 main.rs

注： gtk3-rs 支持 .glade 文件。

创建 Rust 项目

cargo new demo

Rust 项目结构

在这里插入图片描述

Cargo.toml 文件

注：本章示例使用 GTK3 版本。
https://crates.io/search?q=gtk

在这里插入图片描述

[dependencies]
gtk = { version = "0.18.1", features = ["v3_24"] }

main.rs 文件

rust">use gtk::prelude::*;
use gtk::{gio, glib};
use gtk::{Window, Builder, Button, ComboBox, Entry};

fn main() {
    let application = gtk::Application::new(
        Some("com.gtk-rs.demo"),
        Default::default(),
    );
    application.connect_activate(build_ui);

    // 退出操作的逻辑，并将其与快捷键绑定
    let quit = gio::SimpleAction::new("quit", None);
    quit.connect_activate(
        glib::clone!(@weak application => move |_action, _parameter| {
            application.quit();
        }),
    );
    application.connect_startup(|application| {
        application.set_accels_for_action("app.quit", &["<Primary>Q"]);
    });
    application.add_action(&quit);

    application.run();
}

fn build_ui(application: &gtk::Application) {
    let glade_src = include_str!("demo.glade");
    let builder = Builder::from_string(glade_src);

    let window: Window = builder.object("window").expect("Couldn't get window");
    window.set_application(Some(application));
    window.set_position(gtk::WindowPosition::Center);

    let button: Button = builder.object("button").expect("Couldn't get button");
    button.connect_clicked(move |_| {
        println!("Button clicked!");
    });

    let combobox: ComboBox = builder.object("combobox").expect("Couldn't get combobox");
    combobox.connect_changed(move |combobox| {
        if let Some(index) = combobox.active() {
            println!("ComboBox changed! Selected index: {}", index);
        } else {
            println!("No item selected");
        }        
    });

    let entry: Entry = builder.object("entry").expect("Couldn't get entry");
    entry.connect_changed(move |entry| {
        println!("Entry changed! {}", entry.text());
    });
    entry.connect_activate(move |entry| {
        println!("Entry activate! {}", entry.text());
    });

    window.show_all();
}