Реклама

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

GridLayout, Qt, QML, ячейка, cell, row, column

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

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
  • Vadym
  • 26 сентября 2017 г. 18:10

C++ - Тест 005. Структуры и Классы

  • Результат - 83 баллов
  • Vadym
  • 26 сентября 2017 г. 18:05

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

  • Результат - 80 баллов
  • Vadym
  • 26 сентября 2017 г. 4:44

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

  • Результат - 78 баллов
Последние комментарии
  • EVILEG
  • 22 сентября 2017 г. 12:45

Qt/C++ - Урок 055. QSignalMapper VS лямбда функции

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

  • Damir
  • 22 сентября 2017 г. 2:35

Qt/C++ - Урок 055. QSignalMapper VS лямбда функции

Может и кривовато но чёрт побери работает и класс от ненужной больше ни где фигни не разбухает.

  • Damir
  • 22 сентября 2017 г. 2:29

Qt/C++ - Урок 055. QSignalMapper VS лямбда функции

Как вам такое enum { PROFILE_TOOLPATH_FORM, POCKET_TOOLPATH_FORM, DRILLING_TOOLPATH_FORM }; QToolBar* toolpathToolBar = addToolBar(tr("Toolpa...

  • Mr_lKl
  • 17 сентября 2017 г. 16:14

QML - Урок 031. Отключаем системное обрамление окна в QML и пишем код для обработки перемещения и ресайза окна

Спасибо! Этим и займусь. Ещё попробую скинуть проект другу, посмотрю, как QT будет справляться там.

  • EVILEG
  • 17 сентября 2017 г. 14:14

QML - Урок 031. Отключаем системное обрамление окна в QML и пишем код для обработки перемещения и ресайза окна

Тогда это однознано баг, я бы глянул на официальном багтрекере Qt, есть ли информация об этом баге, и возможно стоит создать таск с этим багом.

Сейчас обсуждают на форуме
  • EVILEG
  • 27 сентября 2017 г. 1:54

Сборка проекта в Qt под Android.

В общем я вас не обрадую, я сегодня сам поразбирался с этой проблемой. И ... (барабанная дробь) ... Qt Creator 4.4 с багом. Это не работает в принципе. Фикс будет в Qt Creator 4.5. ...

  • EVILEG
  • 26 сентября 2017 г. 18:03

Как дождаться выполнения функции

Именно, а самому писать скачивание файла - это вам не нужно. Поэтому нужно правильно написать обработку процесса скачивания. Для этого и потребуется делать либо буфер. Либо обновлять GUI когда...

  • EVILEG
  • 26 сентября 2017 г. 16:58

Virtual Keyboard

Больше похоже на какой-то баг с клавиатурой. Перекопал разные варианты, а результат такой же. Кроме Британской раскладки ничего не работает.

  • verside
  • 20 сентября 2017 г. 12:39

Qt и Visual Studio (32-битная версия)

Делал ровно так, и описано. Но что-то не подхватывает Qt. Есть идеи, что Visual Studio какие-то переменные в окружение не прописал, но какие, пока не удалось понять. Я про...

Проблема при компиляции WebKit для Qt 5.7.1

Здравствуйте! Еще есть некоторые пользователи которые остались на Win XP.