GTK3 SpinButton默认样式异常，如何调整为正常可用样式？

我从一本参考书籍中获取了如下示例代码，同时附上了代码实际运行的渲染截图与书籍中的展示截图。该代码生成的SpinButton默认样式不符合预期：它占满了整个窗口，控件为并排的加减按钮而非堆叠的箭头样式。请问如何调整才能使其呈现正常可用的样式？

示例代码 #

#include <gtk/gtk.h>

void closeApp ( GtkWidget *window, gpointer data)
{
    gtk_main_quit();
}

int main (int argc, char *argv[])
{
    GtkWidget *window;
    GtkWidget *spinbutton;
    GtkAdjustment *adjustment;

    gtk_init (&argc, &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size ( GTK_WINDOW(window), 300, 200);
    g_signal_connect (G_OBJECT(window), "destroy",
                    G_CALLBACK(closeApp), NULL);
    adjustment = gtk_adjustment_new(100.0, 50.0, 150.0, 0.5, 0.05, 0.05);
    spinbutton = gtk_spin_button_new(adjustment, 0.01, 2);

    gtk_container_add(GTK_CONTAINER(window), spinbutton);
    gtk_widget_show_all(window);
    gtk_main ();

    return 0;
}

效果对比 #

• 实际运行效果：
  
• 书籍展示效果：
  

问题原因及解决方法 #

1. 控件占满窗口的问题 #

直接将SpinButton添加到顶级窗口（GtkWindow）会被窗口默认布局容器强制拉伸填充整个空间。解决方法是添加布局容器（如GtkBox+GtkAlignment）控制SpinButton的尺寸与位置：

// 创建spinbutton后添加以下代码
GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10);
gtk_container_add(GTK_CONTAINER(window), box);
GtkWidget *alignment = gtk_alignment_new(0.5, 0.5, 0, 0);
gtk_container_add(GTK_CONTAINER(box), alignment);
gtk_container_add(GTK_CONTAINER(alignment), spinbutton);

2. 箭头按钮并排的问题 #

该差异由GTK版本或主题默认设置导致，可通过两种方式调整：

• 方式一：修改GTK全局设置
  强制启用堆叠箭头样式，在代码中添加：

  GtkSettings *settings = gtk_settings_get_default();
  g_object_set(settings, "gtk-spin-button-arrow-placement", GTK_ARROWS_BOTH, NULL);
  

  注：不同GTK版本的枚举值可能有差异，请按需调整。

• 方式二：CSS自定义样式
  通过GTK CSS强制设置箭头布局方向：

  GtkCssProvider *provider = gtk_css_provider_new();
  const gchar *css = 
    "spinbutton.vertical-arrows > button {"
    "  -gtk-orientation: vertical;"
    "}"
    "spinbutton.vertical-arrows box.vertical {"
    "  orientation: vertical;"
    "}";
  gtk_css_provider_load_from_data(provider, css, -1, NULL);
  gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
                                            GTK_STYLE_PROVIDER(provider),
                                            GTK_STYLE_PROVIDER_PRIORITY_USER);
  gtk_style_context_add_class(gtk_widget_get_style_context(spinbutton), "vertical-arrows");
  

完整修改后的代码 #

#include <gtk/gtk.h>

void closeApp ( GtkWidget *window, gpointer data)
{
    gtk_main_quit();
}

int main (int argc, char *argv[])
{
    GtkWidget *window;
    GtkWidget *spinbutton;
    GtkAdjustment *adjustment;
    GtkWidget *box;
    GtkWidget *alignment;

    gtk_init (&argc, &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size ( GTK_WINDOW(window), 300, 200);
    g_signal_connect (G_OBJECT(window), "destroy",
                    G_CALLBACK(closeApp), NULL);

    // 设置堆叠箭头样式
    GtkSettings *settings = gtk_settings_get_default();
    g_object_set(settings, "gtk-spin-button-arrow-placement", GTK_ARROWS_BOTH, NULL);

    adjustment = gtk_adjustment_new(100.0, 50.0, 150.0, 0.5, 0.05, 0.05);
    spinbutton = gtk_spin_button_new(adjustment, 0.01, 2);

    // 添加布局容器控制尺寸
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 10);
    gtk_container_add(GTK_CONTAINER(window), box);
    alignment = gtk_alignment_new(0.5, 0.5, 0, 0);
    gtk_container_add(GTK_CONTAINER(box), alignment);
    gtk_container_add(GTK_CONTAINER(alignment), spinbutton);

    gtk_widget_show_all(window);
    gtk_main ();

    return 0;
}

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