如何增大GTK Grid单元格宽高以清晰显示图标

使用以下代码通过cat.jpg创建猫图标网格，但运行后图标显示过小，希望增大Grid单元格尺寸让图标更清晰：

创建网格的代码 #

static void make_toggles(GtkWidget * window) {
    GtkWidget *stop_grid, vpaned;
    int i;
    stop_grid = gtk_grid_new();
    vpaned = gtk_paned_new(GTK_ORIENTATION_VERTICAL);
    int num_stops = 10;
    char label[7]; label[0] = '\0';
    for (i = 0; i < num_stops; i++) {
        sprintf(label, "%d", i);
        stop = gtk_toggle_button_new_with_label(label);
        image = gtk_image_new_from_file("cat.jpg");
        gtk_button_set_child(GTK_BUTTON(stop), image);
        gtk_grid_attach(GTK_GRID (stop_grid), stop, i % 5 , 1 + (i/5), 1, 1); 
        g_signal_connect(stop, "toggled", G_CALLBACK(stop_toggle), NULL);
    }
    gtk_grid_set_column_spacing(GTK_GRID(stop_grid), 10);
    gtk_grid_set_row_spacing(GTK_GRID(stop_grid), 10);
    gtk_paned_set_start_child(GTK_PANED(vpaned), stop_grid);
    gtk_paned_set_resize_start_child(GTK_PANED(vpaned), TRUE);
    gtk_window_set_child (GTK_WINDOW (window), vpaned);
}

激活处理器代码 #

static void activate (GtkApplication* app, gpointer user_data) {
    GtkWidget *window;

    window = gtk_application_window_new (app);
    gtk_window_set_title (GTK_WINDOW (window), "Left Panel");
    gtk_window_set_default_size (GTK_WINDOW (window), 700, 500);
    make_toggles(window);
    gtk_widget_show (window);
}

运行后图标显示效果：

可以通过以下几种方式调整，让图标和单元格尺寸增大：

1. 直接设置图片像素尺寸 #

使用gtk_image_set_pixel_size()强制指定图片的显示尺寸，图片会按设定大小渲染，同时撑大对应的按钮与Grid单元格：

image = gtk_image_new_from_file("cat.jpg");
// 设定图片为100x100像素，可根据需求调整数值
gtk_image_set_pixel_size(GTK_IMAGE(image), 100);

2. 给按钮设置最小尺寸 #

通过gtk_widget_set_size_request()为每个切换按钮指定最小宽高，避免单元格被压缩：

stop = gtk_toggle_button_new_with_label(label);
// 设置按钮最小尺寸为120x120，留出间距空间
gtk_widget_set_size_request(stop, 120, 120);

3. 使用CSS样式批量控制 #

通过GTK的CSS样式表统一设置按钮、图片的尺寸，适合批量调整样式：

// 在activate函数中添加样式加载代码
GtkCssProvider *provider = gtk_css_provider_new();
gtk_css_provider_load_from_data(provider,
    "togglebutton {"
    "  min-width: 120px;"
    "  min-height: 120px;"
    "}"
    "togglebutton image {"
    "  width: 100px;"
    "  height: 100px;"
    "}", -1);
gtk_style_context_add_provider_for_display(gdk_display_get_default(),
    GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
g_object_unref(provider);

4. 直接指定Grid行列最小尺寸 #

通过gtk_grid_set_column_min_width()和gtk_grid_set_row_min_height()直接定义Grid的行列最小尺寸：

stop_grid = gtk_grid_new();
// 设置每列最小宽度120px
for (int col = 0; col < 5; col++) {
    gtk_grid_set_column_min_width(GTK_GRID(stop_grid), col, 120);
}
// 设置每行最小高度120px
for (int row = 1; row <= 2; row++) {
    gtk_grid_set_row_min_height(GTK_GRID(stop_grid), row, 120);
}

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