Question

我有一个带滚动条和悬停效果的QML GridView，当我将curso移动到页面的底部时，悬停会自动滚动，我想阻止它。我尝试将Flickable的interactive属性设置为false＆＃34; interactive: false＆＃34;但它没有用。我怎么能阻止这种行为？

Obs：当我移除悬停效果时，滚动按预期方式运行，只是在滚动条中移动。

GridView{
     id: grid
     anchors.margins: 20
     anchors.fill: parent
     cellHeight: 80
     cellWidth: 80
     model: MyModel{}
     highlight: Rectangle {
        color: "lightsteelblue"
        height: parent.cellHeight
        width: parent.cellWidth
        z:2
        opacity: 0.7
     }
     delegate: Column {
            Rectangle {
               color: myColor;
               height: grid.cellHeight * 0.7
               width: grid.cellWidth * 0.7
               border.color: "white"
               anchors.margins: 5
               anchors.horizontalCenter: parent.horizontalCenter

               MouseArea {
                   id: mouseRegion
                   anchors.fill: parent
                   hoverEnabled: true
                   onEntered: grid.currentIndex = model.index

               }
          }
          Text { 
             text: name; 
             anchors.horizontalCenter: parent.horizontalCenter }
          }
 }

以下是重现行为的简单项目的链接：https://drive.google.com/open?id=0B7WUSCDDdwtIbWVDWVFvMjM1djA

Answer 1

我的同事帮我找出解决问题的方法。我正在使用currentIndex属性在gridview中设置悬停位置，如文档中所述，如果highlightFollowsCurrentItem设置为true，此属性将以当前项变为可见的方式平滑滚动GridView（默认值）并且如果highlightFollowsCurrentItem设置为false，则不会滚动但是，在将highlightFollowsCurrentItem属性设置为false后，自动滚动与我的悬停效果一起停止，这显然是不需要的。我无法弄清楚出了什么问题，我们采用了不同的方法为了使悬停工作没有currentIndex行为提供的自动滚动，我们将其从gridview中删除并使用onEntered和onExited来控制悬停行为，更改用于模拟悬停效果的矩形可见性（id:selectedItem）如下所示。

 GridView{
     id: grid
     anchors.margins: 20
     anchors.fill: parent
     cellHeight: 80
     cellWidth: 80
     model: MyModel{}

     delegate: Item{

           height: grid.cellHeight * 0.9
           width: grid.cellWidth * 0.7

           Rectangle {
               id: selectedItem
               color: "lightsteelblue"
               height: parent.height
               width: parent.width
               z:12
               opacity: 0.7
               visible: false
           }

           Rectangle {
               id:rect
               color: myColor;
               height: parent.height-textName.height
               width: parent.width
               border.color: "white"
               anchors.margins: 5
               anchors.horizontalCenter: parent.horizontalCenter
               MouseArea {
                   id: mouseRegion
                   anchors.fill: parent
                   hoverEnabled: true
                   onEntered: selectedItem.visible = true
                   onExited: selectedItem.visible = false
                }
           }
           Text {
               id: textName
               text: name;
               anchors.horizontalCenter: parent.horizontalCenter
               anchors.bottom: parent.bottom
           }
         }
      }

它允许我避免自动滚动并保持悬停效果正常工作。

悬停效果是在QML GridView上滚动列表

1 个答案: