QML页眉与页脚（Header and Footer）

目录

一 QML介绍

二 QML的使用场合

三 实例演示

---

一 QML介绍

QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：

1. 移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
2. 桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
3. Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三 实例演示

这一节是链表视图最后的内容，我们能够向链表视图中插入一个页眉（header）元素和一个页脚（footer）元素。这部分是链表的开始或者结尾处被作为代理元素特殊的区域。对于一个水平链表视图，不会存在页眉或者页脚，但是也有开始和结尾处，这取决于layoutDirection的设置。

下面这个例子展示了如何使用一个页眉和页脚来突出链表的开始与结尾。这些特殊的链表元素也有其它的作用，例如，它们能够保持链表中的按键加载更多的内容。

1.import QtQuick 2.0
2.
3.Rectangle {
4.    width: 80
5.    height: 300
6.
7.    color: "white"
8.
9.    ListView {
10.        anchors.fill: parent
11.        anchors.margins: 20
12.
13.        clip: true
14.
15.        model: 4
16.
17.        delegate: numberDelegate
18.        spacing: 5
19.
20.        header: headerComponent
21.        footer: footerComponent
22.    }
23.
24.    Component {
25.        id: headerComponent
26.
27.        Rectangle {
28.            width: 40
29.            height: 20
30.
31.            color: "yellow"
32.        }
33.    }
34.
35.    Component {
36.        id: footerComponent
37.
38.        Rectangle {
39.            width: 40
40.            height: 20
41.
42.            color: "red"
43.        }
44.    }
45.
46.    Component {
47.        id: numberDelegate
48.
49.        Rectangle {
50.            width: 40
51.            height: 40
52.
53.            color: "lightGreen"
54.
55.            Text {
56.                anchors.centerIn: parent
57.
58.                font.pixelSize: 10
59.
60.                text: index
61.            }
62.        }
63.    }
64.}

注意

页眉与页脚代理元素不遵循链表视图（ListView）的间隔（spacing）属性，它们被直接放在相邻的链表元素之上或之下。这意味着页眉与页脚的间隔必须通过页眉与页脚元素自己设置。