qml下拉列表问题　求解决呀

兼容适配 软件兼容
1 
 //  右边框
   Rectangle{
   anchors{
   top:parent.top
   topMargin: 129
   left:parent.left
   leftMargin: 475
   }
   width:300
   height:2
   color:"#e4f2fb"
   }
   Column{
   id:rightColum
   anchors {
   top: parent.top
   topMargin: 130
   left: parent.left
   leftMargin: 475
   }
   spacing: 10
   Rectangle{
   id:rightRectangle
   border.color: "#b9c5cc"
   width: 300; height: 230
   clip:true
   Component{
   id:rightDelegat
   Item{
   id:wrapper
   state: "transparentColor"
   width: 280; height: 30
   Text{
   id:listtext
   anchors {
   left: parent.left
   leftMargin: 10
   verticalCenter: parent.verticalCenter
   }
   font.pixelSize: 12
   color: "#7a7a7a"
   text:itemTitle
   }
   Text{
   id:listtext2
   anchors {
   left: listtext.right
   leftMargin: 10
   verticalCenter: parent.verticalCenter
   }
   font.pixelSize: 12
   color: "#7a7a7a"
   text:uniqueName
   }
   Text{
   width: 20
   id:listtext3
   anchors {
   left: listtext2.right
   leftMargin: 10
   verticalCenter: parent.verticalCenter
   }
   font.pixelSize: 12
   color: "#7a7a7a"
   text:langClde
   }
   MouseArea{
   anchors.fill:parent
   hoverEnabled: true
   onClicked: {
   wrapper.ListView.view.currentIndex = index; //?
   rightFcitxModelindex = index;

   }
   }
   }
   }
   ListView{
   id:rightLisv
   anchors.fill: parent
   model: rightFcitxModel
   delegate: rightDelegat
   highlightMoveSpeed: 9999999
   highlight: Rectangle{width: 350;height: 30 ; color: "lightsteelblue"}
   }

   Rectangle{
   id:rightscrollbar
   anchors.right: parent.right
   anchors.rightMargin: -1
   height: parent.height
//                z:scrollbar_z
   width:11
   color: "lightgrey"
   }
   Rectangle{
   id: rightbutton
   anchors.right: parent.right
   anchors.rightMargin: 0
   width: 10
   height:30
   y: rightLisv.visibleArea.yPosition* rightscrollbar.height    //?
   //       height: rightLisv.visibleArea.heightRatio * rightscrollbar.height; //?
   radius: 3
   smooth: true
   color: "white"
   border.color: "lightgrey"
   Column{
   anchors.verticalCenter: parent.verticalCenter
   anchors.horizontalCenter: parent.horizontalCenter
   spacing: 2
   Rectangle{
   width: 8;height: 1
   color: "lightgrey"
   }
   Rectangle{
   width: 8;height: 1
   color: "lightgrey"
   }
   Rectangle{
   width: 8;height: 1
   color: "lightgrey"
   }
   }
   MouseArea {
   id: rightmousearea
   anchors.fill: rightbutton
   drag.target: rightbutton
   drag.axis: Drag.YAxis
   drag.minimumY: 0
   drag.maximumY: rightscrollbar.height - rightbutton.height/10
   onMouseYChanged: {
   console.log(rightbutton.y)
//                        console.log(rightLisv.visibleArea.yPosition)
   console.log(rightLisv.contentY)
//                        console.log(rightscrollbar.height)
   console.log(rightLisv.contentHeight)
//                        console.log(rightLisv.visibleArea.heightRatio)
   rightLisv.contentY = (rightbutton.y / (rightscrollbar.height)* rightLisv.contentHeight)

   }
   }
   }
   }
   }

未命名.jpg

2

解决方法：
思路：将rightbutton的滑动区域设置为 rightscrollbar.height- rightbutton.height+rightLisv.visibleArea.heightRatio * (rightscrollbar.height-rightbutton.height)
将rightbutton中y: rightLisv.visibleArea.yPosition*( rightscrollbar.height- rightbutton.height+rightLisv.visibleArea.heightRatio * (rightscrollbar.height-rightbutton.height) )

rightmousearea中drag.maximumY: rightscrollbar.height - rightbutton.height
onMouseYChanged: {
rightLisv.contentY = (rightbutton.y / (rightscrollbar.height-rightbutton.height+rightLisv.visibleArea.heightRatio * (rightscrollbar.height-rightbutton.height))

  • rightLisv.contentHeight)
    }