如何在GTK+3中使用GtkGrid复刻指定表格布局及表头

Great question—since GtkTable was deprecated way back in GTK 3.4, switching to GtkGrid is the right move, and it’s actually more flexible once you get the hang of the differences. Let’s walk through how to replicate your media player table’s layout and headers step by step.

Key Differences to Keep in Mind #

First, a quick recap of how GtkGrid differs from GtkTable:

• GtkTable uses left/right (column span) and top/bottom (row span) in its attach method, while GtkGrid uses column/row (starting position) + width/height (span size).
• GtkGrid handles spacing with row-spacing and column-spacing properties, replacing GtkTable’s cell-padding and cell-spacing.

Step 1: Set Up the GtkGrid Container #

Start by creating your GtkGrid and configuring spacing to match the original table’s look. For example, if your old GtkTable had cell-padding=2 and cell-spacing=3, set:

// C example
GtkWidget *grid = gtk_grid_new();
gtk_grid_set_row_spacing(GTK_GRID(grid), 3);
gtk_grid_set_column_spacing(GTK_GRID(grid), 2);
// Optional: Let the grid expand with the window
gtk_widget_set_hexpand(grid, TRUE);
gtk_widget_set_vexpand(grid, TRUE);

# Python (PyGObject) example
grid = Gtk.Grid()
grid.set_row_spacing(3)
grid.set_column_spacing(2)
grid.set_hexpand(True)
grid.set_vexpand(True)

Step 2: Build the Header Row #

To make the header stand out (like the original table), create bold, properly aligned labels and place them in the first row (row 0) of the grid. You can also add a CSS class to style them consistently.

Example Header Setup #

// C example
// Create header labels
GtkWidget *name_header = gtk_label_new("Name");
GtkWidget *type_header = gtk_label_new("Type");
GtkWidget *status_header = gtk_label_new("Status");

// Make headers bold
gtk_label_set_markup(GTK_LABEL(name_header), "<b>Name</b>");
gtk_label_set_markup(GTK_LABEL(type_header), "<b>Type</b>");
gtk_label_set_markup(GTK_LABEL(status_header), "<b>Status</b>");

// Align text to match original table's layout
gtk_label_set_xalign(GTK_LABEL(name_header), 0.0); // Left-aligned
gtk_label_set_xalign(GTK_LABEL(type_header), 0.5); // Center-aligned
gtk_label_set_xalign(GTK_LABEL(status_header), 0.5); // Center-aligned

// Attach headers to row 0, columns 0, 1, 2 (no span)
gtk_grid_attach(GTK_GRID(grid), name_header, 0, 0, 1, 1);
gtk_grid_attach(GTK_GRID(grid), type_header, 1, 0, 1, 1);
gtk_grid_attach(GTK_GRID(grid), status_header, 2, 0, 1, 1);

// Optional: Add CSS class for header background styling
gtk_widget_add_css_class(name_header, "table-header");
gtk_widget_add_css_class(type_header, "table-header");
gtk_widget_add_css_class(status_header, "table-header");

# Python example
name_header = Gtk.Label(label="<b>Name</b>", use_markup=True)
type_header = Gtk.Label(label="<b>Type</b>", use_markup=True)
status_header = Gtk.Label(label="<b>Status</b>", use_markup=True)

name_header.set_xalign(0.0)
type_header.set_xalign(0.5)
status_header.set_xalign(0.5)

grid.attach(name_header, 0, 0, 1, 1)
grid.attach(type_header, 1, 0, 1, 1)
grid.attach(status_header, 2, 0, 1, 1)

# Add CSS class for styling
name_header.add_css_class("table-header")
type_header.add_css_class("table-header")
status_header.add_css_class("table-header")

Optional CSS for Headers #

If you want the header to have a shaded background (like many native tables), add this CSS to your application:

.table-header {
    background-color: #e0e0e0;
    padding: 4px;
    border-bottom: 1px solid #cccccc;
}

Step 3: Add Table Rows #

For each media player entry, create widgets (labels, buttons, etc.) and attach them to subsequent rows (starting at row 1). If your original table had cells spanning multiple columns/rows, use the width and height parameters in gtk_grid_attach to replicate that.

Example Row Setup #

// C example: Adding a row for "VLC Media Player"
GtkWidget *name_label = gtk_label_new("VLC Media Player");
GtkWidget *type_label = gtk_label_new("Audio/Video");
GtkWidget *status_label = gtk_label_new("Active");

// Align labels to match header
gtk_label_set_xalign(GTK_LABEL(name_label), 0.0);
gtk_label_set_xalign(GTK_LABEL(type_label), 0.5);
gtk_label_set_xalign(GTK_LABEL(status_label), 0.5);

// Attach to row 1
gtk_grid_attach(GTK_GRID(grid), name_label, 0, 1, 1, 1);
gtk_grid_attach(GTK_GRID(grid), type_label, 1, 1, 1, 1);
gtk_grid_attach(GTK_GRID(grid), status_label, 2, 1, 1, 1);

# Python example
name_label = Gtk.Label(label="VLC Media Player")
type_label = Gtk.Label(label="Audio/Video")
status_label = Gtk.Label(label="Active")

name_label.set_xalign(0.0)
type_label.set_xalign(0.5)
status_label.set_xalign(0.5)

grid.attach(name_label, 0, 1, 1, 1)
grid.attach(type_label, 1, 1, 1, 1)
grid.attach(status_label, 2, 1, 1, 1)

Step 4: Handle Column Sizing (Optional) #

If you want columns to resize like the original table, use gtk_grid_set_column_homogeneous or set individual column weights with gtk_grid_set_column_weight. For example, to make the "Name" column take more space:

gtk_grid_set_column_weight(GTK_GRID(grid), 0, 1); // Column 0 (Name) expands more

grid.set_column_weight(0, 1)

Final Notes #

• Double-check your original GtkTable’s attach calls: gtk_table_attach(table, child, left, right, top, bottom, ...) translates to gtk_grid_attach(grid, child, left, top, right-left, bottom-top).
• If you’re converting a .glade file directly, open it in Glade (GTK 3+), delete the GtkTable, add a GtkGrid, and reposition all widgets visually—this is often faster for complex layouts.

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