QLayout 组件旨在管理整个窗口，并使用导航栏或抽屉等元素封装页面内容。多个页面可以共享同一个 QLayout，因此代码可重用，这是其要点。
¥The QLayout is a component designed to manage the entire window and wrap page content with elements such as a navigational bar or a drawer. Multiple pages can share the same QLayout, so the code is reusable, which is one of their key points.
QLayout 并非必需，但它确实可以帮助你更好地构建网站/应用。它具有许多开箱即用的功能，可为你简化网站/应用的布局设计带来巨大好处。
¥QLayout is NOT mandatory, but it does help you to better structure your website/app. It has a number of features which offer you major benefits in simplifying your website/app’s layout design, right out of the box.
布局构建器(Layout Builder)
¥Layout Builder
点击下方按钮搭建你的布局框架。
¥Scaffold your layout(s) by clicking on the button below.
提示
请密切关注你的开发者控制台，获取一些实用的帮助信息，了解哪些组件正在使用但未在 quasar.config 文件中声明。
¥Keep an eye on your developer console for handy helpers on which components are being used but not declared in your quasar.config file.
用法(Usage)
¥Usage
使用 CSS 边距会破坏布局
QLayout 依赖于占据整个屏幕，因此 QPageContainer、QHeader、QFooter 和 QLayoutDrawer 的位置由它管理（通过 view 属性）。你不能在 QLayout 本身或上述任何 QLayout 组件上使用 CSS 边距作为样式。但是，你可以安全地使用 CSS 填充。
¥QLayout depends on taking up the whole screen and so QPageContainer, QHeader, QFooter and QLayoutDrawer positions are managed by it (through the view prop). You cannot use CSS margins as a style neither on QLayout itself nor on any of the QLayout components mentioned above. However you can safely use CSS padding.
提示
如果你的布局使用 Vue Router 子路由（推荐），那么使用 Vue 的 <router-view /> 组件是合理的，它只是一个用于注入子路由的占位符。有关更多信息，请阅读 使用布局和页面进行路由。
¥If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue’s <router-view /> component, which is just a placeholder where sub-routes are injected. For more information, please read Routing with Layouts and Pages.
了解 “view” 属性(Understanding the “view” prop)
¥Understanding the “view” prop
Quasar 引入了一种独特而优秀的布局概念，只需更改一个简短的字符串符号，你就可以轻松地构建布局以使其以特定方式工作。
¥Quasar introduces a unique and excellent layout concept, which allows you to easily structure layouts to work in certain ways, by simply changing a short string notation.
为了解释其工作原理，假设你的布局是一个 3x3 的容器矩阵（如下图蓝色所示）。容器的第一行将是页眉，最后一行将是页脚。容器的第一列将是 “left”，最后一列将是 “right”。矩阵的中心，位于页眉下方和页脚上方，将是页面或主要内容容器。
¥To explain how this works, imagine your Layout is a 3x3 matrix of containers (depicted in blue below). The first row of containers would be the header and the last row would be the footer. The first column of containers would be the “left” and last column would be the “right”. The center of the matrix, below the header and above the footer, would be the page or main content container.
这个容器矩阵或 “QLayout 视图” 可以用一个字符串表示，你应该将该字符串提供给 QLayout 的 view 属性。此字符串必须包含 11 个字符：
¥This matrix of containers or “QLayout View” can be represented by a string that you should supply to the view property of QLayout. This string must contain exactly 11 characters:
3 定义标题行
¥3 defining the header row
然后是一个空格
¥then a space
3 定义中间行
¥3 defining the middle row
一个空格
¥a space
然后 3 定义页脚行
¥then 3 defining the footer row
上面显示的字母也区分大小写。例如，使用至少一个 “L”（大写字母，而非小写字母）将使布局左侧（抽屉式布局）处于固定位置。“H”（页眉）、“F”（页脚）以及 “R”（右侧/抽屉）也同样适用。
¥The letters shown above are also case sensitive. For example, using at least one “L” (uppercase character instead of lowercase) will make your layout left side (drawer) be in a fixed position. Same applies for “H” (header), “F” (footer) and finally “R” (right side / drawer).
例如，如果你希望布局的右侧/抽屉位于页眉、页面和页脚的右侧，则可以使用 hhr lpr ffr。如果你还想修复此问题，只需将一个 r 字符转换为大写即可，如下所示：hhr lpR ffr、hhR lpr ffr 或 hhr lpr ffR。
¥For example, if you want your layout’s right side / drawer to be placed on the right of the header, page and footer, you’d use hhr lpr ffr. If you’d like to also make it fixed, just transform one r character to uppercase, like this: hhr lpR ffr, or hhR lpr ffr or hhr lpr ffR.
这些设置完全由你自行决定如何使用。你甚至可以像这样进行更大胆的设置：lhh LpR ffr。试试看！
¥These settings are completely up to you to use as you’d like. You could even go wild with a setup like this: lhh LpR ffr. Try it out!
警告
即使你不使用 QLayout 的所有部分，也务必指定它们。例如，即使你不使用页脚或右侧抽屉，仍然需要在 QLayout 的
view属性中指定它们。¥It is important that you specify all sections of a QLayout, even if you don’t use them. For example, even if you don’t use footer or right side drawer, still specify them within your QLayout’s
viewprop.当 QDrawer 设置为叠加模式时，无论 QLayout 的 “view” 属性配置为 “l/r” 还是 “L/R”，它都会强制其进入固定位置。此外，如果在 iOS 平台上，并且 QLayout 已容器化，由于无法克服的平台限制，QDrawer 也将被强制使用固定位置。
¥When QDrawer is set into overlay mode, it will force it to go into fixed position, regardless if QLayout’s “view” prop is configured with “l/r” or “L/R”. Also, if on iOS platform and QLayout is containerized, the fixed position will also be forced upon QDrawer due to platform limitations that cannot be overcome.
容器化 QLayout(Containerized QLayout)
¥Containerized QLayout
默认情况下，QLayout 管理整个窗口。但是，你也可以使用 QLayout 作为容器（具有特定的高度和宽度），将其隔离在页面中的某个位置。
¥By default, QLayout is managing the entire window. However, you can also use QLayout as a container (with specific height and width) to isolate it somewhere in your pages.
警告
请注意，它需要明确设置 CSS 高度（或最小高度），否则无法实现。它不起作用。
¥Please note that it requires a CSS height (or min-height) being set explicitly, otherwise it can’t and it won’t work.
在以下示例中，有一个容器化的 QLayout，两侧都有抽屉（左侧抽屉的断点为 700px，右侧抽屉的断点为 500px）。断点并非指窗口宽度，而是 QLayout 容器的实际宽度。
¥In the example below, there is a containerized QLayout with drawers on each side (breakpoint of 700px on the left-side drawer and 500px on the right-side drawer). The breakpoint does not refer to the window width, but to the actual width of the QLayout container.