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

Question

So I have tried to make a button in a project I am working on in GTK Rust look more like a link using the following:

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

The corresponding main screen component file with the button with the text of superman looks like this:

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

The text of underline and cursor pointer in the css selector causes my application to panic and not compile. Is there a way to turn that button to look more like a link?

The error I get when it panics is:

(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

So part of the problem was that I was calling the widget name of superman_button incorrectly, but even after I corrected that, if I try a

.MainScreenCpt__button_superman_button {
  background-color: blue;
}

I get no response, and yet if I do:

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

That works, the label gets styled with no issues, but it still looks like a button.

Answer 1

It looks like the issue with your CSS is that the cursor and text-decoration properties are not valid for buttons in GTK. The background-color property should work, but you may need to make sure that the widget name is correctly referenced in your CSS.

Regarding the styling of the button to look more like a link, you can try styling the label inside the button instead of the button itself. That's why.MainScreenCpt__button_superman_button label {...} works. You can also try using an event box as a container for the button and apply the styling on the event box.

If you want to make the button look more like a link, you can try the following:

1. Style the label inside the button:

 .MainScreenCpt__button_superman_button label { color: #0000FF; /* blue */ font-size: 16px; text-decoration: underline; }

This will change the color and text decoration of the text inside the button to resemble a link.

2. Use an event box as a container for the button:

 let event_box = gtk::EventBox::new(); event_box.add(&superman_button); superman_box.add(&event_box);

And then in your CSS you can apply the following:

.MainScreenCpt__button_superman_button {cursor: pointer;
 background-color: blue;}

This will change the cursor to pointer and background color to blue, which will make it look more like a link.

Also Make sure you import the gtk::EventBox in your main.rs

Answer 2

Reading your question, it seem to me that you are looking for some solution to make some text clickable (link in HTML). If that's correct then read further.

In below example I used gtk4, but document just that it should work with gtk3 as well.(With some changes in creating application/window object)

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 3

In GTK (using the Rust bindings), you can make a button look more like a link by customizing its appearance. Here's an example of how you can do this:

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

Answer 4

I ended up doing the following which works:

.SomeCpt__button_superman_button {
  // styling here 
}

.SomeCpt__button_superman_button:hover {
   color: #409EFF;
   background-color: rgb(236, 245, 255);
}

.SomeCpt__button_superman_button:hover label {
  text-decoration-line: underline; 
}