如何在GTK C程序中实现类Shell的输入框与可滚动输出区域？

组件选择 #

• 输入区域：保留你当前使用的GtkEntry，满足用户输入需求。
• 输出区域：采用GtkTextView + GtkScrolledWindow的组合：
  • GtkTextView 用于承载多行文本内容，新内容追加时旧内容会自动上移。
  • GtkScrolledWindow 为TextView提供滚动能力，当内容超出可视区域时，可通过滚动条查看全部内容。
  • 配合GtkTextBuffer管理文本内容，实现便捷的内容追加操作。

修改后的完整代码 #

#include <gtk/gtk.h>

static GtkWidget *entry1 = NULL;
static GtkTextBuffer *output_buffer = NULL;

void button_clicked(GtkWidget *widget, gpointer data)
{
    const gchar *entry_text1 = gtk_entry_get_text(GTK_ENTRY(entry1));
    if (entry_text1 && *entry_text1) {
        // 追加输入内容到输出区域，自动换行
        gtk_text_buffer_insert_at_cursor(output_buffer, entry_text1, -1);
        gtk_text_buffer_insert_at_cursor(output_buffer, "\n", -1);
        
        // 自动滚动到文本末尾，确保新内容可见
        GtkTextIter end_iter;
        gtk_text_buffer_get_end_iter(output_buffer, &end_iter);
        gtk_text_view_scroll_to_iter(GTK_TEXT_VIEW(data), &end_iter, 0.0, FALSE, 0.0, 0.0);
    }
    
    // 清空输入框，方便下一次输入
    gtk_entry_set_text(GTK_ENTRY(entry1), "");
}

void destroy(GtkWidget* widget, gpointer data)
{
    gtk_main_quit();
}

int main(int argc, char *argv[])
{
    gtk_init(&argc, &argv);
    
    GtkWidget *win = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size(GTK_WINDOW(win), 680, 460);
    gtk_window_set_title(GTK_WINDOW(win), "Shell-like Program");
    
    entry1 = gtk_entry_new();
    // 设置输入框提示文本
    gtk_entry_set_placeholder_text(GTK_ENTRY(entry1), "Enter command...");
    
    GtkWidget *btn2 = gtk_button_new_with_label("Execute");
    
    GtkWidget *grd = gtk_grid_new();
    // 设置网格间距
    gtk_grid_set_row_spacing(GTK_GRID(grd), 10);
    gtk_grid_set_column_spacing(GTK_GRID(grd), 10);
    
    // 创建输出区域组件
    GtkWidget *scrolled_win = gtk_scrolled_window_new(NULL, NULL);
    gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled_win), GTK_POLICY_AUTOMATIC, GTK_POLICY_ALWAYS);
    
    GtkWidget *output_view = gtk_text_view_new();
    output_buffer = gtk_text_view_get_buffer(GTK_TEXT_VIEW(output_view));
    // 设置输出区域不可编辑、隐藏光标
    gtk_text_view_set_editable(GTK_TEXT_VIEW(output_view), FALSE);
    gtk_text_view_set_cursor_visible(GTK_TEXT_VIEW(output_view), FALSE);
    // 设置内边距
    gtk_text_view_set_left_margin(GTK_TEXT_VIEW(output_view), 8);
    gtk_text_view_set_right_margin(GTK_TEXT_VIEW(output_view), 8);
    gtk_text_view_set_top_margin(GTK_TEXT_VIEW(output_view), 8);
    gtk_text_view_set_bottom_margin(GTK_TEXT_VIEW(output_view), 8);
    
    gtk_container_add(GTK_CONTAINER(scrolled_win), output_view);
    
    // 绑定信号
    g_signal_connect(btn2, "clicked", G_CALLBACK(button_clicked), output_view);
    g_signal_connect(win, "destroy", G_CALLBACK(destroy), NULL);
    
    // 将组件添加到网格布局
    gtk_grid_attach(grd, entry1, 0, 0, 1, 1);
    gtk_grid_attach(grd, btn2, 1, 0, 1, 1);
    gtk_grid_attach(grd, scrolled_win, 0, 1, 2, 1);
    
    gtk_container_add(GTK_CONTAINER(win), grd);
    gtk_container_set_border_width(GTK_CONTAINER(win), 20);
    
    gtk_widget_show_all(win);
    gtk_main();
    
    return 0;
}

代码说明 #

1. 新增了输出区域的滚动窗口和文本视图，设置输出区域不可编辑，避免用户误修改内容。
2. 点击按钮后，将输入框的内容追加到输出区域，并自动滚动到末尾，确保新内容始终可见。
3. 清空输入框，提升用户输入体验。
4. 调整了网格布局的间距和组件位置，让界面更美观。

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