我们将讨论如何在 QLayout 中封装页面。如果你还没有阅读，请先阅读 QLayout 文档页面。
¥We will be talking about encapsulating pages within a QLayout. If you haven’t already, please read QLayout documentation page first.
布局构建器(Layout Builder)
¥Layout Builder
点击下方按钮搭建你的布局框架。
¥Scaffold your layout(s) by clicking on the button below.
Layout Builderlaunch用法(Usage)
¥Usage
QPage 必须由 QPageContainer 封装，而 QPageContainer 又必须是 QLayout 的子级。
¥A QPage must be encapsulated by QPageContainer, which in turn must be a child of QLayout.
<q-layout>
...
<q-page-container>
<q-page>
<!-- page content -->
</q-page>
</q-page-container>
...
</q-layout>通常，QPageContainer 是布局模板的一部分（其中它只包含一个 <router-view /> 子项），其内容位于 /src/pages 下的单独 vue 文件中。如果你还没有阅读 使用布局和页面进行路由，请阅读。
¥Usually, the QPageContainer is part of the Layout template (where it contains a <router-view /> child only), and its content goes into separate vue files under /src/pages. If you haven’t already, please read Routing with Layouts and Pages.
<!-- vue file for Layout: -->
<q-layout>
...
<q-page-container>
<router-view />
</q-page-container>
...
</q-layout>
<!-- vue file for a Page: -->
<q-page padding>
<!-- page content -->
</q-page>示例(Example)
¥Example
提示
由于 QPageContainer 和 QPage 需要布局，而 QLayout 默认管理整个窗口，因此出于演示目的，我们将使用容器化的 QLayout。但请记住，你绝对不需要为 QPageContainer 和 QPage 使用容器化的 QLayout。
¥Since QPageContainer and QPage need a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QPageContainer and QPage.
Style-fn(Style-fn)
QPage 需要 QLayout，因为 QLayout 控制页面的所有偏移量，并根据其 view 属性配置考虑页眉/页脚/抽屉使用的空间。默认情况下，你的 QPage 组件将设置一个 min-height CSS 属性，以确保内容始终填满屏幕，即使内容只有几行。
¥A QPage needs a QLayout because QLayout controls all the offsets of a page, keeping account of the space that header/footer/drawer use, according to its view property configuration. By default, your QPage component will have a min-height CSS property set on it to ensure that the content fills the screen at all times, even when the content is just a few lines.
如果你希望调整甚至删除此属性，你可以使用 style-fn 属性来实现：
¥If you wish to tweak, or even remove this property, you can do so by using the style-fn property:
<template>
<q-page :style-fn="myTweak">...</q-page>
</template>
<script>
export default {
// ...
methods: {
myTweak (offset) {
// "offset" is a Number (pixels) that refers to the total
// height of header + footer that occupies on screen,
// based on the QLayout "view" prop configuration
// this is actually what the default style-fn does in Quasar
return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
}
}
}
</script>