§3 Компоновка элементов


О менеджерах компоновки

На предыдущих занятиях мы размещали и выравнивали элементы вручную. С одной стороны это никак не вяжется с концепцией быстрой разработки, а с другой – чревато негативными последствиями и отсутствием гибкости. Чтобы решить данную проблему в Qt имеются средства автоматического размещения элементов – классы менеджеров компоновки (layout managers). Базовым классом менеджеров компоновки является Qlayout. Этот класс наследуют классы:

  • QGridLayout
  • QStackedLayout
  • QBoxLayout. Наследники класса:
    • QHBoxLayout
    • QVBoxLayout
В задачу менеджеров входит не только размещение виджетов, но также их добавление, скрытие или удаление из текущей компоновки (но не из программы), в том числе других (вложенных) компоновок. Для создания компоновки можно использовать как дизайнер форм, так и ручной кодинг. Здесь мы рассмотрим возможности предлагаемые редактором форм.

QBoxLayout. Горизонтальная и вертикальная компоновка

Класс QBoxLayout руководит горизонтальной и вертикальной компоновкой. Его дочерние классы определяют горизонтальную и вертикальную компоновки. Создайте новый проект и перейдите к дизайнеру форм (widget.ui). В панели элементов найдите секцию Layouts и перетащите на форму Horizontal Layout. Далее перейдите к секции Input Widgets. Разместите на форме внутри ограничителя компоновки два элемента: Spin Box и Horizontal Slider так, как показано на Рис. 1. Элементы будут автоматически размещаться друг за другом по горизонтали в пределах окна. Отправим сигнал valueChanged от объекта horizontalSlider на слот setValue() объекта spinBox:

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->spinBox->setValue(value);
}

Установите для объекта horizontalSlider в Инспекторе объектов свойство tickPosition: TicksBelow. Значение счетчика будет меняться в зависимости от положения ползунка. Перейдите к свойствам объекта horizontalLayout. Установите значения полей (*Margin): 10. Выполните сборку и запуск приложения. Результат должен выглядеть следующий образом:

Рис. 1.

Создайте новый проект и перейдите к дизайнеру форм. В секции Layouts панели элементов найдите и перетащите на форму Vertical Layout. Далее перейдите к секции Input Widgets и разместите на форме внутри ограничителя компоновки элемент Horizontal Slider. Перейдите к секции Display Widgets и разместите на форме выше элемента Horizontal Slider элемент LCD Number так, как показано на рис. 2. Элементы будут автоматически размещаться друг за другом по вертикали в пределах окна. Отправим сигнал valueChanged от объекта horizontalSlider на слот display() объекта lcdNumber:

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->lcdNumber->display(value);
}

Установите для объекта horizontalSlider в Инспекторе объектов свойство tickPosition: TicksBelow. Перейдите к свойствам объекта verticalLayout. Установите значения полей (*Margin): 15. Выполните сборку и запуск приложения. Результат должен выглядеть следующий образом:

Рис. 2.

QGridLayout. Табличная компоновка

Эта компоновка использует для размещения элементов в ячейках таблицы. Координаты ячеек задаются в формате (X, Y): X – это номер строки (нумерация начинается с 0), а Y – это номер столбца (как в матрице). Этот способ компоновки использует довольно громоздкий кодинг. Однако дизайнер способен очень быстро разместить элементы с помощью QGridLayout одним кликом мыши. Создайте новый проект и выведите на форму следующие компоненты: один элемент Plain Text Edit и шесть кнопок Push Button, как показано на рис. 3.

Рис. 3.

Найдите в меню (сверху) кнопку “Скомпоновать по сетке” (показано стрелкой на рис. 3). Нажмите. Элементы будут выровнены и распределены в таблице автоматически. Чтобы дизайнер “догадался” занять под окно редактора три ячейки таблицы – растяните элемент Plain Text Edit на всю ширину формы. Создадим приложение, которое будет окрашивать в определенный цвет фон редактора текста по нажатию на соответствующую кнопку. Для каждой кнопки определите сигналы:

void Widget::on_pushButton_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: red;");
}

