Linux 图形化编程GTK3.0 快速入门之布局

GTK3.0 布局之水平布局

核心语法：

水平布局容器：

水平布局容器的创建：
GtkWidget *gtk_hbox_new( gboolean homogeneous, gint spacing );

homogeneous：容器内控件是否大小一致( gboolean 取值为TRUE 或 FALSE )
spacing：控件之间的间隔( 以像素点为单位 )，gint相当于 C语言的int
返回值：水平布局控件指针

容器添加添加控件：
void gtk_container_add(GtkContainer *container, GtkWidget *widget);

container：容纳控件的容器
widget：要添加的控件

显示容器上所有控件
void gtk_widget_show_all(GtkWidget *widget);
widget：需要显示的控件

功能源码：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** 基于初始化图形库* 添加相关功能: 水平布局 * * 细节要求:为水平布局添加二个Button 按钮* * * */static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[]) {GtkWidget *window;GtkWidget *button;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数// gkt 水平布局组件初始化化GtkWidget *hbox = gtk_hbox_new(TRUE, 10);// 声明button1 组件GtkWidget *button1 = gtk_button_new_with_label("按钮一"); //  gtk Button 实例化g_signal_connect(button1, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button2 组件GtkWidget *button2 = gtk_button_new_with_label("按钮二"); //  gtk Button 实例化g_signal_connect(button2, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 水平布局添加Button  组件gtk_container_add(GTK_CONTAINER(hbox), button1);gtk_container_add(GTK_CONTAINER(hbox), button2);// 把水平布局容器添加到窗口gtk_container_add(GTK_CONTAINER(window), hbox); gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}

效果截图：

GTK3.0 布局之垂直布局

核心语法：

垂直布局容器的创建：
GtkWidget *gtk_vbox_new( gboolean homogeneous, gint spacing );

功能源码：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** 基于初始化图形库* 添加相关功能: 垂直布局 * * 细节要求:为垂直布局添加二个Button 按钮* * * */static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[]) {GtkWidget *window;GtkWidget *button;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数// gkt 垂直布局组件初始化化GtkWidget *vbox = gtk_vbox_new(TRUE, 10);// 声明button1 组件GtkWidget *button1 = gtk_button_new_with_label("按钮一"); //  gtk Button 实例化g_signal_connect(button1, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button2 组件GtkWidget *button2 = gtk_button_new_with_label("按钮二"); //  gtk Button 实例化g_signal_connect(button2, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 水平布局添加Button  组件gtk_container_add(GTK_CONTAINER(vbox), button1);gtk_container_add(GTK_CONTAINER(vbox), button2);// 把水平布局容器添加到窗口gtk_container_add(GTK_CONTAINER(window), vbox); gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}

效果截图：

GTK3.0 布局之表格布局

核心语法：

表格布局容器的创建：
GtkWidget *gtk_table_new( guint rows, guint columns, gboolean homogeneous );

rows: 行数
coumns: 列数
homogeneous：容器内表格的大小是否相等
返回值：表格布局容器指针

布局容器添加控件：
void gtk_table_attach_defaults(GtkTable *table, GtkWidget *widget,guint left_attach,guint right_attach,guint top_attach,guint bottom_attach );

table: 容纳控件的容器
widget: 要添加的控件

功能源码：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** 基于初始化图形库* 添加相关功能: 表格布局* * 细节要求:为表格布局第一行添加二个Button 按钮*         为表格布局第一行添加一个Button 按钮* * * */static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[]) {GtkWidget *window;GtkWidget *button;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数// gkt 表格布局组件初始化化GtkWidget *table = gtk_table_new(2, 2, TRUE); // 声明button1 组件GtkWidget *button1 = gtk_button_new_with_label("按钮一"); //  gtk Button 实例化g_signal_connect(button1, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button2 组件GtkWidget *button2 = gtk_button_new_with_label("按钮二"); //  gtk Button 实例化g_signal_connect(button2, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button3 组件GtkWidget *button3 = gtk_button_new_with_label("按钮一"); //  gtk Button 实例化g_signal_connect(button3, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 表格布局添加Button  组件gtk_table_attach_defaults(GTK_TABLE(table), button1, 0, 1, 0, 1);gtk_table_attach_defaults(GTK_TABLE(table), button2, 1, 2, 0, 1);gtk_table_attach_defaults(GTK_TABLE(table), button3, 0, 2, 1, 2);// 把表格布局容器添加到窗口gtk_container_add(GTK_CONTAINER(window), table); gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}

效果截图：

GTK3.0 布局之固定布局

核心语法：

固定布局的创建：
GtkWidget *gtk_fixed_new(void);
返回值：固定布局容器指针

固定布局容器添加控件：
void gtk_fixed_put( GtkFixed *fixed,GtkWidget *widget,gint x,gint y );

fixed：容纳控件的容器
widget：要添加的控件

x, y：控件摆放位置的起点坐标，如下图：

设置控件的大小( 宽和高 )：
void gtk_widget_set_size_request(GtkWidget *widget,gint width,gint height );

widget：需要设置的控件
width：宽度
height：高度

移动固定布局里控件的位置：
void gtk_fixed_move( GtkFixed *fixed,GtkWidget *widget,gint x,gint y);

fixed：固定布局容器
widget：需要移动的控件
x, y: 移动的位置

功能源码：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** 基于初始化图形库* 添加相关功能: 固定布局* * 细节要求:为固定布局左上角添加二个Button 按钮, 距离窗口(5, 10)*         为固定布局右下角添加一个Button 按钮, 距离窗口(200, 200)* * * */static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[]) {GtkWidget *window;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数// gkt 固定布局组件初始化化GtkWidget *fix = gtk_fixed_new(); // 声明button1 组件GtkWidget *button1 = gtk_button_new_with_label("左上角"); //  gtk Button 实例化g_signal_connect(button1, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button2 组件GtkWidget *button2 = gtk_button_new_with_label("右下角"); //  gtk Button 实例化g_signal_connect(button2, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 固定布局添加Button  组件gtk_fixed_put(GTK_FIXED(fix), button1, 5, 10);gtk_fixed_put(GTK_FIXED(fix), button2, 200, 200);// 把表格布局容器添加到窗口gtk_container_add(GTK_CONTAINER(window), fix); gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}

效果截图：

GTK3.0 布局实战之计算器

功能源码：

#include<stdio.h>
#include<gtk-3.0/gtk/gtk.h>/*** 基于初始化图形库* 添加相关功能: 通过表格布局,实现计算器布局* * 细节要求: 基于windows 11 系统计算器实现布局.*         * * * */static void print_hello(GtkWidget *widget, gpointer data) {g_print("Hello World\n");
}int main(int argc, char *argv[])
{GtkWidget *window;gtk_init(&argc, &argv); // gtk 初始化window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // gtk 窗口实例化g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL); //window 窗口绑定销毁事件,并触发gtk_main_quite 函数// gkt 表格布局组件初始化化GtkWidget *table = gtk_table_new(2, 2, TRUE); ; // 行编辑的操作GtkWidget *entry = gtk_entry_new();		// 行编辑的创建gtk_entry_set_text(GTK_ENTRY(entry), NULL);	// 给行编辑设置内容gtk_editable_set_editable(GTK_EDITABLE(entry), FALSE);// 设置行编辑不允许编辑，只做显示用// 声明button1 组件GtkWidget *button1 = gtk_button_new_with_label("1"); //  gtk Button 实例化g_signal_connect(button1, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button2 组件GtkWidget *button2 = gtk_button_new_with_label("2"); //  gtk Button 实例化g_signal_connect(button2, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button3 组件GtkWidget *button3 = gtk_button_new_with_label("3"); //  gtk Button 实例化g_signal_connect(button3, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button4 组件GtkWidget *button4 = gtk_button_new_with_label("+"); //  gtk Button 实例化g_signal_connect(button4, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button5 组件GtkWidget *button5 = gtk_button_new_with_label("4"); //  gtk Button 实例化g_signal_connect(button5, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button6 组件GtkWidget *button6 = gtk_button_new_with_label("5"); //  gtk Button 实例化g_signal_connect(button6, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button7 组件GtkWidget *button7 = gtk_button_new_with_label("6"); //  gtk Button 实例化g_signal_connect(button7, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button8 组件GtkWidget *button8 = gtk_button_new_with_label("-"); //  gtk Button 实例化g_signal_connect(button8, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button9 组件GtkWidget *button9 = gtk_button_new_with_label("7"); //  gtk Button 实例化g_signal_connect(button9, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button10 组件GtkWidget *button10 = gtk_button_new_with_label("8"); //  gtk Button 实例化g_signal_connect(button10, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button11 组件GtkWidget *button11 = gtk_button_new_with_label("9"); //  gtk Button 实例化g_signal_connect(button11, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button12 组件GtkWidget *button12 = gtk_button_new_with_label("*"); //  gtk Button 实例化g_signal_connect(button12, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button13 组件GtkWidget *button13 = gtk_button_new_with_label("0"); //  gtk Button 实例化g_signal_connect(button13, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button14 组件GtkWidget *button14 = gtk_button_new_with_label("C"); //  gtk Button 实例化g_signal_connect(button14, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button15 组件GtkWidget *button15 = gtk_button_new_with_label("="); //  gtk Button 实例化g_signal_connect(button15, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 声明button12 组件GtkWidget *button16 = gtk_button_new_with_label("/"); //  gtk Button 实例化g_signal_connect(button16, "clicked", G_CALLBACK(print_hello), NULL); // gtk Button 绑定cliend 事件并触发绑定函数// 表格布局添加Button  组件gtk_table_attach_defaults(GTK_TABLE(table), entry,  0, 4, 0, 1);// 表格布局添加Button  组件gtk_table_attach_defaults(GTK_TABLE(table), button1, 0, 1, 1, 2);gtk_table_attach_defaults(GTK_TABLE(table), button2, 1, 2, 1, 2);gtk_table_attach_defaults(GTK_TABLE(table), button3, 2, 3, 1, 2);gtk_table_attach_defaults(GTK_TABLE(table), button4, 3, 4, 1, 2);gtk_table_attach_defaults(GTK_TABLE(table), button5, 0, 1, 2, 3);gtk_table_attach_defaults(GTK_TABLE(table), button6, 1, 2, 2, 3);gtk_table_attach_defaults(GTK_TABLE(table), button7, 2, 3, 2, 3);gtk_table_attach_defaults(GTK_TABLE(table), button8, 3, 4, 2, 3);gtk_table_attach_defaults(GTK_TABLE(table), button9,  0, 1, 3, 4);gtk_table_attach_defaults(GTK_TABLE(table), button10, 1, 2, 3, 4);gtk_table_attach_defaults(GTK_TABLE(table), button11, 2, 3, 3, 4);gtk_table_attach_defaults(GTK_TABLE(table), button12, 3, 4, 3, 4);gtk_table_attach_defaults(GTK_TABLE(table), button13,  0, 1, 4, 5);gtk_table_attach_defaults(GTK_TABLE(table), button14, 1, 2, 4, 5);gtk_table_attach_defaults(GTK_TABLE(table), button15, 2, 3, 4, 5);gtk_table_attach_defaults(GTK_TABLE(table), button16, 3, 4, 4, 5);// 把表格布局容器添加到窗口gtk_container_add(GTK_CONTAINER(window), table); gtk_widget_show_all(window); // 显示windows 窗口包含的所有gtk 组件gtk_main(); //gtk 主事件循环开启return 0;
}