Gtk常用控件 按钮 图片控件 进度条 滑动窗口 分栏列表
Gtk常用控件
按钮(GtkButton)
// 带图标按钮的创建
// image: 通过 gtk_image_new_from_file()来创建, 参数为图片的路径
void gtk_button_set_image(GtkButton *button, GtkWidget *image);
// 设置按钮透明背景色
// newstyle: GTK_RELIEF_NONE 为透明
void gtk_button_set_relief(GtkButton *button, GtkReliefStyle newstyle);
栗子 : button.c
/* * @由于个人水平有限, 难免有些错误, 还请指点: * @Author: cpu_code * @Date: 2020-08-05 11:20:39 * @LastEditTime: 2020-08-05 11:35:04 * @FilePath: \gtk\button_image\button_image.c * @Gitee: [https://gitee.com/cpu_code](https://gitee.com/cpu_code) * @Github: [https://github.com/CPU-Code](https://github.com/CPU-Code) * @CSDN: [https://blog.csdn.net/qq_44226094](https://blog.csdn.net/qq_44226094) * @Gitbook: [https://923992029.gitbook.io/cpucode/](https://923992029.gitbook.io/cpucode/) */
//头文件
#include <gtk/gtk.h>
// 回调函数
void callback(GtkButton *button, gpointer data)
{
//获得按钮的文本内容
const char *str = gtk_button_get_label(button);
printf("str = %s\n", str);
// 图像控件
GtkWidget *image = gtk_image_new_from_file("1.png");
gtk_button_set_image(GTK_BUTTON(button), image);
}
int main(int argc, char *argv[])
{
// 初始化
gtk_init(&argc, &argv);
// 创建窗口
GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
// 设置标题
gtk_window_set_title(GTK_WINDOW(window), "cpucode button");
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
// 设置窗口边框的宽度
gtk_container_set_border_width(GTK_CONTAINER(window), 10);
// 窗口居中
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
GtkWidget *hbox = gtk_hbox_new(TRUE, 10); // 水平布局容器
gtk_container_add(GTK_CONTAINER(window), hbox); // 把横向盒状容器放入窗口
// 普通按钮
GtkWidget *normal_button = gtk_button_new_with_label("normal button");
gtk_button_set_label(GTK_BUTTON(normal_button), "change"); // 设置按钮的文本内容
g_signal_connect(normal_button, "pressed", G_CALLBACK(callback), NULL);
gtk_container_add(GTK_CONTAINER(hbox), normal_button); // 把按钮放入横向容器里
// 带图标按钮
GtkWidget *button = gtk_button_new(); // 先创建空按钮
GtkWidget *image = gtk_image_new_from_file("1.png"); // 图像控件
gtk_button_set_image(GTK_BUTTON(button), image);
gtk_container_add(GTK_CONTAINER(hbox), button); // 把按钮放入横向容器里
gtk_button_set_relief(GTK_BUTTON(button), GTK_RELIEF_NONE); // 按钮背景色透明
// 按钮使能设置,默认为使能TRUE,非使能FALSE
//gtk_widget_set_sensitive(button, FALSE);
gtk_widget_show_all(window); // 显示窗口控件
gtk_main(); // 主事件循环
return 0;
}
图片 :
Makefile
CC = gcc
MAINC = button_image.c
EXEC = button_image
CFLAGS = `pkg-config --cflags --libs gtk+-2.0`
main:
$(CC) $(MAINC) -o $(EXEC) $(CFLAGS)
clean:
rm $(EXEC) -rf
图片资源对象(GdkPixbuf)
// 图片资源对象的创建
// filename: 图片路径
// error: 储存错误的指针
GdkPixbuf *gdk_pixbuf_new_from_file(const gchar *filename, GError **error);
// 设置图片的大小
// interp_type: 是一个枚举变量, 标志图片的加载速度和质量, 常用 GDK_INTERP_BILINEAR
GdkPixbuf *gdk_pixbuf_scale_simple(const GdkPixbuf *src, int dest_width, int dest_height, GdkInterpType interp_type);
// 释放资源
void g_object_unref(GtkObject *object);
图片控件(GtkImage)
// 通过图片资源对象创建图片控件
GtkWidget *gtk_image_new_from_pixbuf(GdkPixbuf *pixbuf );
// 图片控件重新设置一张图片(pixbuf)
void gtk_image_set_froma_pixbuf(GtkImage *image, GdkPixbuf *pixbuf );
//清除控件里的图像数据
void gtk_image_clear(GtkImage *image);
栗子 : image.c
#include <gtk/gtk.h>
typedef struct _Window
{
GtkWidget *main_window;
GtkWidget *table;
GtkWidget *image;
GtkWidget *button_previous;
GtkWidget *button_next;
}WINDOW;
// 给创建好的image重新设计一张图片
void load_image(GtkWidget *image, const char *file_path, const int w, const int h )
{
gtk_image_clear( GTK_IMAGE(image) ); // 清除图像
GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(file_path, NULL); // 创建图片资源
GdkPixbuf *dest_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR); // 指定大小
gtk_image_set_from_pixbuf(GTK_IMAGE(image), dest_pixbuf); // 图片控件重新设置一张图片(pixbuf)
g_object_unref(src_pixbuf); // 释放资源
g_object_unref(dest_pixbuf); // 释放资源
}
// 根据图片路径创建一个新按钮,同时指定图片大小
GtkWidget *create_button_from_file(const char *file_path, const int w, const int h)
{
GtkWidget *temp_image = gtk_image_new_from_pixbuf(NULL);
load_image(temp_image, file_path, w, h);
GtkWidget *button = gtk_button_new(); // 先创建空按钮
gtk_button_set_image(GTK_BUTTON(button), temp_image); // 给按钮设置图标
gtk_button_set_relief(GTK_BUTTON(button), GTK_RELIEF_NONE); // 按钮背景色透明
return button;
}
// 按钮的回调函数
void deal_switch_image(GtkWidget *button, gpointer data)
{
WINDOW *p_temp = (WINDOW *)data;
if(button == p_temp->button_previous)
{ // 上一张
printf("p_temp->button_previous\n");
}
else if(button == p_temp->button_next )
{ // 下一张
printf("p_temp->button_next\n");
}
}
void window_demo(gpointer data)
{
WINDOW *p_temp = (WINDOW *)data;
// 主窗口
p_temp->main_window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // 创建主窗口
gtk_window_set_title(GTK_WINDOW(p_temp->main_window), "cpucode image"); // 设置窗口标题
gtk_window_set_position(GTK_WINDOW(p_temp->main_window), GTK_WIN_POS_CENTER); // 设置窗口在显示器中的位置为居中
gtk_widget_set_size_request(p_temp->main_window, 800, 480); // 设置窗口的最小大小
gtk_window_set_resizable(GTK_WINDOW(p_temp->main_window), FALSE); // 固定窗口的大小
g_signal_connect(p_temp->main_window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
// 表格布局
p_temp->table = gtk_table_new(7, 7, TRUE); // 表格布局容器
gtk_container_add(GTK_CONTAINER(p_temp->main_window), p_temp->table); // 容器加入窗口
// 图片控件
p_temp->image = gtk_image_new_from_pixbuf(NULL); // 创建图片控件
load_image(p_temp->image, "./image/1.jpg", 500, 450);
gtk_table_attach_defaults(GTK_TABLE(p_temp->table), p_temp->image, 1, 6, 1, 6); // 把图片控件加入布局
// 按钮
p_temp->button_previous = create_button_from_file("./image/previous.bmp", 80, 80);
gtk_table_attach_defaults(GTK_TABLE(p_temp->table), p_temp->button_previous, 1, 2, 6, 7);
g_signal_connect(p_temp->button_previous, "clicked", G_CALLBACK(deal_switch_image), p_temp);
p_temp->button_next = create_button_from_file("./image/next.bmp", 80, 80);
gtk_table_attach_defaults(GTK_TABLE(p_temp->table), p_temp->button_next, 5, 6, 6, 7);
g_signal_connect(p_temp->button_next, "clicked", G_CALLBACK(deal_switch_image), p_temp);
gtk_widget_show_all(p_temp->main_window);
}
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv); // 初始化
WINDOW window;
window_demo(&window);
gtk_main(); // 主事件循环
return 0;
}
Makefile
CC = gcc
MAINC = image.c
EXEC = image_
CFLAGS = `pkg-config --cflags --libs gtk+-2.0`
main:
$(CC) $(MAINC) -o $(EXEC) $(CFLAGS)
clean:
rm $(EXEC) -rf
进度条(GtkProgressBar)
// 进度条的创建
GtkWidget *gtk_progress_bar_new(void);
// 设置进度条显示的百分比
// fraction: 0.0 到 1.0
void gtk_progress_bar_set_fraction(GtkProgressBar *pbar, gdouble fraction);
//设置滑槽上的文本显示
void gtk_progress_bar_set_text(GtkProgressBar *pbar, gchar *text);
/* * 设置进度条的移动方向 * GTK_PROGRESS_LEFT_TO_RIGHT : 从左向右 * GTK_PROGRESS_RIGHT_TO_LEFT : 从右向左 * GTK_PROGRESS_BOTTOM_TO_TOP : 从下向上 * GTK_PROGRESS_TOP_TO_BOTTOM : 从上向下 */
void gtk_progress_bar_set_orientation(GtkProgressBar *pbar, GtkProgressBarOrientation orientation);
栗子 : progress_bar.c
#include <gtk/gtk.h>
#include <string.h>
// 回调函数,切换进度条的移动方向
void toggle_orientation(GtkWidget *widget, gpointer data)
{
// gtk_progress_bar_get_orientation: 获得进度条当前移动的方向
switch( gtk_progress_bar_get_orientation( GTK_PROGRESS_BAR(data) ) )
{
case GTK_PROGRESS_LEFT_TO_RIGHT:
gtk_progress_bar_set_orientation(GTK_PROGRESS_BAR(data), GTK_PROGRESS_RIGHT_TO_LEFT);
break;
case GTK_PROGRESS_RIGHT_TO_LEFT:
gtk_progress_bar_set_orientation(GTK_PROGRESS_BAR(data), GTK_PROGRESS_LEFT_TO_RIGHT);
break;
default: // 什么也不做
break;
}
}
// 更新进度条,这样就能够看到进度条的移动
void callback(GtkWidget *widget, gpointer data)
{
// 在原来值基础上增加 0.05
gdouble new_val = gtk_progress_bar_get_fraction( GTK_PROGRESS_BAR(data) ) + 0.05;
if(new_val > 1.0)
{
// 越界处理
new_val = 0.0;
}
// 设置进度条的新值
gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(data), new_val);
}
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv); // 初始化
// 创建主窗口
GtkWidget *window = gkt_window_new(GTK_WINDOW_TOPLEVEL);
gtk_window_set_title(GTK_WINDOW(window), "cpucode GtkProgressBar"); // 设置窗口标题
gtk_container_set_border_width(GTK_CONTAINER(window), 10); // 设置边框宽度
// 设置窗口在显示器中的位置为居中
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
// 设置窗口的最小大小
gtk_widget_set_size_request(window, 300, 200);
// 窗口关联 destroy 信号 到 gtk_main_quit
g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
GtkWidget *vbox = gtk_vbox_new(FALSE, 5); // 垂直布局容器
gtk_container_add(GTK_CONTAINER(window), vbox); // 容器加入窗口
// 创建一个进度条
GtkWidget *progress = gtk_progress_bar_new();
gtk_container_add(GTK_CONTAINER(vbox), progress); // 加入垂直布局容器
// 设置进度条显示的百分比:50%
gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(progress), 0.5 );
// 设置在进度条的滑槽上的文本显示
gtk_progress_bar_set_text(GTK_PROGRESS_BAR(progress), "some text");
// 添加一个按钮,切换移动方向
GtkWidget *button_orientation = gtk_button_new_with_label("Right to Left");
g_signal_connect(button_orientation, "clicked", G_CALLBACK(toggle_orientation), progress); // connect
gtk_container_add(GTK_CONTAINER(vbox), button_orientation); // 加入垂直布局容器
// 增加进度条进度按钮
GtkWidget *button = gtk_button_new_with_label("add");
g_signal_connect(button, "clicked", G_CALLBACK(callback), progress); // connect
gtk_container_add(GTK_CONTAINER(vbox), button); // 加入垂直布局容器
gtk_widget_show_all(window);
// 主事件循环
gtk_main();
return 0;
}
Makefile
CC = gcc
MAINC = progress_bar.c
EXEC = progress_bar
CFLAGS = `pkg-config --cflags --libs gtk+-2.0`
main:
$(CC) $(MAINC) -o $(EXEC) $(CFLAGS)
clean:
rm $(EXEC) -rf
滚动窗口(GtkScrolledWindow)
//滚动窗口的创建
// hadjustment : 水平方向的调整对象
// vadjustment : 垂直方向的调整对象。 它们一般都设置为 NULL。
GtkWidget *gtk_scrolled_window_new(GtkAdjustment *hadjustment, GtkAdjustment *vadjustment );
//滚动窗口添加控件
void gtk_scrolled_window_add_with_viewport(GtkScrolledWindow *scrolled_window, GtkWidget *child );
// 设置滚动条出现的方式(水平或垂直方向)
// GTK_POLICY_AUTOMATIC: 滚动条根据需要自动出现
// GTK_POLICY_ALWAYS: 滚动条总是出现
// GTK_POLICY_NEVER: 不需要滚动条
void gtk_scrolled_window_set_policy(GtkScrolledWindow *scrolled_window,
GtkPolicyType hscrollbar_policy,
GtkPolicyType vscrollbar_policy );
栗子 : scrolled_window.c 滚动窗口
#include <gtk/gtk.h>
// 回调函数
void destroy( GtkWidget *widget, gpointer data )
{
gtk_main_quit();
}
int main( int argc, char *argv[] )
{
gtk_init (&argc, &argv);
// 创建顶层窗口
GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
// 设置窗口的标题
gtk_window_set_title(GTK_WINDOW(window), "cpucode ScrolledWindow");
// 设置窗口在显示器中的位置为居中
gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
g_signal_connect(window, "destroy", G_CALLBACK(destroy), NULL);
gtk_widget_set_size_request(window, 300, 200); // 设置窗口的最小大小
/* 创建一个新的滚动窗口。 * 第一个参数是水平方向的调整对象 * 第二个参数是垂直方向的调整对象。 * 它们总是设置为NULL。 */
GtkWidget *scrolled_window = gtk_scrolled_window_new(NULL, NULL);
gtk_container_set_border_width(GTK_CONTAINER(scrolled_window), 10);
gtk_container_add(GTK_CONTAINER(window), scrolled_window); // 滚动窗口放入窗口
/* * 滚动条的出现方式可以是 GTK_POLICY_AUTOMATIC 或 GTK_POLICY_ALWAYS。 * GTK_POLICY_AUTOMATIC:将自动决定是否需要出现滚动条 * 第一个是设置水平滚动条 * 第二个是垂直滚动条 */
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled_window),
GTK_POLICY_AUTOMATIC,
GTK_POLICY_AUTOMATIC);
// 标签
GtkWidget *label = gtk_label_new("cpucode"\
"cpucode cpucode"\
"cpucode cpucode cpucode"\
"cpucode cpucode cpucode cpucode "\
"cpucode cpucode cpucode cpucode cpucode cpucode cpucode cpucode");
gtk_label_set_line_wrap(GTK_LABEL(label), TRUE); // label 自动换行
// 将标签组装到滚动窗口中
gtk_scrolled_window_add_with_viewport(GTK_SCROLLED_WINDOW(scrolled_window), label);
gtk_widget_show_all(window);
gtk_main();
return 0;
}
Makefile
CC = gcc
MAINC = scrolled_window.c
EXEC = scrolled_window
CFLAGS = `pkg-config --cflags --libs gtk+-2.0`
main:
$(CC) $(MAINC) -o $(EXEC) $(CFLAGS)
clean:
rm $(EXEC) -rf
分栏列表控件(GtkCList)
// 列表的创建
// columns: 列数
// titles: 标题, 指针数目应该与列数相等
GtkWidget *gtk_clist_new_with_titles(gint columns, gchar *titles[]);
// 设置某一列的宽度
void gtk_clist_set_column_width(GtkCList *clist, gint column, gint width);
//设置某列内容显示的对齐方式
// GTK_JUSTIFY_LEFT: 左对齐
// GTK_JUSTIFY_RIGHT: 右对齐
// GTK_JUSTIFY_CENTER: 居中对齐
// GTK_JUSTIFY_FILL: 填充
void gtk_clist_set_column_justification(GtkCList *clist, gint column, GtkJustification justification );
// 向列表中添加行
gint gtk_clist_append( GtkCList *clist, gchar *text[] );
// 删除列表中所有的行
void gtk_clist_clear(GtkCList *clist);
//获取某一行某一列的内容
gint gtk_clist_get_text(GtkCList *clist, gint row, gint column, gchar **text );
//常用信号, 选中某一行触发
select-row
栗子 : list.c 分栏列表
#include <gtk/gtk.h>
// 用户点击"Add List"按钮时的回调函数
void button_add_clicked( GtkWidget *widget, gpointer data )
{
char *a[2] = {"Mike", "3 Oz"};
gtk_clist_append( (GtkCList *)data, a );
char *b[2] = { "Water", "6 l" };
gtk_clist_append( (GtkCList *)data, b );
}
//用户点击"Clear List" 按钮时的回调函数
void button_clear_clicked( GtkWidget *widget, gpointer data )
{
/* 用gtk_clist_clear函数清除列表。比用 * gtk_clist_remove函数逐行清除要快 */
gtk_clist_clear( (GtkCList *)data );
}
// 用户选中某一行时的回调函数
void selection_made( GtkWidget *clist, gint row,
gint column, GdkEventButton *event,
gpointer data )
{
gtk_widget_queue_draw(clist); // 人为更新列表,开发板有效
gchar *text;
/* 取得存储在被选中的行和列的单元格上的文本 * 当鼠标点击时,我们用text参数接收一个指针 */
gtk_clist_get_text(GTK_CLIST(clist), row, column, &text);
//打印一些关于选中了哪一行的信息
g_print("第%d行,第%d列的内容为%s\n", row, column, text);
}
int main( int argc, gchar *argv[] )
{
gtk_init(&argc, &argv); // 初始化
// 主窗口
GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL); // 创建窗口
gtk_widget_set_size_request(GTK_WIDGET(window), 300, 300); // 设置最小大小
gtk_window_set_title(GTK_WINDOW(window), "cpucode GtkCList "); // 设置标题
gtk_window_set_resizable(GTK_WINDOW(window), FALSE); // 固定窗口大小
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
// 表格布局容器
GtkWidget *table = gtk_table_new(5, 2, TRUE);
gtk_container_add(GTK_CONTAINER(window), table);
/* 创建一个滚动窗口构件,将GtkCList组装到里面。 * 这样使得内容超出列表时,可以用滚动条浏览 * 第一个参数是水平方向的调整对象, * 第二个参数是垂直方向的调整对象。 * 它们总是设置为NULL。 */
GtkWidget *scrolled_window = gtk_scrolled_window_new(NULL, NULL);
gtk_table_attach_defaults(GTK_TABLE(table), scrolled_window, 0, 2, 0, 4);// 把按钮加入布局
// GTK_POLICY_AUTOMATIC:滚动条根据需要自动出现时
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled_window),
GTK_POLICY_AUTOMATIC,
GTK_POLICY_AUTOMATIC);
gchar *titles[2] = { "Ingredients", "Amount" };
// 创建GtkCList构件。本例中,我们使用了两列
GtkWidget *clist = gtk_clist_new_with_titles(2, titles);
// 将GtkCList构件添加到滚动窗口构件中
gtk_scrolled_window_add_with_viewport(GTK_SCROLLED_WINDOW(scrolled_window), clist);
/* 设置某列内容显示的对齐方式 * GTK_JUSTIFY_LEFT : 列中的文本左对齐。 * GTK_JUSTIFY_RIGHT : 列中的文本右对齐。 * GTK_JUSTIFY_CENTER :列中的文本居中对齐。 * GTK_JUSTIFY_FILL : 文本使用列中所有可用的空间 */
gtk_clist_set_column_justification(GTK_CLIST(clist), 1, GTK_JUSTIFY_CENTER);
/* 很重要的一点,我们设置列宽,让文本能容纳在列中。 * 注意,列编号是从0开始的, 本例中是0和1 */
gtk_clist_set_column_width(GTK_CLIST(clist), 0, 150);
// 选择某一行时触发selection_made回调函数
g_signal_connect(clist, "select-row", G_CALLBACK(selection_made), NULL);
// 按钮的创建,并放进布局容器里
GtkWidget *button_add = gtk_button_new_with_label("Add List");
GtkWidget *button_clear = gtk_button_new_with_label("Clear List");
gtk_table_attach_defaults(GTK_TABLE(table), button_add, 0, 1, 4, 5);// 把按钮加入布局
gtk_table_attach_defaults(GTK_TABLE(table), button_clear, 1, 2, 4, 5);// 把按钮加入布局
// 为按钮的点击设置回调函数
g_signal_connect(button_add, "clicked", G_CALLBACK(button_add_clicked), (gpointer)clist);
g_signal_connect(button_clear, "clicked", G_CALLBACK(button_clear_clicked), (gpointer)clist);
gtk_clist_set_row_style(GTK_CLIST(clist), 2, NULL);
/* 界面已经完全设置好了,下面可以显示窗口, * 进入gtk_main主循环 */
gtk_widget_show_all(window);
gtk_main();
return 0;
}
Makefile
CC = gcc
MAINC = list.c
EXEC = list
CFLAGS = `pkg-config --cflags --libs gtk+-2.0`
main:
$(CC) $(MAINC) -o $(EXEC) $(CFLAGS)
clean:
rm $(EXEC) -rf
- @由于个人水平有限, 难免有些错误, 还请指点:
- @Author: cpu_code
- @Date: 2020-08-06 16:51:19
- @LastEditTime: 2020-08-06 18:26:39
- @FilePath: \notes\GTK\Control.md
- @Gitee: https://gitee.com/cpu_code
- @Github: https://github.com/CPU-Code
- @CSDN: https://blog.csdn.net/qq_44226094
- @Gitbook: https://923992029.gitbook.io/cpucode/