发帖 回复
返回列表
  • 11027阅读
  • 8回复

QML实现分页显示 [复制链接]

 上一主题 下一主题
离线ycj211
新手上路
 
图酷模式  只看楼主 倒序阅读 楼主  发表于: 2016-05-19
— 本帖被 XChinux 执行加亮操作(2016-05-20) —

复制代码
  1. PageView.qml
  2. 代码：
  3. import QtQuick 2.0
  4. import QtQuick.Controls.Styles 1.2
  5. import QtQuick.Controls 1.2
  6. Rectangle{
  7.     id:root
  8.     color:"#DD202020"
  9.     width: 400
  10.     height: 450
  11.     //数据模型
  12.     property var json:
  13.         [
  14.         [
  15.             { "title": 1, "imagePath": "author.png","des":"这是描述" },
  16.             { "title": 2, "imagePath": "author.png" ,"des":"这是描述"},
  17.             { "title": 3, "imagePath": "author.png" ,"des":"这是描述"},
  18.             { "title": 4, "imagePath": "author.png","des":"这是描述" },
  19.             { "title": 5, "imagePath": "author.png","des":"这是描述" }
  20.         ],
  21.         [
  22.             { "title": 6, "imagePath": "author.png" ,"des":"这是描述"},
  23.             { "title": 7, "imagePath": "author.png" ,"des":"这是描述"},
  24.             { "title": 8, "imagePath": "author.png" ,"des":"这是描述"},
  25.             { "title": 9, "imagePath": "author.png" ,"des":"这是描述"},
  26.             { "title": 10, "imagePath": "author.png","des":"这是描述" }
  27.         ],
  28.         [
  29.             { "title": 11, "imagePath": "author.png" ,"des":"这是描述"},
  30.             { "title": 12, "imagePath": "author.png" ,"des":"这是描述"},
  31.             { "title": 13, "imagePath": "author.png" ,"des":"这是描述"},
  32.             { "title": 14, "imagePath": "author.png" ,"des":"这是描述"},
  33.             { "title": 15, "imagePath": "author.png" ,"des":"这是描述"}
  34.         ],
  35.         [
  36.             { "title": 16, "imagePath": "author.png" ,"des":"这是描述"},
  37.             { "title": 17, "imagePath": "author.png" ,"des":"这是描述"},
  38.             { "title": 18, "imagePath": "author.png" ,"des":"这是描述"},
  39.             { "title": 19, "imagePath": "author.png" ,"des":"这是描述"},
  40.             { "title": 20, "imagePath": "author.png" ,"des":"这是描述"}
  41.         ],
  42.         [
  43.             { "title": 21, "imagePath": "author.png" ,"des":"这是描述"},
  44.             { "title": 22, "imagePath": "author.png" ,"des":"这是描述"},
  45.             { "title": 23, "imagePath": "author.png" ,"des":"这是描述"},
  46.             { "title": 24, "imagePath": "author.png" ,"des":"这是描述"},
  47.             { "title": 25, "imagePath": "author.png" ,"des":"这是描述"}
  48.         ],
  49.         [
  50.             { "title": 26, "imagePath": "author.png" ,"des":"这是描述"},
  51.             { "title": 27, "imagePath": "author.png" ,"des":"这是描述"},
  52.             { "title": 28, "imagePath": "author.png" ,"des":"这是描述"},
  53.             { "title": 29, "imagePath": "author.png" ,"des":"这是描述"},
  54.             { "title": 30, "imagePath": "author.png" ,"des":"这是描述"}
  55.         ]
  56.     ]
  57.     Column{
  58.         spacing: 10
  59.         ListModel{
  60.             id:pmodel
  61.             Component.onCompleted: append(json[0])
  62.         }
  63.         ListView{
  64.             id:listview
  65.             width: root.width-4
  66.             height: root.height-30
  67.             clip:true
  68.             model:pmodel
  69.             highlight:Rectangle{
  70.                 y:listview.currentItem.y
  71.                 color:"#604BBDE8"
  72.                 Behavior on y{
  73.                     SpringAnimation{duration: 300;damping: 0.2}
  74.                 }
  75.             }
  76.             highlightFollowsCurrentItem:true
  77.             highlightMoveDuration:0
  78.             spacing:5
  79.             delegate: Rectangle{
  80.                 width:parent.width
  81.                 height: 60
  82.                 color:"transparent"
  83.                 border.width: 1
  84.                 border.color: "white"
  85.                 MouseArea{
  86.                     anchors.fill: parent
  87.                     onClicked:listview.currentIndex=index
  88.                 }
  89.                 Row{
  90.                     spacing: 5
  91.                     width:parent.width
  92.                     height: parent.height
  93.                     Image{
  94.                         width: 40
  95.                         height: width
  96.                         source: imagePath
  97.                         anchors.verticalCenter: parent.verticalCenter
  98.                     }
  99.                     Column{
  100.                         spacing: 5
  101.                         anchors.verticalCenter: parent.verticalCenter
  102.                         Text{
  103.                             text: "<font color='green' fontSize=14><B>标题：</B></font>"+title
  104.                             color:"gray"
  105.                         }
  106.                         Text{
  107.                             text: des
  108.                             color:"white"
  109.                             elide: Text.ElideMiddle
  110.                             width: listview.width-40
  111.                         }
  112.                     }
  113.                 }
  114.             }
  115.             //列表选择显示
  116.             ListViewIndicator{
  117.                 target : listview
  118.                 anchors.horizontalCenter: parent.horizontalCenter
  119.                 anchors.bottom: parent.bottom
  120.                 anchors.bottomMargin: 5
  121.                 z: 2
  122.             }
  123.         }
  124.     }
  125.     //分页导航
  126.     PageNavigationBar
  127.     {
  128.         id: pageNavigationBar
  129.         anchors.bottom: parent.bottom
  130.         anchors.left: parent.left
  131.         anchors.right: parent.right
  132.         anchors.margins: 5
  133.         maxPage: json.length
  134.         totalRecord: json.length * json[0].length
  135.         onPageClicked:
  136.         {
  137.             pmodel.clear( );
  138.             pmodel.append( json[page - 1] );
  139.         }
  140.     }
  141. }
  142. 列表导航：
  143. ListViewIndicator.qml
  144. import QtQuick 2.0
  145. /**
  146. ListView 当前项指示器
  147. */
  148. Row {
  149.     // 绑定的ListView组件
  150.     property ListView target;
  151.     spacing: 20
  152.     Repeater {
  153.         opacity: 0.8
  154.         model: target.model.count
  155.         Rectangle {
  156.             width: 5; height: 5
  157.             radius: 3
  158.             color: target.currentIndex == index ? "grey" : "white"
  159.             MouseArea {
  160.                 width: 20; height: 20
  161.                 anchors.centerIn: parent
  162.                 onClicked: target.currentIndex = index
  163.             }
  164.         }
  165.     }
  166. }
  167. 分页显示控制：
  168. PageNavigationBar.qml
  169. import QtQuick 2.2
  170. import QtQuick.Controls 1.2
  171. Item
  172. {
  173.     id: root
  174.     property int startPage: 1
  175.     property int maxPage: 20
  176.     property int selectedPage: 1
  177.     property int totalRecord: 90
  178.     signal pageClicked( int page )
  179.     height: row.height
  180.     Row
  181.     {
  182.         id: row
  183.         anchors.horizontalCenter: parent.horizontalCenter
  184.         spacing: 5
  185.         Label{
  186.             text:"总记录: "+totalRecord +"条";color:"white"
  187.         }
  188.         Label{
  189.             text:"上一页";color:"white"
  190.             font.underline: true
  191.             MouseArea{
  192.                 anchors.fill: parent
  193.                 hoverEnabled: true
  194.                 onEntered: {parent.color="blue";parent.x=parent.x+1;parent.y=parent.y+1}
  195.                 onExited: {parent.color="white";parent.x=parent.x-1;parent.y=parent.y-1}
  196.                 onClicked: {
  197.                     if(startPage-1<1)
  198.                         startPage=1
  199.                     else
  200.                         startPage=startPage-1
  201.                     pageClicked(startPage)
  202.                 }
  203.             }
  204.         }
  205.         Label{
  206.             text:"下一页";
  207.             color:"white"
  208.             font.underline: true
  209.             MouseArea{
  210.                 anchors.fill: parent
  211.                 hoverEnabled: true
  212.                 onEntered: {parent.color="blue";parent.x=parent.x+1;parent.y=parent.y+1}
  213.                 onExited: {parent.color="white";parent.x=parent.x-1;parent.y=parent.y-1}
  214.                 onClicked: {
  215.                     if(startPage+1>maxPage)
  216.                         startPage=maxPage
  217.                     else
  218.                         startPage=startPage+1
  219.                     pageClicked(startPage)
  220.                 }
  221.             }
  222.         }
  223.         Label{
  224.             text:"当前页: "+"<font color='green' pointsize=14><b>"+startPage+"</b></font>";
  225.             color:"white"
  226.         }
  227.         Label{
  228.             text:"总页数: "+maxPage;color:"white"
  229.         }
  230.     }
  231. }
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线ycj211
新手上路
只看该作者 1楼 发表于: 2016-05-19
回复
举报
离线nigoole
圣骑士
只看该作者 2楼 发表于: 2016-05-19
有句话说得好：好好学习，天天向上。加油~~！有上船的朋友联系企鹅393320854
回复
举报
离线learn0801
新手上路
只看该作者 3楼 发表于: 2016-05-20
不错不错
回复
举报
离线lsyzsl
侠客
只看该作者 4楼 发表于: 2016-06-14
给了源代码还是创建不出来这样的。
回复
举报
离线ycj211
新手上路
只看该作者 5楼 发表于: 2016-06-26
回 lsyzsl 的帖子
lsyzsl:给了源代码还是创建不出来这样的。 (2016-06-14 14:11) 

已发送你邮箱！
回复
举报
离线313385853
新手上路
只看该作者 6楼 发表于: 2016-08-25
可以给我发一份吗？？我邮箱  313385853@qq.com
回复
举报
离线topher
新手上路
只看该作者 7楼 发表于: 2016-09-08
大神，可否发我一份？ 感激不尽
回复
举报
离线topher
新手上路
只看该作者 8楼 发表于: 2016-09-08
回 topher 的帖子
topher:大神，可否发我一份？ 感激不尽[表情]  (2016-09-08 17:33) 

371738191@qq.com
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个