Hi Peng! I’m impressed with your progress 
You will be able to do a lot very soon.
You ask a good question. The layout for
GTK takes some time to understand. Once
you understand it, though, it’s pretty easy
to use.
The most important thing to understand is that
the layout is designed so that the window can
be resized and still look good. Usually people
think, “I want a button that is 80 pixels wide,
40 pixels high and located at 100,200”. But
if you resize the window that button may
be too big or small. Or it might not be in the
window any more.
You can lay out widgets like that in GTK,
but it isn’t the usual way. Usually you say
that you want 3 buttons in a row and you
put them in an HBox. The HBox will lay
the buttons out in a row. But what the buttons
look like depends on the parameters that
you send to pack_start (or pack_end). There
are 3 of them.
You can see in your program that you
said:
box1.pack_start(button1, false, false, 1)
The false, false, 1 part is the one that controls
the shape of the button in the container
(HBox).
Before I explain what they mean, I’ll talk a bit about
how the layout works. When you put a widget in
a container (in this case you are putting a button
widget in an HBox container), the container reserves
space for the widget. At first it reserves the amount
of space that you request. But if the window is
bigger than you need, there will be space left over.
This extra space can be used to put between
the widgets. If you want to use some of that extra
space between your widgets, you can do it by
setting the first of the values to true.
With box1, try it and see what happens. Change
the line that packs box1 to
box1.pack_start(button1, true, false,1)
The extra space is turned into blank space between
the widgets. You can also tell it to grow the
widget to use up the extra space. You do this by
changing the second one to true:
box1.pack_start(button1, true, true,1)
Now the button will grow to use up the extra room.
Finally, you might want to have a minimum amount
of blank space between your widgets. That’s what the
last number is for. It’s the number of black pixels
between the widgets. In this case it is one. But
if you change it to 10, then the buttons will always
have at least 10 pixels of space between them.
Maybe you noticed that everything we did only
changed the width of the buttons. Nothing changed
the height of the buttons. That’s because this is
an HBox. All of the widgets in an HBox are the
same height.
In a VBox, the widgets are packed vertically (one on
top of the other). All of the widgets are the same width.
To do what you want, you must wrap each of your
buttons in a VBox and then pack the VBoxes in the
HBox. Here is an example:
require ‘gtk2’
window = Gtk::Window.new
window.title = “Hello Buttons”
window. set_default_size 400, 400
window.signal_connect(‘delete_event’) do
Gtk.main_quit
false
end
box1 = Gtk::HBox.new(false, 0)
window.add(box1)
button1 = Gtk::Button.new(“Button 1”)
button1.set_size_request 80, 80
boxb1 = Gtk::VBox.new(false, 0)
boxb1.pack_start(button1, false, false, 1)
box1.pack_start(boxb1, false, false, 0)
button2 = Gtk::Button.new(“Button 2”)
button2.set_size_request 40, 40
boxb2 = Gtk::VBox.new(false, 0)
boxb2.pack_start(button2, false, false, 1)
box1.pack_start(boxb2, false, false, 0)
window.show_all
Gtk.main
What is happening? When we put the
button in the VBox, we use
pack_start(false, false, 0)
This means that we don’t want to use
the extra space. The button won’t grow
up or down even if there is more space.
The VBox will grow up and down, but the
button will remain the same size and in
the same position (with no space around it).
We do the same with the second button
and the two are put into the HBox. We now
have the desired result!
I’m sorry this is a very long explanation. I guess
English isn’t your first language (even though your
posts are almost perfect!) If you need a better
explanation, please ask.
Anyway, it might seem like a lot of work to lay
things out like this. But actually, if you give up
the idea of controlling exactly how big each
item is and exactly where it is on the screen, then
it becomes much easier. Also, your program will
work better since it will automatically resize properly.
I hope that helps!
MikeC