如何在QML中实现网格SnapMode

Question

我需要使用网格（而不是gridview），我需要为GridView.SnapToRow实现相同的功能。

下面是我的代码：

import QtQuick 1.0 

Rectangle { 
width: 1368 
height: 768 

Text{ 
    id:parentTxt 
    anchors.top: parentTxt0.bottom 
} 
Timer{running: true;repeat: false;interval:200;onTriggered: {calc()}} 
function calc(){ 
    var totalItems=testGrid.count+((testBtn.visible)?1:0) 
    var dividedVal=totalItems/testGrid.columns 
    var absVal=Math.floor(dividedVal) 
    var diffVal=dividedVal-absVal; 
    testGrid.rowCount=(diffVal>0)?(absVal+1):absVal 
    parentTxt.text=testGrid.rowCount 
} 

Text{ 
    id:parentTxt0 
    text:"Move up" 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      calc() 
      gridFlick.contentY+=137 
     } 
    } 
} 
Text{ 
    id:parentTxt02 
    text:"Move down" 
    anchors.left: parentTxt0.right 
    anchors.leftMargin: 20 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      calc() 
      if(gridFlick.contentY!=0)gridFlick.contentY-=137 
     } 
    } 
} 
Text{ 
    id:parentTxt03 
    text:"toggleVisiblitiy" 
    anchors.left: parentTxt02.right 
    anchors.leftMargin: 20 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      testBtn.visible=!testBtn.visible; 
      calc() 
     } 
    } 
} 
Rectangle { 
    width: 770 
    height: 274 
    anchors.centerIn: parent 
    color:"#330000ff" 
    clip:true; 

    Flickable{ 

     id:gridFlick 
     interactive: true; 
     width: parent.width 
     height: parent.height 
     contentWidth: testGrid.width; contentHeight: 137*testGrid.rowCount 
     flickableDirection:Flickable.VerticalFlick 
     boundsBehavior:Flickable.StopAtBounds 
     Grid{ 
      id:testGrid 
      property int count:15 
      property int rowCount: 0 
      columns: 5; 
      width: parent.width 
      height: parent.height 
      Rectangle{ 
       id:testBtn 
       color:"transparent" 
       height:137 
       width: 154 
       Text { 
        anchors.centerIn: parent; 
        wrapMode: Text.WordWrap 
        text: "back" 
       } 
       MouseArea{ 
        anchors.fill: parent; 
        onClicked: { 
         parentTxt.text="back" 
        } 
       } 
      } 
      Repeater{ 
       model:testGrid.count; 
       delegate:Rectangle{ 
        color:"transparent" 
        height:137 
        width: 154 
        Text { 
         anchors.centerIn: parent; 
         wrapMode: Text.WordWrap 
         text: index 
        } 

        MouseArea{ 
         anchors.fill: parent; 
         onClicked: { 
          parentTxt.text=index 
         } 
        } 
       } 
      } 
     } 
    } 
    } 
} 

任何一个可以提供一些想法呢？

Answer 1

我做了一个变通使用以下代码。此似乎工作现在

import QtQuick 1.0 

Rectangle { 
width: 1368 
height: 768 

Text{ 
    id:parentTxt 
    anchors.top: parentTxt0.bottom 
} 
TextEdit{ 
    id:logTxt 
    height:100;width:parent.width; 
    anchors.bottom: parent.bottom 
    function log(txt){ 
     text=txt+"\n" 
    } 
} 
Timer{running: true;repeat: false;interval:200;onTriggered: {calc()}} 
function calc(){ 
    var totalItems=testGrid.count+((testBtn.visible)?1:0) 
    var dividedVal=totalItems/testGrid.columns 
    var absVal=Math.floor(dividedVal) 
    var diffVal=dividedVal-absVal; 
    testGrid.rowCount=(diffVal>0)?(absVal+1):absVal 
    parentTxt.text=testGrid.rowCount 
} 

Text{ 
    id:parentTxt0 
    text:"Move up" 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      calc() 
      gridFlick.contentY+=137 
     } 
    } 
} 
Text{ 
    id:parentTxt02 
    text:"Move down" 
    anchors.left: parentTxt0.right 
    anchors.leftMargin: 20 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      calc() 
      if(gridFlick.contentY!=0)gridFlick.contentY-=137 
     } 
    } 
} 
Text{ 
    id:parentTxt03 
    text:"toggleVisiblitiy" 
    anchors.left: parentTxt02.right 
    anchors.leftMargin: 20 
    MouseArea{ 
     anchors.fill: parent; 
     onClicked: { 
      testBtn.visible=!testBtn.visible; 
      calc() 
     } 
    } 
} 

