C语言GUI程序设计-GTK图文系列-GtkWidget之容器

G0398

这一讲主要来讲GTK中容器部件的使用。

容器部件主要是用来布局和分组的。GTK中的容器部件有10多个，每个部件都有自己的特点，只有了解所有部件的使用后才能在应用场合随心所欲，快速选择最合适的部件。

所有的容器部件都“继承”与GtkContainer“类”，面向对象的设计思路。


容器部件的使用流程：

• 创建一个容器部件
• 将容器部件添加到窗体
• 设置容器部件的属性
• 向容器部件添加子部件
  

GtkGrid
GtkGrid是常用的布局部件，以一个行列的二维表格形式呈现里面的内容。
一个二维数组的效果图：

1. #include <gtk/gtk.h>
   
2. #include <string.h>
   
3. #include <stdlib.h>
   
4. 
   
5. int window_width = 600;
   
6. int window_height = 400;
   
7. 
   
8. int main(int argc,char *argv[])
   
9. {
   
10.     char buffer[5];
    
11.     int row = 10,column = 10;
    
12.     int i = 0,j = 0;
    
13.     GtkWidget *window,*grid;
    
14.     GtkWidget* labels[row][column];
    
15. 
    
16.     gtk_init (&argc, &argv);
    
17. 
    
18.     window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    
19.     /*1.创建容器部件*/
    
20.     grid = gtk_grid_new();
    
21.     /*2.将容器部件添加到窗口中*/
    
22.     gtk_container_add(GTK_CONTAINER(window), grid);
    
23. 
    
24.     /*3.设置容器部件的属性*/
    
25.     gtk_grid_set_row_spacing (GTK_GRID(grid), 20);
    
26.     gtk_grid_set_column_spacing(GTK_GRID(grid),30);
    
27. 
    
28.     for(i=0;i<row;i++)
    
29.     {
    
30.         gtk_grid_insert_row(GTK_GRID(grid),0);
    
31.     }
    
32.     for(j=0;j<column;j++)
    
33.     {
    
34.         gtk_grid_insert_column(GTK_GRID(grid),0);
    
35.     }
    
36. 
    
37.     /*4.为容器部件添加子部件*/
    
38.     for(i=0;i<row;i++)
    
39.     {
    
40.         for(j=0;j<column;j++)
    
41.         {
    
42.             sprintf(buffer,"[%d,%d]",i,j);
    
43.             labels[i][j] = gtk_label_new(buffer);
    
44.             gtk_grid_attach(GTK_GRID(grid),labels[i][j],j,i,1,1);
    
45.         }
    
46.     }
    
47. 
    
48.     gtk_window_set_title(GTK_WINDOW(window),"hello fishc ");
    
49. 
    
50.     gtk_widget_show_all(window);
    
51.     gtk_main ();
    
52. 
    
53.     return 0;
    
54. }
    

复制代码

遵循上面的四个步骤：

1、创建一个GtkGrid“对象”。

1. grid = gtk_grid_new();

复制代码

2、将GtkGrid添加到窗口中

1. gtk_container_add(GTK_CONTAINER(window), grid);

复制代码

3、设置行间距和列间距

1. gtk_grid_set_row_spacing (GTK_GRID(grid), 20);
   
2.     gtk_grid_set_column_spacing(GTK_GRID(grid),30);

复制代码

添加行和列

1.     for(i=0;i<row;i++)
   
2.     {
   
3.         gtk_grid_insert_row(GTK_GRID(grid),0);
   
4.     }
   
5.     for(j=0;j<column;j++)
   
6.     {
   
7.         gtk_grid_insert_column(GTK_GRID(grid),0);
   
8.     }

复制代码

4、为GtkGrid添加子部件

1. gtk_grid_attach(GTK_GRID(grid),labels[i][j],j,i,1,1);

复制代码

这里的gtk_grid_attach函数有6个参数，第三个和第四个是指定行和列的位置，最后俩个来说明这个部件是否需要跨多个单元格，类似html中的rowspan或columnspan。
这是一个两行三列的表格，标题横跨三个单元格：

例程(部分)：

1.     label_title = gtk_label_new("GTK lesson - Widget Container");
   
2.     label_content_left = gtk_label_new("GtkGrid");
   
3.     label_content_mid = gtk_label_new("GtkAlignment");
   
4.     label_content_right = gtk_label_new("tkAspectFrame");
   
5. 
   
6.     gtk_grid_attach(GTK_GRID(grid),label_title,0,0,3,1); //倒数第二个参数为3，表示横跨3列
   
7.     gtk_grid_attach(GTK_GRID(grid),label_content_left,0,1,1,1);
   
8.     gtk_grid_attach(GTK_GRID(grid),label_content_mid,1,1,1,1);
   
9.     gtk_grid_attach(GTK_GRID(grid),label_content_right,2,1,1,1);

复制代码

GtkAlignment
这个部件是用来控制子部件的对齐方式和大小的。

1. #include <gtk/gtk.h>
   
2. #include <string.h>
   
3. #include <stdlib.h>
   
4. 
   
5. int window_width = 600;
   
6. int window_height = 400;
   
7. 
   
8. int main(int argc,char *argv[])
   
9. {
   
10.     GtkWidget *window,*alignment,*label;
    
11.     gtk_init (&argc, &argv);
    
12. 
    
13.     window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    
14.     alignment = gtk_alignment_new(0,0,0,0);
    
15.     gtk_container_add(GTK_CONTAINER(window), alignment);
    
16.     label = gtk_label_new("GTK Alignment Widget");
    
17.     gtk_container_add(GTK_CONTAINER(alignment), label);
    
18. 
    
19.     gtk_window_set_title(GTK_WINDOW(window),"hello fishc ");
    
20.     gtk_widget_set_size_request(window,300,200);
    
21. 
    
22.     gtk_widget_show_all(window);
    
23.     gtk_main ();
    
24. 
    
25.     return 0;
    
26. }
    

复制代码

在创建的时候传入参数，设置子部件的对齐方式。
gtk_alignment_new
这个函数有四个参数，前俩个为水平和垂直方向对齐，也就是计算子部件在父容器中的比率。以左上角为起点，右上角为水平方向最大值1，左下角为垂直方向最大值1。
比如，我们要把这行文本显示在窗口的右下角，这样设置即可：

1. alignment = gtk_alignment_new(1,1,0,0);

复制代码

后俩个参数的意思为水平和垂直方向的scale值，也就是缩放值，在这个缩放基础上子控件进行居中布局。
比如：要设置文本显示在窗口中心：

1. alignment = gtk_alignment_new(0,0,1,1);

复制代码

还可以通过padding的值设置内边距，类似html中的padding

1. gtk_alignment_set_padding(GTK_ALIGNMENT(alignment),40,0,20,0);

复制代码

设置top-padding为40，left-padding为20.

注意(Note)：这个部件只能添加一个子部件，如果你要添加多个，GTK会在控制台输出下面的错误信息。

1. Gtk-WARNING **: Attempting to add a widget with type GtkLabel t
   
2. o a GtkAlignment, but as a GtkBin subclass a GtkAlignment can only contain one w
   
3. idget at a time; it already contains a widget of type GtkLabel

复制代码

看下它的继承关系就明白了，它是继承与GtkBin的，GtkBin继承于GtkContainer。

GtkBin — A container with just one child

由于GtkBin只能有一个子部件，所以继承于它的部件也是只能有一个子部件。