void Widget::on_pushButton_2_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: green;");
}

void Widget::on_pushButton_3_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: blue;");
}

void Widget::on_pushButton_4_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: yellow;");
}

void Widget::on_pushButton_5_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: magenta;");
}

void Widget::on_pushButton_6_clicked()
{
    ui->plainTextEdit->setStyleSheet("background-color: gray;");
}

Выполните сборку и запуск приложения. Результат должен выглядеть следующий образом:

Рис. 4.
Мы не будем здесь рассматривать класс QStackedLayout. Он предоставляет стек виджетов, в котором в один момент виден только один элемент.

Вложенные компоновки и растяжки

Вложенные компоновки (один тип компоновки находится внутри другого типа) позволяют реализовать практически любой порядок размещение элементов, ограниченный только вашим творческим потенциалом. Создадим приложение определяющее информационный объем несжатого аудиофайла. Внешняя компоновка виджетов приложения – табличная. Она состоит из шести ячеек. В каждой ячейке используется контейнер Group Box. Этот контейнер удобно использовать для группировки элементов переключатели (Radio Button). Этот контейнер не относится к менеджерам компоновки, но имеет свойства выравнивания содержимого, а также надпись сверху. Элементы внутри контейнера должны быть сгруппированы менеджерами компоновки. В правом нижнем контейнере внутри компоновки использовался элемент Horizontal Spacer. Элементы Spacers предназначены для создания пустого пространства с какой-либо стороны элемента и действуют на подобии пружинок. Эти элементы используются для облегчения компоновки виджетов (но всегда найдется и альтернативный вариант). Для размещения элементов этого контейнера использовалась вложенная компоновка (две горизонтальные компоновки внутри вертикальной).
Один из элементов Radio Button в каждой группе должен иметь включенным свойство checked (элемент выбран).
Так выглядит форма по окончании верстки:

Рис. 5.

Код сигнала для кнопки “Вычислить” мы напишем в следующем порядке. Вначале берем содержимое поля lineEdit и конвертируем данные в действительное число (сохраняя, при этом, сведения об успешности этой операции в логической переменной). Далее проверяем: какой из переключателей был выбран и, таким образом, получаем значения нужных нам переменных. После того, как все данные были нами получены – вычисляем объем файла и выводим результат в окно текстового редактора. Обратите внимание, что окно textEdit поддерживает HTML-форматирование.

void Widget::on_pushButton_clicked()
{
    QString string = ui->lineEdit->text();
    double nu, n, f, i;
    bool ok = false;
    double t = string.toDouble(&ok);

    // Определяем выбранные радиокнопки
    if (ui->radioButton->isChecked()){
        f = 11.0;
    } else if (ui->radioButton_2->isChecked()) {
        f = 22.05;
    } else {
        f = 44.1;
    }

    if (ui->radioButton_4->isChecked()){
        nu = 8.0;
    } else if (ui->radioButton_5->isChecked()) {
        nu = 16.0;
    } else {
        nu = 32.0;
    }
    if (ui->radioButton_7->isChecked()){
        n = 1.0;
    } else {
        n = 2.0;
    }

    // Вычисление объема файла в Мегабайтах
    i = f * 1000 * nu * t * n * 60 / 8 / 1024 / 1024;
    // Если введено число, то выводим результат,
    // иначе сообщаем об ошибке
    if (ok) {
        string.setNum(i);
        ui->textEdit->setHtml("<div align=\"center\">I = "
                              + string +
                              " MiB</div>");
    } else {
        ui->textEdit->setHtml("<div align=\"center\">FALSE</div>");
    }
}

void Widget::on_pushButton_2_clicked()
{
    ui->textEdit->setHtml("<div align=\"center\"></div>");
    ui->lineEdit->setText("0");
}

void Widget::on_pushButton_3_clicked()
{
    ui->pushButton_3->window()->close();
}

Наше приложение в работе:

Рис. 6.
Задания
  • Создайте приложение калькулятор (используйте табличную компоновку)
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Print Friendly, PDF & Email

Comments are closed.