如何让 GTK Rust 中的按钮看起来更像一个链接？

Question

所以我试图在我正在使用 GTK Rust 的项目中制作一个按钮，看起来更像是一个链接，使用以下内容：

.MainScreenCpt__button_superman_button {
  color: #FFFFFF;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

带有超人文本按钮的相应主屏幕组件文件如下所示：

let superman_button = button::create_text_button(self, "superman_button", "Superman");
superman_button.set_halign(gtk::Align::Start);
superman_box.add(&superman_button);

css 选择器中的下划线和光标指针文本导致我的应用程序崩溃并且无法编译。有没有办法让那个按钮看起来更像一个链接？

当它恐慌时我得到的错误是：

(process:1073867): GLib-GIO=CRITICAL **: 19:18:34.262: g_application_set_application_id: assertion 'application_id == NULL || g_application_id_is_valid (application_id)' failed thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Error { domain: gtk-css-provider-error-quark, code: 3, message: "<data>:8:10'cursor' is not a valid property name" }',
src/main.rs:35:62 note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

所以部分问题是我错误地调用了 superman_button 的小部件名称，但即使在我更正之后，如果我尝试

.MainScreenCpt__button_superman_button {
  background-color: blue;
}

我没有得到回应，但如果我这样做：

.MainScreenCpt__button_superman_button label {
  color: #FFFFFF;
  font-size: 16px;
  text-decoration: underline;
}

这行得通，标签的样式没有问题，但它看起来仍然像一个按钮。

Answer 1

阅读您的问题，在我看来，您正在寻找一些解决方案来使某些文本可点击（HTML 中的链接）。如果那是正确的，那么请进一步阅读。

在下面的示例中，我使用了 gtk4，但仅记录它也应该与 gtk3 一起使用。（在创建应用程序/窗口对象时进行了一些更改）

use gtk::prelude::*;
use gtk::{Application, ApplicationWindow, Button, Inhibit, Label, ListBox};

const APP_ID: &str = "org.gtk_rs.HelloWorld2";

fn main() {
    let app = Application::builder().application_id(APP_ID).build();
    app.connect_activate(build_ui);
    app.run();
}
fn build_button_with_label() -> Label {
    let label = Label::new(None);
    label.set_markup("Go to the <a href="https://www.gtk.org" title="&lt;i&gt;Our&lt;/i&gt; website">GTK website</a> for more...");
    label.connect_activate_link(|_label, link_text| {
        println!("Link target is {:?} getting clicked", link_text);
        // Inhibit(false) // return false to call os default behaviour
        Inhibit(true) // return true to not to call os default behaviour
    });
    label
}
fn build_ui(app: &Application) {
    let button = Button::builder()
        .label("Press me!")
        .margin_top(12)
        .margin_bottom(12)
        .margin_start(12)
        .margin_end(12)
        .build();

    button.connect_clicked(|button| {
        button.set_label("Hello World!");
    });
    let label = build_button_with_label();
    let list_box = ListBox::new();
    list_box.append(&button);
    list_box.append(&label);

    let window = ApplicationWindow::builder()
        .application(app)
        .title("My GTK App")
        .child(&list_box)
        .build();
    window.present();
}

Answer 2

在 GTK 中（使用 Rust 绑定），您可以通过自定义外观使按钮看起来更像一个链接。以下是如何执行此操作的示例：

    use gtk::prelude::*;

// ...

let button = gtk::Button::new_with_label("Click me");
button.get_style_context().add_class("link-style");

In this example, we add a class named link-style to the button's style context. You can then define the appearance of this class in your CSS file:

    .link-style {
  color: #0000ff;
  text-decoration: underline;
  cursor: pointer;
}

This will make the button text blue, underlined, and have a pointer cursor, which is similar to the appearance of a link. You can adjust the CSS properties as needed to better match the desired appearance.

In order to apply the CSS, you can use the gtk::CssProvider and gtk::StyleContext APIs:



 let css = include_str!("your_css_file.css");
    let provider = gtk::CssProvider::new();
    provider.load_from_data(css.as_bytes()).expect("Failed to load CSS");

let screen = gdk::Screen::get_default().expect("Error initializing screen.");
gtk::StyleContext::add_provider_for_screen(&screen, &provider, gtk::STYLE_PROVIDER_PRIORITY_APPLICATION);