QLayout 是一个用于管理整个窗口并使用导航栏或侧抽屉菜单等元素包装页面内容的组件。多个页面可以共享同一个 QLayout，因此代码是可复用的，这也是它的核心优势之一。
QLayout 不是强制性的，但它确实可以帮助您更好地构建网站/应用程序。它有许多开箱即用的功能，可以极大地帮助您简化网站/应用的布局设计。
布局构建器
点击下方按钮来搭建您的布局。
请留意开发者控制台中的提示信息，它会告诉您哪些组件正在使用但未在 quasar.config 文件中声明。
用法
QLayout 需要占据整个屏幕，因此 QPageContainer、QHeader、QFooter 和 QLayoutDrawer 的位置都由它（通过 view 属性）统一管理。您不能在 QLayout 本身或上述任何 QLayout 子组件上使用 CSS margin。但可以安全地使用 CSS padding。
如果您的布局使用了 Vue Router 的子路由（推荐做法），那么应该使用 Vue 的 <router-view /> 组件，它只是一个用于注入子路由的占位符。更多信息请参阅布局与页面的路由配置。
理解 “view” 属性
Quasar 引入了一种独特而优秀的布局概念，只需修改一个简短的字符串，就能轻松配置布局的工作方式。
为了理解它的工作原理，想象您的布局是一个 3x3 的容器矩阵（下图中用蓝色表示）。第一行容器是页眉，最后一行是页脚。第一列容器是"左侧"，最后一列是"右侧"。矩阵的中心部分，位于页眉下方、页脚上方，就是页面或主内容容器。
这个容器矩阵（即 “QLayout View”）可以用一个字符串来表示，您需要将该字符串传给 QLayout 的 view 属性。该字符串必须恰好包含 11 个字符：
- 3 个字符定义页眉行
- 然后一个空格
- 3 个字符定义中间行
- 一个空格
- 然后 3 个字符定义页脚行
上面展示的字母是区分大小写的。例如，使用至少一个大写的 “L”（而非小写）会使布局的左侧（抽屉）变为固定定位。同样适用于 “H”（页眉）、“F”（页脚）以及 “R”（右侧/抽屉）。
例如，如果您想让布局的右侧/抽屉显示在页眉、页面和页脚的右边，可以使用 hhr lpr ffr。如果还想让它固定定位，只需将其中一个 r 改为大写即可，比如：hhr lpR ffr，或 hhR lpr ffr，或 hhr lpr ffR。
这些设置完全由您自由配置。您甚至可以尝试像 lhh LpR ffr 这样的"狂野"搭配。试试看吧！
- 即使您不使用某些部分，也必须在 QLayout 的
view属性中声明所有区域。例如，即便您不使用页脚或右侧抽屉，也需要在view属性中指定它们的位置。 - 当 QDrawer 设置为覆盖模式（overlay mode）时，它会被强制设为固定定位，无论 QLayout 的 “view” 属性中配置的是 “l/r” 还是 “L/R”。此外，如果在 iOS 平台上且 QLayout 是容器化的，由于平台限制无法克服，QDrawer 也会被强制使用固定定位。
容器化 QLayout
默认情况下，QLayout 管理的是整个窗口。但您也可以将 QLayout 用作容器（指定高度和宽度），将其隔离在页面的某个区域中。
请注意，容器化 QLayout 必须显式设置 CSS height（或 min-height），否则它无法正常工作。
下面的示例中，有一个容器化的 QLayout，左右两侧各有一个抽屉（左侧抽屉的断点为 700px，右侧抽屉的断点为 500px）。这里的断点不是指窗口宽度，而是 QLayout 容器本身的实际宽度。
Accessibility v2.25+
A QLayout with its usual children produces a correct landmark structure out of the box: QHeader renders a real <header> element, QFooter a <footer>, each QDrawer an <aside> and QPage the page’s <main>. Screen reader users can therefore jump between the banner, footer, complementary and main content regions without any extra work on your side. QLayout itself and QPageContainer are plain containers that claim no landmark of their own.
Two things remain your responsibility: do not add your own <main> element (QPage already is one, and a page must contain exactly one), and when you use more than one drawer, give each an aria-label so assistive technology can tell the complementary regions apart. Each child component’s Accessibility section (linked above) covers its specific behavior.