Skip to page content

页头和页脚

QLayout 允许您将视图配置为一个 3x3 矩阵,其中可以包含可选的页头和/或页脚(通常用作导航栏,但也可以放置任何内容)。如果您还没有了解过,请先阅读 QLayout 文档。

布局生成器

点击下方按钮来搭建您的布局。

Layout Builder

用法

TIP

由于页头和页脚需要依赖布局组件,而 QLayout 默认管理整个窗口,因此这里的示例使用了容器化的 QLayout 来演示。但请注意,您在实际项目中并不一定需要使用容器化的 QLayout 来搭配 QHeader 或 QFooter。

Basic



您可以在页头和页脚的工具栏上使用 glossy 类来添加光泽效果。

Glossy



各种内容

Reveal 属性

在下面的示例中,滚动页面以查看 QHeader 和 QFooter 的行为。

Reveal



iOS 风格

在下面的示例中,您可以为 QTabs 使用带有 ion-ios- 前缀的 Ionicons 图标(v4),可以完美匹配 iOS 的外观风格。

桌面应用风格

如果您正在构建 Electron 应用并隐藏了默认的应用边框,下面的示例会特别有用。

Accessibility
v2.25+

QHeader and QFooter render real <header> and <footer> elements, so they are exposed to assistive technology as the banner and footer landmarks of your QLayout with no extra work. A header or footer hidden through its v-model also leaves the Tab order and the accessibility tree entirely, so nothing invisible stays reachable.

One hidden by the reveal behavior is only translated off-screen instead; should keyboard focus land inside it (e.g. by tabbing), it reveals itself again, so focus never sits in an invisible bar.