发帖 回复
返回列表
  • 5276阅读
  • 0回复

qml listview实现简单树模型，listview的滑动条出现问题 [复制链接]

 上一主题 下一主题
离线598316507
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2015-07-29
复制代码
  1. //代码如下
  2. import QtQuick 1.1
  5. Rectangle {
  6.     width: 800
  7.     height: 480
  8.     color: "black"
  9.     property int _totalHeight: 0
  10.     property int _currentIndex: -1
  11.     property int _storeY
  13.     Rectangle {
  14.         width: 220
  15.         height: 300
  16.         anchors.centerIn: parent
  17.         color: "blue"
  18.         clip: true
  21.         Item {
  22.             id: item
  23.             width: 200
  24.             height: 300
  26.             ListView {
  27.                 id: listview
  28.                 anchors.fill: parent
  29.                 model: nestedModel
  30.                 delegate: categoryDelegate
  31.                 clip: true
  33.                 onContentHeightChanged: {
  34.                     _totalHeight = getViewHeight();
  35.                 }
  36.             }
  38.             ListModel {
  39.                 id: nestedModel
  40.                 ListElement {
  41.                     categoryName: "Veggies"
  42.                     collapsed: true
  44.                     // A ListElement can't contain child elements, but it can contain
  45.                     // a list of elements. A list of ListElements can be used as a model
  46.                     // just like any other model type.
  47.                     subItems: [
  48.                         ListElement { itemName: "Tomato" },
  49.                         ListElement { itemName: "Cucumber" },
  50.                         ListElement { itemName: "Onion" },
  51.                         ListElement { itemName: "Brains" }
  52.                     ]
  53.                 }
  55.                 ListElement {
  56.                     categoryName: "Fruits"
  57.                     collapsed: true
  58.                     subItems: [
  59.                         ListElement { itemName: "Orange" },
  60.                         ListElement { itemName: "Apple" },
  61.                         ListElement { itemName: "Pear" },
  62.                         ListElement { itemName: "Lemon" }
  63.                     ]
  64.                 }
  66.                 ListElement {
  67.                     categoryName: "Cars"
  68.                     collapsed: true
  69.                     subItems: [
  70.                         ListElement { itemName: "Nissan" },
  71.                         ListElement { itemName: "Toyota" },
  72.                         ListElement { itemName: "Chevy" },
  73.                         ListElement { itemName: "Audi" }
  74.                     ]
  75.                 }
  77.                 ListElement {
  78.                     categoryName: "Veggies"
  79.                     collapsed: true
  81.                     // A ListElement can't contain child elements, but it can contain
  82.                     // a list of elements. A list of ListElements can be used as a model
  83.                     // just like any other model type.
  84.                     subItems: [
  85.                         ListElement { itemName: "Tomato" },
  86.                         ListElement { itemName: "Cucumber" },
  87.                         ListElement { itemName: "Onion" },
  88.                         ListElement { itemName: "Brains" }
  89.                     ]
  90.                 }
  92.                 ListElement {
  93.                     categoryName: "Fruits"
  94.                     collapsed: true
  95.                     subItems: [
  96.                         ListElement { itemName: "Orange" },
  97.                         ListElement { itemName: "Apple" },
  98.                         ListElement { itemName: "Pear" },
  99.                         ListElement { itemName: "Lemon" }
  100.                     ]
  101.                 }
  103.                 ListElement {
  104.                     categoryName: "Cars"
  105.                     collapsed: true
  106.                     subItems: [
  107.                         ListElement { itemName: "Nissan" },
  108.                         ListElement { itemName: "Toyota" },
  109.                         ListElement { itemName: "Chevy" },
  110.                         ListElement { itemName: "Audi" }
  111.                     ]
  112.                 }
  114.                 ListElement {
  115.                     categoryName: "Veggies"
  116.                     collapsed: true
  118.                     // A ListElement can't contain child elements, but it can contain
  119.                     // a list of elements. A list of ListElements can be used as a model
  120.                     // just like any other model type.
  121.                     subItems: [
  122.                         ListElement { itemName: "Tomato" },
  123.                         ListElement { itemName: "Cucumber" },
  124.                         ListElement { itemName: "Onion" },
  125.                         ListElement { itemName: "Brains" }
  126.                     ]
  127.                 }
  129.                 ListElement {
  130.                     categoryName: "Fruits"
  131.                     collapsed: true
  132.                     subItems: [
  133.                         ListElement { itemName: "Orange" },
  134.                         ListElement { itemName: "Apple" },
  135.                         ListElement { itemName: "Pear" },
  136.                         ListElement { itemName: "Lemon" }
  137.                     ]
  138.                 }
  140.                 ListElement {
  141.                     categoryName: "Cars"
  142.                     collapsed: true
  143.                     subItems: [
  144.                         ListElement { itemName: "Nissan" },
  145.                         ListElement { itemName: "Toyota" },
  146.                         ListElement { itemName: "Chevy" },
  147.                         ListElement { itemName: "Audi" }
  148.                     ]
  149.                 }
  155.             }
  157.             Component {
  158.                 id: categoryDelegate
  160.                 Column {
  161.                     width: 200
  163.                     Rectangle {
  164.                         id: categoryItem
  165.                         border.color: "black"
  166.                         border.width: 5
  167.                         color: "white"
  168.                         height: 50
  169.                         width: 200
  171.                         Text {
  172.                             anchors.verticalCenter: parent.verticalCenter
  173.                             x: 15
  174.                             font.pixelSize: 24
  175.                             text: categoryName
  176.                         }
  178.                         Rectangle {
  179.                             color: "red"
  180.                             width: 30
  181.                             height: 30
  182.                             anchors.right: parent.right
  183.                             anchors.rightMargin: 15
  184.                             anchors.verticalCenter: parent.verticalCenter
  186.                             MouseArea {
  187.                                 anchors.fill: parent
  189.                                 // Toggle the 'collapsed' property
  190.                                 onClicked:{
  191.                                     do {
  192.                                         if(_currentIndex === -1)        break;
  193.                                         if(_currentIndex === index)     break;
  194.                                         if(nestedModel.get(_currentIndex).collapsed === true)   break;
  196.                                         nestedModel.setProperty(_currentIndex, "collapsed", true)
  197.                                     }while(0);
  199.                                     _currentIndex = index;
  200.                                     nestedModel.setProperty(index, "collapsed", !collapsed)
  201.                                     _totalHeight = getViewHeight();
  202.                                 }
  204.                             }
  205.                         }
  206.                     }
  208.                     Loader {
  209.                         id: subItemLoader
  211.                         // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
  212.                         // the Loader element retains the same height it had when sourceComponent was set. Setting visible
  213.                         // to false makes the parent Column treat it as if it's height was 0.
  214.                         visible: !collapsed
  215.                         property variant subItemModel : subItems
  216.                         sourceComponent: collapsed ? null : subItemColumnDelegate
  217.                         onStatusChanged: if (status == Loader.Ready) item.model = subItemModel
  218.                     }
  219.                 }
  221.             }
  223.             Component {
  224.                 id: subItemColumnDelegate
  225.                 Column {
  226.                     property alias model : subItemRepeater.model
  227.                     width: 200
  228.                     Repeater {
  229.                         id: subItemRepeater
  230.                         delegate: Rectangle {
  231.                             color: "#cccccc"
  232.                             height: 40
  233.                             width: 200
  234.                             border.color: "black"
  235.                             border.width: 2
  237.                             Text {
  238.                                 anchors.verticalCenter: parent.verticalCenter
  239.                                 x: 30
  240.                                 font.pixelSize: 18
  241.                                 text: itemName
  242.                             }
  243.                         }
  244.                     }
  245.                 }
  246.             }
  248.         }
  250.         Rectangle {
  251.             id: scrollBar
  252.             width: 20
  253.             height: parent.height
  254.             anchors.right: parent.right
  255.             y: 0
  256.             color: "white"
  258.             Rectangle {
  259.                 id: button1
  260.                 x: 0
  261.                 width: 20
  262.                 y: listview.contentY/_totalHeight * scrollBar.height   //scrollBar.height * listview.visibleArea.yPosition
  263.                 height: listview.height * scrollBar.height / _totalHeight
  264.                 color: "red"
  266.                 Rectangle{
  267.                     height: 10
  268.                     width: parent.width
  269.                     anchors.top: parent.top
  270.                     anchors.left: parent.left
  271.                     color: "green"
  272.                 }
  274.                 Rectangle{
  275.                     height: 10
  276.                     width: parent.width
  277.                     anchors.bottom: parent.bottom
  278.                     anchors.left: parent.left
  279.                     color: "green"
  280.                 }
  282.                 MouseArea {
  283.                     anchors.fill: button1
  285.                     drag.target: button1
  286.                     drag.axis: Drag.YAxis
  287.                     drag.maximumY: scrollBar.height - button1.height
  288.                     drag.minimumY: 0
  289.                     onPositionChanged: {
  290.                         listview.contentY = button1.y * _totalHeight / scrollBar.height
  292.                     }
  293.                 }
  294.             }
  295.         }
  298.     }
  300.     function getViewHeight(){
  301.         var viewHeight = 0;
  302.         for(var i = 0 ; i < nestedModel.count ; i++){
  303.             if(nestedModel.get(i).collapsed === true){
  304.                 viewHeight += 50 ;
  305.             }
  306.             else {
  307.                 viewHeight += ( 50+ nestedModel.get(i).subItems.count * 40) ;
  308.             }
  309.         }
  310.         return viewHeight
  311.     }
  313. }

问题，当第一个index打开的时候然后把滑动条滑到显示最后一个，再点击打开的时候滑动条显示就开始不正常了，而且不能回复。请问大家有什么解决方案吗 ？
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个