我們將討論在 QLayout 中封裝頁面。如果您還沒有讀過，請先閱讀 QLayout 文件頁面。
佈局建構器
點擊下方按鈕來建立您的佈局。
佈局建構器launch用法
QPage 必須由 QPageContainer 封裝，而 QPageContainer 必須是 QLayout 的子元素。
<q-layout>
...
<q-page-container>
<q-page>
<!-- page content -->
</q-page>
</q-page-container>
...
</q-layout>content_paste
通常，QPageContainer 是佈局模板的一部分 (其中包含一個 <router-view /> 子元素)，其內容會放到 /src/pages 下的個別 vue 檔案中。如果您還沒有讀過，請先閱讀搭配佈局和頁面的路由。
<!-- 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>content_paste
範例
提示
由於 QPageContainer 和 QPage 需要佈局，而 QLayout 預設管理整個視窗，因此為了示範目的，我們將使用容器化的 QLayout。但請記住，您絕不一定要對 QPageContainer 和 QPage 使用容器化的 QLayout。
Style-fn
QPage 需要 QLayout，因為 QLayout 控制頁面的所有偏移量，並根據其 view 屬性配置來計算頁首/頁尾/抽屜使用的空間。預設情況下，您的 QPage 元件將設定 min-height CSS 屬性，以確保內容始終填滿螢幕，即使內容只有幾行。
如果您希望調整甚至移除此屬性，可以使用 style-fn 屬性
<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>content_paste