Rust基礎-UI初探

       學習了一段rust之後，有點技癢是否能用rust做一個帶界面的demo。於是調查一番最後選擇了GTK-rs作爲UI庫。接下來就一步步演示下，如果使用GTK完成基於rust的簡單小應用。

        首先根據官網提示，在cargo.toml中增加相關依賴 

[dependencies.gtk]
version = "0.8.0"
features = ["v3_16"]

[dependencies.gio]
version = ""
features = ["v2_44"]

接着創建main.rs文件 ，導入gtk庫。

extern crate gtk;
extern crate gio;

use gtk::prelude::*;
use gio::prelude::*;

添加main函數 ，new 一個Application對象出來,如果運行cargo run就會發現一個空白界面就出來了。

fn main() {
    let application = Application::new(
        Some("com.github.gtk-rs.examples.basic"),
        Default::default(),
    ).expect("failed to initialize GTK application");

    application.connect_activate(|app| {
        let window = ApplicationWindow::new(app);
        window.set_title("HelloRust");
        window.set_default_size(350, 70);

    

        window.show_all();
    });

    application.run(&[]);
}

 在這個空白界面上添加一個輸入框，再添加幾個按鈕。

let outer_box = gtk::Box::new(gtk::Orientation::Vertical, 0);
        let inner_box = gtk::Box::new(gtk::Orientation::Horizontal, 0);

        let entry: Entry = gtk::Entry::new();
        entry.set_size_request(500, 15);
        entry.set_margin_start(10);
        entry.set_margin_end(10);
        entry.set_margin_top(10);
        entry.set_max_width_chars(20);

        let brief = gtk::TextView::new();
        brief.set_halign(gtk::Align::Start);                              // 10 pixel right margin
        brief.set_editable(false);
        brief.set_size_request(500, 30);
        brief.get_buffer().unwrap().set_text("收款方（Bob）地址：XXX.XXX.XXX.XXX");
        brief.set_margin_start(10);
        brief.set_margin_end(10);
        brief.set_margin_top(20);
        brief.override_background_color(
            gtk::StateFlags::from_bits(gtk::StateFlags::NORMAL.bits()).unwrap(),
            Some(&RGBA {
                red: 0.965,
                green: 0.96,
                blue: 0.957,
                alpha: 1f64,
            }),
        );


        let mut details = gtk::TextView::new();
        details.set_halign(gtk::Align::Start);                              // 10 pixel right margin
        details.set_editable(false);
        details.set_size_request(50, 30);
        details.get_buffer().unwrap().set_text("金額：");
        details.set_margin_start(10);
        details.set_margin_end(10);
        details.set_margin_top(20);
        details.override_background_color(
            gtk::StateFlags::from_bits(gtk::StateFlags::NORMAL.bits()).unwrap(),
            Some(&RGBA {
                red: 0.965,
                green: 0.96,
                blue: 0.957,
                alpha: 1f64,
            }),
        );

        let button = Button::new_with_label("Alice發起轉賬");
        button.set_size_request(300, 20);
        button.set_margin_start(30);
        button.set_margin_end(30);
        button.set_margin_top(30);

        let confirm_button = Button::new_with_label("Bob確認交易並簽名");
        confirm_button.set_size_request(300, 20);
        confirm_button.set_margin_start(30);
        confirm_button.set_margin_end(30);
        confirm_button.set_margin_top(30);

        let verify_button = Button::new_with_label("Alice校驗交易合法性");
        verify_button.set_size_request(100, 20);
        verify_button.set_margin_start(30);
        verify_button.set_margin_end(30);
        verify_button.set_margin_top(30);

        let logtext = gtk::TextView::new();
        logtext.set_halign(gtk::Align::Start);                              // 10 pixel right margin
        logtext.set_editable(false);
        logtext.set_size_request(950, 300);
        logtext.get_buffer().unwrap().set_text("");
        logtext.set_margin_start(10);
        logtext.set_margin_end(10);
        logtext.set_margin_top(20);

 分別將這些控件，添加到box中。因爲我想做橫排，豎排兩種佈局所以定義了兩個box：

  inner_box.pack_start(&details, false, false, 0);
        inner_box.pack_start(&entry, false, false, 0);
        outer_box.pack_start(&brief, false, false, 0);
        outer_box.pack_start(&inner_box, false, false, 0);
        outer_box.pack_start(&button, false, false, 0);
        outer_box.pack_start(&confirm_button, false, false, 0);
        outer_box.pack_start(&verify_button, false, false, 0);
        outer_box.pack_start(&logtext, false, false, 0);

        window.add(&outer_box);

界面佈局大功告成，我們接着給按鈕增加監聽事件。

        let amount_buffer = entry.get_buffer();
        button.connect_clicked(move |_| {
            let re = Regex::new(r"^[0-9]*[1-9][0-9]*$").unwrap();
            let amount = amount_buffer.get_text();
            if re.is_match(&amount) {
                //輸入金額合法
            } else {
                //請輸入正確的金額，需是正整數
            }
        });

這樣就如願給amount按鈕增加了一個點擊事件。點擊該按鈕後就可以獲取entry裏的輸入值，並在事件監聽函數connect_clicked裏做正則匹配了 。

      好啦，運行一下，看看結果。