如何在QML中实现网格的SnapMode
How to implement SnapMode for Grid in QML
我需要使用网格(而不是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
}
}
}
}
}
}
}
}
有人能对此提供一些想法吗?
我使用以下代码解决了这个问题。这似乎现在工作
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
}
}
}
}
}
相关文章:
- 剑道网格jQuery动画()问题
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 我可以更改剑道UI网格吗's的外键值
- jqGrid树网格问题
- 在Three.js中导出网格会提高性能吗
- 如何在剑道网格初始化后设置pageSizes
- 在threejs中使用纹理网格和线框网格
- 如何在可分组的剑道网格中设置空数据文本
- 如何在Angular UI网格中选择下一行
- ExtJS网格单元格编辑器,防止焦点松动问题
- 多维数据集网格未在指定的分区中绘制
- 光线投射从内部投射时不会碰到网格
- 使用javascript在MVC中查找网格长度时出错
- 如何刷新AngularJs剑道网格
- 使用导航属性创建Kendo UI网格模型的问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- 如何在master中调用细节网格作为单击事件
- 如何在QML中实现网格的SnapMode