QLayout и его роли

QLayout является фундаментальным компонентом в архитектуре приложений на Quasar. Он служит контейнером для всех визуальных элементов интерфейса и обеспечивает корректное распределение пространства между шапкой (header), боковой панелью (drawer), контентом (page container) и футером (footer). Важной особенностью QLayout является его способность автоматически управлять адаптивностью и поведением дочерних компонентов при изменении размеров экрана.

QLayout строится вокруг концепции flex-контейнера, что позволяет легко управлять выравниванием и пропорциями элементов внутри. Основной шаблон компонента выглядит следующим образом:

Атрибут view и его роли

Атрибут view задаёт структуру размещения компонентов внутри QLayout. Он состоит из нескольких символов, которые описывают поведение шапки, боковой панели и футера:

  • h – шапка (header) закреплена сверху
  • H – шапка скрыта при прокрутке
  • l – левая панель (left drawer) поверх контента
  • L – левая панель закреплена слева
  • f – футер (footer) фиксирован
  • F – футер скрыт при прокрутке

Пример строки view="hHh lpR fFf":

  • hHh – шапка всегда сверху, с эффектом подъёма при скролле
  • lpR – левая панель отображается в разных режимах в зависимости от размера экрана (p – push, R – responsive)
  • fFf – футер закреплён снизу, скрывается при скролле

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

QHeader и его поведение

QHeader используется для создания верхней панели приложения. Ключевые свойства:

  • elevated – добавляет тень и визуально отделяет шапку от контента
  • height-hint – задаёт рекомендуемую высоту (например, 50 или 100)
  • reveal – позволяет скрывать шапку при прокрутке вниз и показывать при прокрутке вверх

  
    Название приложения

QHeader автоматически взаимодействует с QLayout, подстраивая размеры контента и боковой панели.

QDrawer: роли и режимы

QDrawer отвечает за боковое меню. Основные режимы:

  • overlay – панель накладывается поверх контента, скрывается при клике вне области
  • push – сдвигает контент при открытии панели
  • side – закреплённая панель, контент подстраивается под ширину

Свойства управления:

  • v-model – управляет состоянием открытия/закрытия
  • show-if-above – отображает панель на больших экранах по умолчанию
  • behavior – определяет способ взаимодействия с контентом (overlay, push, side)

  
    
      Пункт меню 1

QPageContainer и QPage

QPageContainer является контейнером для всех страниц приложения. Он обеспечивает корректное масштабирование контента, учитывая высоту шапки и футера. QPage – это отдельный блок страницы, который может содержать прокручиваемый контент.

  • Свойство padding позволяет добавлять внутренние отступы.
  • При использовании scroll контент внутри QPage автоматически становится прокручиваемым без изменения размеров QLayout.

  
    

      Основной контент с прокруткой

QFooter и его функциональность

QFooter фиксирует нижнюю часть интерфейса. Основные свойства:

  • elevated – добавляет тень
  • reveal – позволяет футеру скрываться при прокрутке
  • height-hint – рекомендуемая высота футера

  
    Футер приложения

QFooter совместим с режимами view в QLayout, что позволяет создать как фиксированный, так и плавающий футер.

Интеграция всех компонентов

Комбинация QHeader, QDrawer, QPageContainer и QFooter в рамках QLayout создаёт адаптивный каркас приложения, где:

  • Шапка и футер автоматически учитывают высоту контента
  • Боковая панель адаптируется под размер экрана
  • Основной контент остаётся прокручиваемым и масштабируемым

Использование QLayout в сложных интерфейсах позволяет избежать необходимости ручного управления стилями, обеспечивая консистентность и предсказуемость поведения компонентов на разных устройствах.

Оглавление