QLayout 允许你将视图配置为 3x3 矩阵,包含可选的 Header 和/或 Footer(主要用于导航栏,但可以是任何内容)。如果你还没有阅读,请先阅读 QLayout 文档页面。
¥QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer (mostly used for navbar, but can be anything). 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
提示
由于页眉和页脚需要布局,而 QLayout 默认管理整个窗口,因此出于演示目的,我们将使用容器化的 QLayout。但请记住,你绝对不需要为 QHeader 或 QFooter 使用容器化的 QLayout。
¥Since the header and footer needs 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 QHeader or QFooter.
你可以在页眉和页脚的工具栏上使用 glossy
类。
¥You can use glossy
class on toolbars in header and footer.
各种内容(Various content)
¥Various content
显示属性(Reveal property)
¥Reveal property
在以下示例中,滚动页面即可查看 QHeader 和 QFooter 的行为。
¥In the example below, scroll the page to see the QHeader and QFooter behavior.
iOS 外观和体验(iOS look and feel)
¥iOS look and feel
在下面的示例中,你可以将 Ionicons 图标(v4)与 ion-ios-
前缀结合使用于 QTabs,这将与 iOS 的外观和感觉完美匹配。
¥In the example below, you could use Ionicons icons (v4) with ion-ios-
prefix for QTabs, which would perfectly match the iOS look and feel.
桌面应用外观(Desktop app look and feel)
¥Desktop app look and feel
如果你构建的是 Electron 应用并且隐藏了默认应用框架,那么下面的示例尤其有用。
¥The example below is especially useful if you build an Electron app and you hide the default app frame.