Gtk+/Glade 程式設計（四）佈局管理

ztguang發表於2016-03-30
程式設計
http://jianjiaosun.blog.163.com/blog/static/136124486201121694316493/


By unanao
     
    本文是根據只使用Gtk+的文章http://zetcode.com/tutorials/gtktutorial/gtklayoutmanagement/，將文中的例子使用Glade實現的。
    當我們設計我們的GUI應用程式時，我們確定使用哪些元件，以及如何組織這些元件。我們使用不可見得“佈局容器”對元件進行組織，這一章，我們會使用Glade實現GtkAlignment, GtkFixed, GtkVBox和GtkTable。

一、GtkFixed
    GtkFixed容器將子元件放在固定的位置，並且大小固定。這個容器沒有自動的佈局管理，在大多數的應用程式中，我們不實用GtkFixed 容器。但是有一些特殊的地方，我們使用這個容器。例如遊戲，與圖表協作的特殊應用程式，可移動並且可以改變大小的元件（如一個在電子表格中的圖表），用於 教學的小程式。
    由於叫佈局容器，所以GtkFixed在容器中，中文叫“固定的”。
在Glade中選擇元件
1.1 在"頂層"中，選擇“視窗”
1.2 在"容器"中，選擇“固定的”
1.3 在“控制和顯示”中，選擇“按鈕”
1.4 可以通過工具欄中“拖拽並調整工作區部件的大小”調整元件的位置和元件的大小

編寫Gtk+程式
unanao@debian:~/Experiment/gui/layout-mgt$ cat gtkfixed.c
/**
 * @file gtkfixed.c
 * @brief simple use of GtkFixed container 
 * @author unanao
 * @version 0.1
 * @date 2011-03-17
 */
#include

int main(int argc, char *argv[])
{
GtkWidget *window;
GtkBuilder *builder;

gtk_init(&argc, &argv);

builder = gtk_builder_new();
gtk_builder_add_from_file(builder, "gtkfixed.glade", NULL);

window = GTK_WIDGET(gtk_builder_get_object(builder, "window1"));

g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
gtk_widget_show_all(window);

gtk_main();

return 0;
}
編譯執行：
unanao@debian:~/Experiment/gui/layout-mgt$ gcc -o gtkfixed gtkfixed.c -Wall `pkg-config --cflags --libs gtk+-2.0`
unanao@debian:~/Experiment/gui/layout-mgt$ ./gtkfixed
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
 

二、GtkVBox
GtkVBox是一個盒子容器，可以將1個元件放到其中的1行裡面（1個格子裡）。
使用Glade設計gui
1、新增1個視窗
2、在“容器”中選擇“垂直框”，設定條目數為6
3、向每一個長方條的框中新增按鈕，別且修改，按鈕的屬性

編寫gtk+程式：
/**
 * @file gtkvbox.c
 * @brief Simple example about using GtkVbox with Glade
 * @author unanao
 * @version 0.1
 * @date 2011-03-19
 */
#include

int main(int argc, char *argv[])
{
GtkWidget *window;
GtkBuilder *builder;

gtk_init(&argc, &argv);

builder = gtk_builder_new();
gtk_builder_add_from_file(builder, "gtkvbox.glade", NULL);

window = GTK_WIDGET(gtk_builder_get_object(builder, "window1"));

g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

gtk_widget_show_all(window);

gtk_main();

return 0;
}
編譯：gcc -o gtkvbox gtkvbox.c -Wall `pkg-config --cflags --libs gtk+-2.0`
執行：./gtkvbox
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
三、GtkTable
GtkTable的是用方法與GtkVBox的方法基本一樣，只是一些表各種新增元件。
設計1個計算器的gui
使用Glade設計GUI
1、新增視窗
2、在“容器”中選擇“表格” －－ 4＊4
3、新增按鈕，並且設定按鈕的屬性（標籤）

編寫GTK+程式：
unanao@debian:~/Experiment/gui/layout-mgt$ cat gtktable.c
/**
 * @file gtktale.c
 * @brief simple example about how to use gtktable with glade
 * @Compile gcc -o gtktable gtktable.c -Wall `pkg-config --cflags --libs gtk+-2.0`
 *
 * @author unanao
 * @version 0.1
 * @date 2011-03-19
 */
#include

int main(int argc, char *argv[])
{
    GtkWidget *window;
    GtkBuilder *builder;

    gtk_init(&argc, &argv);

    builder = gtk_builder_new();
    gtk_builder_add_from_file(builder, "gtktable.glade", NULL);

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window1"));
   
    gtk_widget_show_all(window);
   
    gtk_main();

    return 0;
}
執行結果：
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
 四、GtkAlignment
控制子元件的對其方式和大小
1、新增一個視窗：
2、新增一個垂直框“，條目數為1
3、在垂直框上加入一個”對齊“（在容器中）
4、這隻對齊的屬性：
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
水平排列：1左右邊，0 最左邊
垂直排列：1最下邊，0最上邊
縮放比例：是否隨著視窗的變化而變化，0為不變化。

5、新增“水平框”（在容器中），並且設定屬性

 
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
間距設定兩個框之間的間距。
6、向“水平框”中新增兩個按鈕－－標籤為ok 和 close

Gtk+程式：
/**
 * @file gtkalignment.c
 * @brief simple use of GtkAlignment container
 * @author unanao
 * @version 0.1
 * @date 2011-03-17
 */
#include

int main(int argc, char *argv[])
{
    GtkWidget *window;
    GtkBuilder *builder;
   

    gtk_init(&argc, &argv);

    builder = gtk_builder_new();
    gtk_builder_add_from_file(builder, "gtkalignment.glade", NULL);

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window1"));

    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);   
    gtk_widget_show_all(window);

    gtk_main();

    return 0;
}
執行結果：
Gtk+/Glade 程式設計（四）佈局管理 - unanao - unanao
 
 

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
閱讀(1053) | 評論(0) | 轉發(6) |
0

上一篇：Gtk /Glade程式設計（三） 選單和工具欄

下一篇：find -exec

相關熱門文章
給主人留下些什麼吧！~~
評論熱議

相關文章