如何在Gtk及Gtk-rs中创建圆角建议/破坏性按钮？

嘿，我来帮你搞定这个问题！你之前遇到的suggested-action类不生效的情况，大概率是GTK主题的样式优先级在搞鬼——circular类的样式可能覆盖了原生建议按钮的样式。用CSS定制是最靠谱的解决方案，既能精准控制圆角，又能保留建议/破坏性按钮的特性。

一、用CSS自定义完整样式（最可控） #

直接写自己的CSS类，把圆角和按钮类型的样式整合在一起，完全不用依赖原生类的优先级问题：

1. 编写CSS代码 #

你可以创建一个.css文件（比如button_styles.css），内容如下：

/* 圆角建议按钮 */
.rounded-suggested {
    border-radius: 24px; /* 数值越大圆角越圆，按需调整 */
    background-color: #1666eb; /* 可以换成你喜欢的建议色，这里是谷歌风格的蓝色 */
    color: white;
    padding: 6px 18px;
    border: none;
}

.rounded-suggested:hover {
    background-color: #1357c7; /* 悬停时加深颜色 */
}

/* 圆角破坏性按钮 */
.rounded-destructive {
    border-radius: 24px;
    background-color: #d93025; /* 谷歌风格的红色，适合破坏性操作 */
    color: white;
    padding: 6px 18px;
    border: none;
}

.rounded-destructive:hover {
    background-color: #b0281a;
}

2. 在Rust代码中加载并应用 #

先写一个加载CSS的函数，然后创建按钮时添加对应的类：

use gtk::prelude::*;
use gtk::{Button, CssProvider, StyleContext};

// 加载CSS样式，建议在程序启动时调用
pub fn load_button_styles() {
    let css_provider = CssProvider::new();
    // 从文件加载CSS，或者用include_bytes!把CSS嵌入二进制
    css_provider.load_from_data(include_bytes!("button_styles.css"))
        .expect("Failed to load CSS");

    // 将样式提供器添加到全局显示上下文
    StyleContext::add_provider_for_display(
        &gdk::Display::default().expect("Couldn't get default display"),
        &css_provider,
        gtk::STYLE_PROVIDER_PRIORITY_USER, // 优先级高于默认主题，确保样式生效
    );
}

// 创建圆角建议按钮
pub fn make_rounded_suggested_btn(label: &str) -> Button {
    let btn = Button::new_with_label(label);
    btn.get_style_context().add_class("rounded-suggested");
    btn
}

// 创建圆角破坏性按钮
pub fn make_rounded_destructive_btn(label: &str) -> Button {
    let btn = Button::new_with_label(label);
    btn.get_style_context().add_class("rounded-destructive");
    btn
}

二、基于原生类扩展（保持主题一致性） #

如果你想保留GTK原生的suggested-action和destructive-action的主题适配性，只是加圆角，可以通过CSS强制提升原生类的优先级：

CSS代码 #

/* 给原生建议按钮加圆角 */
.suggested-action.circular {
    border-radius: 24px;
    /* 强制继承原生建议按钮的颜色，避免被circular覆盖 */
    background-color: @suggested_action_bg;
    color: @suggested_action_fg;
}

/* 给原生破坏性按钮加圆角 */
.destructive-action.circular {
    border-radius: 24px;
    background-color: @destructive_action_bg;
    color: @destructive_action_fg;
}

Rust代码调整 #

这样你之前的代码稍微改改就能用了，记得先加载上面的CSS：

pub fn make_rounded_button(label: &str) -> Button {
    let btn = Button::new_with_label(label);
    btn.get_style_context().add_class("circular");
    btn.get_style_context().add_class("suggested-action");
    btn
}

几个小提示 #

• 一定要在创建任何按钮之前调用加载CSS的函数，不然样式不会生效。
• 用include_bytes!把CSS嵌入二进制文件，避免程序运行时找不到CSS文件的问题。
• 如果是GTK4，这些CSS属性完全兼容；如果是GTK3，写法也差不多，没有大差异。

内容的提问来源于stack exchange，提问作者noconst