Реклама

QML - Урок 014. GridLayout QML - Позиционирование элементов

РуководствоQMLGridLayout, Qt, QML, ячейка, cell, row, column1403

Небольшая заметка, родившаяся из вопроса одного из постоянных читателей сайта. При разработке интерфейса приложения под QML для позиционирования объектов в GridLayout необходимо использовать функционал вложенных свойств Layout. Таких как:

  • Layout.row - указывает строку, в которой располагается объект;
  • Layout.column - указывает колонку, в которой располагается объект;
  • Layout.rowSpan - указывает, на сколько строк должен быть растянут объект;
  • Layout.columnSpan - указывает, на сколько колонок должен быть растянут объект;
  • Layout.minimumWidth - минимальная ширина объекта в слое;
  • Layout.minimumHeight - минимальная высота объекта в слое;
  • Layout.preferredWidth - предпочтительная ширина объекта в слое;
  • Layout.preferredHeight - предпочтительная высота объекта в слое;
  • Layout.maximumWidth - максимальная ширина объекта в слое;
  • Layout.maximumHeight - максимальная высота объекта в слое;
  • Layout.fillWidth - заполнение по ширине;
  • Layout.fillHeight - заполнение по высоте;
  • Layout.alignment - выравнивание в слое;

Свойства GridLayout

Также для полноты картины укажу свойства GridLayout и за что они отвечают:

  • columnSpacing : real - пробелы между колонками (разрыв между объектами);
  • columns : int - количество колонок;
  • flow : enumeration - направление расположения объектов в GridLayout
    • GridLayout.LeftToRight (default) - слева направо
    • GridLayout.TopToBottom - сверху вниз
  • layoutDirection : enumeration - направление перечисления объектов при заданном flow
    • Qt.LeftToRight (default) - слева направо
    • Qt.RightToLeft - справа налево
  • rowSpacing : real - пробелы между строками (разрыв между объектами);
  • rows : int - количество строк;

Если задаём:

  • flow: GridLayout.TopToBottom
  • layoutDirection: Qt.RightToLeft

То в результате получим, что первый элемент строки будет в самом вверху, а последний элемент строки будет в самом низу. В случае наличия двух строк, элементы первой строки будут располагаться справа.

Работа с GridLayout

Для демонстрации позиционирования элементов в слое предлагаю следующий программный код. В котором несколько прямоугольников будут растягиваться на несколько ячеек GridLayout.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 480
    height: 480
    title: qsTr("Hello World")

   GridLayout {
       id: grid
       anchors.fill: parent

       rows: 3
       columns: 3

       Rectangle {
            color: "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 1
            Layout.column: 2
       }

       Rectangle {
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 1
            Layout.column: 1
       }

       Rectangle {
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 2
            Layout.column: 3
       }

       Rectangle {
            color: "white"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
            Layout.row: 2
            Layout.column: 2
       }

       Rectangle {
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 3
            Layout.column: 1
       }
   }
}

Итог

Результат работы данного программного кода показан на рисунке. Также выше перечисленная логика расположения объектов применима и к другим объектам Layout.

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
Последние комментарии
  • EVILEG
  • 23 мая 2017 г. 12:26

Qt/C++ - Урок 005. QSqlRelationalTableModel - Работаем со связными таблицами

В классе DataBase указывается путь к базе данных. В данном случае C:/example/ и т.д. Так вот, у вас есть каталог example ?

  • EVILEG
  • 23 мая 2017 г. 12:19

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

Нет. не верно. Ошибка вот в этой строке: QPixmap inixmap = fileName; // Сохраняем его в изображение объекта QPixmap; Выше я показывал, как что нужно путь передавать в качестве аргумент...

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "/home", tr("Images (*.png *.xpm *.jpg)")); QPixmap inixmap = fileName; // Сохраняем его в и...

Qt/C++ - Урок 005. QSqlRelationalTableModel - Работаем со связными таблицами

https://www.dropbox.com/sh/vhxcx0iyq0j4578/AACwgWPnZwNqGBndKESiXfFqa?dl=0

  • tetta
  • 22 мая 2017 г. 1:32

Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP

Как сделать так, что бы только когда верхнюю полосу зажимаешь, то перетаскивалось окно и что бы оно оставалось на месте?

Сейчас обсуждают на форуме
  • tetta
  • 23 мая 2017 г. 17:59

Создание кнопки "new", "save" и "open". MDI. toolBar

void MainWindow::open(){ QString openFile = QFileDialog::getOpenFileName(this, tr("Open File"), "C:/", ...

Проверка наличия записи в БД при выполнении запроса

Код форм про которые говорил прикрепил. regrdit форма в которой отображается информация отбираемая из базы. editobject форма для редактирования

  • Arrow
  • 23 мая 2017 г. 13:41

qmake

Странно по сообщениям выдает, что у меня компилирутся 32 bit версия (x86 build). Компилятор опознан правильно и в ABI сам определилил x86-windows-msys-pre-64bit и исполняемый файл создае...

WinApi CBTProc

Да всех активных, тоесть через CBT.