在 GTK4 中制作可点击框

Question

如何使 gtk4::Box 在 gtk_rs 中可点击？

在 GTK3 中，似乎使用 EventBox 是实现此目的的方法，但在 GTK4 中：

Stop using GtkEventBox

GtkEventBox is no longer needed and has been removed.

All widgets receive all events.

https://docs.gtk.org/gtk4/migrating-3to4.html#stop-using-gtkeventbox

看来点击处理程序现在应该直接附加到小部件。但是我找不到任何关于如何执行此操作的明确文档或示例。

如果有人能给我一个将点击侦听器附加到 gtk4::Box 的示例，将不胜感激。

Answer 1

您可以使用 gtk::GestureClick like shown in this example 执行此操作。

这是一个完整的例子（点击 window 内部的某处，因为该框实际上不可见）：

use gtk::prelude::*;
use gtk::{Application, ApplicationWindow};

fn main() {
    // Create a new application
    let app = Application::builder()
        .application_id("org.gtk-rs.example")
        .build();

    // Connect to "activate" signal of `app`
    app.connect_activate(|app| {
        build_ui(app);
    });

    // Run the application
    app.run();
}

fn build_ui(app: &Application) {
    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .application(app)
        .title("My GTK App")
        .build();

    // Create a box
    let gtk_box = gtk::builders::BoxBuilder::new()
        .height_request(200)
        .width_request(300)
        .build();

    // Assign a click listener
    let gesture = gtk::GestureClick::new();
    gesture.connect_released(|gesture, _, _, _| {
        gesture.set_state(gtk::EventSequenceState::Claimed);
        println!("Box pressed!");
    });
    gtk_box.add_controller(&gesture);

    // Add the box
    window.set_child(Some(&gtk_box));

    // Present window to the user
    window.present();
}

一个更复杂的例子

假设您实际上也想看到该框，并可能提供一些关于鼠标悬停的用户反馈。然后你需要使用 CSS 规则来实现。

将您的 main.rs 更改为：

use gtk::gdk::Display;
use gtk::{CssProvider, StyleContext, prelude::*};
use gtk::{Application, ApplicationWindow};

fn main() {
    // Create a new application
    let app = Application::builder()
        .application_id("org.gtk-rs.example")
        .build();

    // Connect to "activate" signal of `app`
    app.connect_activate(|app| {
        // Load a CSS stylesheet from the included bytes.
        let provider = CssProvider::new();
        provider.load_from_data(include_bytes!("style.css"));

        // Give the CssProvider to the default screen so the CSS rules are
        // applied to the window.
        StyleContext::add_provider_for_display(
            &Display::default().expect("Error initializing gtk css provider."),
            &provider,
            gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
        );

        build_ui(app);
    });

    // Run the application
    app.run();
}

fn build_ui(app: &Application) {
    // Create a window and set the title
    let window = ApplicationWindow::builder()
        .application(app)
        .title("My GTK App")
        .build();

    // Create a box
    let gtk_box = gtk::builders::BoxBuilder::new()
        .height_request(200)
        .width_request(300)
        .margin_bottom(20)
        .margin_end(20)
        .margin_start(20)
        .margin_top(20)
        .css_classes(vec![String::from("hover-box")])
        .build();

    // Assign a click listener
    let gesture = gtk::GestureClick::new();
    gesture.connect_released(|gesture, _, _, _| {
        gesture.set_state(gtk::EventSequenceState::Claimed);
        println!("Box pressed!");
    });
    gtk_box.add_controller(&gesture);

    // Add the box
    window.set_child(Some(&gtk_box));

    // Present window to the user
    window.present();
}

并在 src/ 目录（与 main.rs 所在的同一目录）中创建一个 style.css 文件，内容如下：

.hover-box {
    background-color: blue;
    border-radius: 5px;
}

.hover-box:hover {
    background-color: rgb(11, 133, 240);
    border-radius: 5px;
}

现在您会得到 gtk4::Box，边框半径 5px 和 blue 背景颜色会在您将鼠标悬停在方框上方时发生变化。

在 GTK4 中制作可点击框

Making a clickable box in GTK4

gtk

rust

gtk-rs

gtk4

一个更复杂的例子