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;
}

效果截图:

GTK 官方文档和Demo 安装和查看 

1、安装GTK3.0 官方文档,请执行如下指令

sudo apt-get install devhelp

  • 17
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值