Evgenii Legotckoi
Evgenii Legotckoi6 ноября 2015 г. 7:17

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

Небольшая заметка, родившаяся из вопроса одного из постоянных читателей сайта. При разработке интерфейса приложения под 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.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
ДА

C++ - Тест 003. Условия и циклы

  • Результат:21баллов,
  • Очки рейтинга-10
АФ

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:30баллов,
  • Очки рейтинга-10
ПЩ

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии
k
kmssr9 февраля 2024 г. 5:43
Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Анатолий Кононенко5 февраля 2024 г. 12:50
Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVA25 декабря 2023 г. 21:30
Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJo25 декабря 2023 г. 19:38
Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
Gvozdik19 декабря 2023 г. 8:01
Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Сейчас обсуждают на форуме
P
Pisych27 февраля 2023 г. 15:04
Как получить в массив значения из связанной модели? Спасибо, разобрался:))
AC
Alexandru Codreanu19 января 2024 г. 22:57
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCT27 декабря 2023 г. 19:57
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
Дмитрий10 января 2024 г. 15:18
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii Legotckoi12 декабря 2023 г. 17:48
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Следите за нами в социальных сетях