Rectangle { 
    width: 770 
    height: 274 
    anchors.centerIn: parent 
    color:"#330000ff" 
    clip:true; 
    Flickable{ 

     id:gridFlick 
     interactive: true; 
     width: parent.width 
     height: parent.height 
     contentWidth: testGrid.width; contentHeight: 137*testGrid.rowCount 
     flickableDirection:Flickable.VerticalFlick 
     boundsBehavior:Flickable.StopAtBounds 
     onFlickEnded:{ 
      logTxt.log("onFlickEnded") 
     } 

     onFlickStarted:{ 
      logTxt.log("onFlickStarted") 
     } 

     onMovementEnded:{ 
      logTxt.log("onMovementEnded") 
      gridView.contentY=gridFlick.contentY 
     } 

     onMovementStarted:{ 
      logTxt.log("onMovementStarted") 
     } 

     Grid{ 
      id:testGrid 
      property int count:15 
      property int rowCount: 0 
      columns: 5; 
      width: parent.width 
      height: parent.height 
      Rectangle{ 
       id:testBtn 
       color:"transparent" 
       height:137 
       width: 154 
       Text { 
        anchors.centerIn: parent; 
        wrapMode: Text.WordWrap 
        text: "back" 
       } 
       MouseArea{ 
        anchors.fill: parent; 
        onClicked: { 
         parentTxt.text="back" 
        } 
       } 
      } 
      Repeater{ 
       model:testGrid.count; 
       delegate:Rectangle{ 
        color:"transparent" 
        height:137 
        width: 154 
        Text { 
         anchors.centerIn: parent; 
         wrapMode: Text.WordWrap 
         text: index 
        } 

        MouseArea{ 
         anchors.fill: parent; 
         onClicked: { 
          parentTxt.text=index 
         } 
        } 

       } 
      } 
     } 
    } 



    GridView{ 
     id:gridView 
     boundsBehavior:GridView.StopAtBounds 
     snapMode:GridView.SnapToRow 
     width: 770 
     height: 274 
     anchors.horizontalCenter: parent.horizontalCenter 
     cellHeight: 137;cellWidth:154; 
     model:testGrid.count+1 
     clip:true; 
     onContentYChanged: { 
      gridFlick.contentY=contentY 
      logTxt.log(contentY) 
     } 

     onFlickEnded:{ 
      logTxt.log("gridView | onFlickEnded | "+gridView.contentY) 
     } 

     onFlickStarted:{ 
      logTxt.log("gridView | onFlickStarted | "+gridView.contentY) 
     } 

     onMovementEnded:{ 
      logTxt.log("gridView | onMovementEnded | "+gridView.contentY) 
//   gridView.contentY=gridFlick.contentY 
     } 

     onMovementStarted:{ 
      logTxt.log("gridView | onMovementStarted | "+gridView.contentY) 
     } 

     delegate:Rectangle{ 
      color:"transparent" 
      height:gridView.cellHeight 
      width: gridView.cellWidth 
      Text { 
       anchors.centerIn: parent; 
       wrapMode: Text.WordWrap 
       text: index 
      } 
     } 
    } 

} 

}