Rust 기반 - UI 초기 탐색

rust를 배운 후에 약간 간지러워서 rust로 인터페이스가 있는 데모를 만들 수 있을까요?그래서 조사한 끝에 GTK-rs를 UI 라이브러리로 선택했다.GTK를 사용하면 rust 기반의 간단한 작은 응용 프로그램을 완성할 수 있습니다.
먼저 홈페이지 알림에 따라 카고에서.toml에서 관련 의존도 증가

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

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

이어서 메일을 만듭니다.rs 파일, gtk 라이브러리로 가져옵니다.

extern crate gtk;
extern crate gio;

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

main 함수를 추가하면 new의 Application 대상이 나오고,cargorun을 실행하면 공백 인터페이스가 나타납니다.

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);

각각 이 컨트롤을 박스에 추가합니다.나는 가로, 세로 두 가지 레이아웃을 하고 싶어서 두 개의 박스를 정의했다.

  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의 입력 값을 얻을 수 있으며 이벤트 감청 함수connectclicked에서 정규 매칭을 했습니다.
자, 운행해서 결과를 봅시다.