Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3/ru: Difference between revisions

From KDE TechBase
(Created page with "Иерархия виджетов")
(Updating to match new version of source page)
 
(19 intermediate revisions by one other user not shown)
Line 1: Line 1:
<languages />
<languages />
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 3}}


{{TutorialBrowser/ru|
{{TutorialBrowser/ru|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Введение в программирование на Qt<sup>®</sup>4 на языке Ruby]]|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Введение в программирование на Qt<sup>®</sup>4 на языке Ruby]]|
name=Иерархия виджетов|
name=Иерархия виджетов|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2|Tutorial 2 - Calling it Quits]]|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2|Пример 2: Выход по нажатию]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_04|Tutorial 4 - Let There Be Widgets]]
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_04|Пример 4: Давайте создадим свой виджет]]
}}
}}


== Family Values ==
== Иерархия виджетов ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_3.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_3.png|center]]


Files:
Файлы:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t3/t3.rb t3.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t3/t3.rb t3.rb]


=== Overview ===
=== Обзор ===


This example shows how to create parent and child widgets.
Этот пример показывает, как можно создать родительский и дочерний виджеты.


We'll keep it simple and use just a single parent and a lone child.
Мы максимально упростим задачу и создадим единственный родительский виджет и только один дочерний ему виджет.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 39: Line 37:
</syntaxhighlight>
</syntaxhighlight>


=== Line by Line Walkthrough ===
=== Построчный обзор программы ===
<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
window = Qt::Widget.new()
window = Qt::Widget.new()
</syntaxhighlight>
</syntaxhighlight>


Here we simply create a plain widget object. The [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] class is the base class of all user interface objects. The widget is the atom of the user interface: It receives mouse, keyboard and other events from the window system, and paints a representation of itself on the screen. A widget is clipped by its parent and by the widgets in front of it.
Здесь мы создаём объект простого виджета. [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] — базовый класс для всех объектов интерфейса пользователя. Виджет — это неделимая единица интерфейса. Он получает события от оконной системы при использовании мыши, клавиатуры и других действиях, а также рисует себя на экране. Область виджета на экране может быть обрезана родительским виджетом или перекрыта виджетами, расположенными поверх него.


A widget that isn't embedded in a parent widget, like this particular widget, is called a window. Usually, windows have their own window frame and taskbar entry, provided by the window system. A widget without a parent widget is always an independent window. Its initial position on the screen is controlled by the window system.
Виджет, который не встроен в родительский виджет (как в нашем примере) называется окном. Обычно окна имеют рамку и соответствующий элемент в панели задач, которые создаются оконной системой. Виджет, не имеющий родительского виджета, всегда является свободным окном. Его исходное положение на экране выбирается оконной системой.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 52: Line 50:
</syntaxhighlight>
</syntaxhighlight>


We set the window's width to 200 pixels and its height to 120 pixels.
Мы устанавливаем ширину окна равной 200 пикселам, а высоту равной 120 пикселам.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 58: Line 56:
</syntaxhighlight>
</syntaxhighlight>


A child is born. This [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] is created with a parent widget ('''<tt>window</tt>'''). A child widget is always displayed within its parent's area. When displayed, it is clipped by its parent's bounds. By default, it is rooted at the top-left corner of its parent, at position (0, 0).
Создание дочернего виджета. При создании объекта [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] в качестве родительского виджет выбирается '''<tt>window</tt>'''. Дочерний виджет всегда показывается внутри родительского, если что-то не умещается в границы родительского виджета, это обрезается. По умолчанию дочерний виджет расположен в левом верхнем углу родительского и имеет относительные координаты (0, 0).


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 64: Line 62:
</syntaxhighlight>
</syntaxhighlight>


