使用QML自绘页面导航条

使用QML自绘页面导航条

         最近使用QML制作项目，按照要求，需要制作成分页的插件。遗憾的是，QML的控件库Qt Quick都没有现成的控件，于是我尝试着自己实现自绘页面导航条。

原创文章，反对未声明的引用。原博客地址：http://blog.csdn.net/gamesdev/article/details/39376061

         我首先观察CSDN的页面导航条，其实和大多数Web的页面导航条一样，都有首页、具体页码、下一页、上一页、尾页这样的元素，实现起来也不是太难。其实这个需求也算是检验QML开发能力的一次考察。

         我稍微花了一点时间实现了这样的显示效果，如下图：

         可以选择相应的页数，以便进行分页显示。

         下载地址：这里

[javascript] view plaincopy

1. import QtQuick 2.2  
2. import QtQuick.Controls 1.1  
3.   
4. ApplicationWindow {  
5.     visible: true  
6.     width: 640  
7.     height: 480  
8.     title: qsTr( "Page navigation bar example" )  
9.   
10.     menuBar: MenuBar  
11.     {  
12.         Menu  
13.         {  
14.             title: qsTr( "File" )  
15.             MenuItem  
16.             {  
17.                 text: qsTr( "Exit" )  
18.                 onTriggered: Qt.quit( );  
19.             }  
20.         }  
21.     }  
22.   
23.     property var json:  
24.     [  
25.         [  
26.             { "id": 1, "value": "长青路" },  
27.             { "id": 2, "value": "建设路" },  
28.             { "id": 3, "value": "光明路" },  
29.             { "id": 4, "value": "矿工路" },  
30.             { "id": 5, "value": "开源路" }  
31.         ],  
32.         [  
33.             { "id": 6, "value": "唐宫中路" },  
34.             { "id": 7, "value": "金业路" },  
35.             { "id": 8, "value": "九都东路" },  
36.             { "id": 9, "value": "古仓街" },  
37.             { "id": 10, "value": "道南路" }  
38.         ],  
39.         [  
40.             { "id": 11, "value": "张辽南路" },  
41.             { "id": 12, "value": "古北街" },  
42.             { "id": 13, "value": "开发南路" },  
43.             { "id": 14, "value": "朔神路" },  
44.             { "id": 15, "value": "同太路" }  
45.         ],  
46.         [  
47.             { "id": 1, "value": "长青路" },  
48.             { "id": 2, "value": "建设路" },  
49.             { "id": 3, "value": "光明路" },  
50.             { "id": 4, "value": "矿工路" },  
51.             { "id": 5, "value": "开源路" }  
52.         ],  
53.         [  
54.             { "id": 6, "value": "唐宫中路" },  
55.             { "id": 7, "value": "金业路" },  
56.             { "id": 8, "value": "九都东路" },  
57.             { "id": 9, "value": "古仓街" },  
58.             { "id": 10, "value": "道南路" }  
59.         ],  
60.         [  
61.             { "id": 11, "value": "张辽南路" },  
62.             { "id": 12, "value": "古北街" },  
63.             { "id": 13, "value": "开发南路" },  
64.             { "id": 14, "value": "朔神路" },  
65.             { "id": 15, "value": "同太路" }  
66.         ]  
67.     ]  
68.   
69.     ListModel  
70.     {  
71.         id: tableModel  
72.   
73.         Component.onCompleted: append( json[0] )  
74.     }  
75.   
76.     property int initialColumnWidth: tableView.width / 3  
77.     property int recordPerPage: 15  
78.     TableView  
79.     {  
80.         id: tableView  
81.         anchors.top: parent.top  
82.         anchors.left: parent.left  
83.         anchors.right: parent.right  
84.         anchors.bottom: pageNavigationBar.top  
85.         anchors.bottomMargin: 5  
86.         model: tableModel  
87.   
88.         TableViewColumn  
89.         {  
90.             role: "id"  
91.             title: qsTr( "id" )  
92.             width: initialColumnWidth  
93.         }  
94.   
95.         TableViewColumn  
96.         {  
97.             role: "value"  
98.             title: qsTr( "value" )  
99.             width: initialColumnWidth  
100.         }  
101.     }  
102.   
103.     PageNavigationBar  
104.     {  
105.         id: pageNavigationBar  
106.         anchors.bottom: parent.bottom  
107.         anchors.left: parent.left  
108.         anchors.right: parent.right  
109.         anchors.margins: 5  
110.         maxPage: json.length  
111.         totalRecord: json.length * json[0].length  
112.   
113.         onPageClicked:  
114.         {  
115.             tableModel.clear( );  
116.             tableModel.append( json[page - 1] );  
117.         }  
118.     }  
119. }