QLayout 是一个旨在管理整个窗口并将页面内容与导航栏或抽屉等元素包装在一起的组件。多个页面可以共享相同的 QLayout，因此代码可重用，这是其关键点之一。
QLayout 不是强制性的，但它确实有助于您更好地构建网站/应用程序。它具有一系列功能，可帮助您简化网站/应用程序的布局设计，开箱即用。
布局构建器
点击下面的按钮搭建您的布局。
提示
请留意您的开发者控制台，了解哪些组件正在使用但未在您的 quasar.config 文件中声明。
用法
使用边距 CSS 会破坏布局
QLayout 依赖于占据整个屏幕，因此 QPageContainer、QHeader、QFooter 和 QLayoutDrawer 的位置由它管理（通过 view 属性）。您 **不能** 在 QLayout 本身或上面提到的任何 QLayout 组件上使用CSS 边距作为样式。但是，您可以安全地使用CSS 内边距。
提示
如果您的布局使用 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 的所有部分。例如，即使不使用页脚或右侧抽屉，也需要在 QLayout 的
view属性中指定它们。 - 当 QDrawer 设置为覆盖模式时，**它会强制其进入固定位置**，无论 QLayout 的“view”属性是否配置为“l/r”或“L/R”。此外，**如果在 iOS 平台上且 QLayout 被容器化**，由于无法克服的平台限制，QDrawer 也会被强制设置为固定位置。
容器化的 QLayout
默认情况下，QLayout 管理整个窗口。但是，您也可以将 QLayout 用作容器（具有特定高度和宽度），将其隔离在页面中的某个位置。
警告
请注意，**它需要显式设置 CSS 高度（或最小高度）**，否则它无法工作。
在下面的示例中，有一个容器化的 QLayout，两侧都有抽屉（左侧抽屉的断点为 700px，右侧抽屉的断点为 500px）。断点不是指窗口宽度，而是指 QLayout 容器的实际宽度。