The [http://doc.qt.nokia.com/latest/qwidget.html#setgeometry Qt::Widget::setGeometry()] function takes four arguments: The first two arguments are the x and y coordinates of the button's top-left corner. The coordinates are relative to the parent widget. The last two arguments are the button's width and height. The result is a button that extends from position (10, 40) to position (190, 80).
Метод [http://doc.qt.nokia.com/latest/qwidget.html#setgeometry Qt::Widget::setGeometry()] принимает 4 аргумента: первые 2 аргумента — координаты левого верхнего угла кнопки относительно родительского окна, другие 2 аргумента — ширина и высота кнопки соответственно. В результате такого вызова мы получаем кнопку, занимающую прямоугольник с углами в точках (10, 40) и (190, 80).


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 70: Line 68:
</syntaxhighlight>
</syntaxhighlight>


When a parent widget is shown, it will call show for all its children (except those that were explicitly hidden using [http://doc.qt.nokia.com/latest/qwidget.html#hide Qt::Widget::hide()]).
При вызове метода '''show()''' у родительского виджета, он сам вызывает '''show()''' для всех своих дочерних виджетов (кроме тех, которые были явно скрыты вызовом [http://doc.qt.nokia.com/latest/qwidget.html#hide Qt::Widget::hide()]).


=== Running the Application ===
=== Запуск приложения ===


The button no longer fills the entire window. Instead, it stays at position (10, 40) within the window and with a size of (180, 40), because of the [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call.
Кнопка уже не занимает всё окно, теперь она расположена в координатах (10, 40) и имеет размер (180, 40). Это было достигнуто вызовом [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()].


=== Exercises ===
=== Упражнения ===


Try resizing the window. How does the button change? What happens to the button's height if you run the program with a bigger font? What happens if you try to make the window really small?
Попробуйте изменить размер окна. Как изменилась кнопка? Что произойдёт с высотой кнопки, если увеличить шрифт? Что произойдёт, если попробовать сильно уменьшить размер окна?


[[Category:Ruby]]
[[Category:Ruby/ru]]

Latest revision as of 09:11, 14 July 2012

Other languages:
Иерархия виджетов
Серия примеров   Введение в программирование на Qt®4 на языке Ruby
Необходимо знать   Пример 2: Выход по нажатию
Следующий пример   Пример 4: Давайте создадим свой виджет
Литература   нет

Иерархия виджетов

Файлы:

Обзор

Этот пример показывает, как можно создать родительский и дочерний виджеты.

Мы максимально упростим задачу и создадим единственный родительский виджет и только один дочерний ему виджет. 

require 'Qt4'

app = Qt::Application.new(ARGV)

window = Qt::Widget.new()
window.resize(200, 120)

quit = Qt::PushButton.new('Quit', window)
quit.font = Qt::Font.new('Times', 18, Qt::Font::Bold)
quit.setGeometry(10, 40, 180, 40)
Qt::Object.connect(quit, SIGNAL('clicked()'), app, SLOT('quit()'))

window.show()
app.exec()

Построчный обзор программы

window = Qt::Widget.new()

Здесь мы создаём объект простого виджета. Qt::Widget — базовый класс для всех объектов интерфейса пользователя. Виджет — это неделимая единица интерфейса. Он получает события от оконной системы при использовании мыши, клавиатуры и других действиях, а также рисует себя на экране. Область виджета на экране может быть обрезана родительским виджетом или перекрыта виджетами, расположенными поверх него.

Виджет, который не встроен в родительский виджет (как в нашем примере) называется окном. Обычно окна имеют рамку и соответствующий элемент в панели задач, которые создаются оконной системой. Виджет, не имеющий родительского виджета, всегда является свободным окном. Его исходное положение на экране выбирается оконной системой. 

window.resize(200, 120)

Мы устанавливаем ширину окна равной 200 пикселам, а высоту равной 120 пикселам. 

quit = Qt::PushButton.new('Quit', window)

Создание дочернего виджета. При создании объекта Qt::PushButton в качестве родительского виджет выбирается window. Дочерний виджет всегда показывается внутри родительского, если что-то не умещается в границы родительского виджета, это обрезается. По умолчанию дочерний виджет расположен в левом верхнем углу родительского и имеет относительные координаты (0, 0). 

quit.setGeometry(10, 40, 180, 40)

Метод Qt::Widget::setGeometry() принимает 4 аргумента: первые 2 аргумента — координаты левого верхнего угла кнопки относительно родительского окна, другие 2 аргумента — ширина и высота кнопки соответственно. В результате такого вызова мы получаем кнопку, занимающую прямоугольник с углами в точках (10, 40) и (190, 80). 

window.show()

При вызове метода show() у родительского виджета, он сам вызывает show() для всех своих дочерних виджетов (кроме тех, которые были явно скрыты вызовом Qt::Widget::hide()).

Запуск приложения

Кнопка уже не занимает всё окно, теперь она расположена в координатах (10, 40) и имеет размер (180, 40). Это было достигнуто вызовом Qt::Widget::setGeometry().

Упражнения

Попробуйте изменить размер окна. Как изменилась кнопка? Что произойдёт с высотой кнопки, если увеличить шрифт? Что произойдёт, если попробовать сильно уменьшить размер окна?

Retrieved from "https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_3/ru&oldid=72977"