QML ListView 滑鼠拖拽交換行

qml 的 listview 本身有 move 過渡（transition）屬性，可以用來做一些交換動畫效果。其中 move 為當前項的過渡，movedisplaced 為被交換項的過渡。滑鼠拖拽可以用乙個 mousearea 來實現，當滑鼠滑動到相鄰行後就呼叫 model 的 move 介面，這樣就會觸發 view 的 move 過渡動畫。效果如下：

感覺有點生硬，勉強能用。

完整**如下：

import qtquick 2.12
import qtquick.window 2.12
//演示listview的拖拽移動
window 
}listview
}//被交換的項
movedisplaced: transition 
}delegate: rectangle
mousearea }}
}}}}

這裡還有個問題就是 qml 中提供的 model 本身就帶有 move 方法：

但如果用 c++ 註冊的 model ，得自己實現，並通過呼叫 beginmoverows 和 endmoverows 來觸發交換響應。這裡還有個問題就是 beginmoverows 的引數：

bool qabstractitemmodel::beginmoverows(const qmodelindex &sourceparent, int sourcefirst, int sourcelast, const qmodelindex &destinationparent, int destinationchild)

只交換單行的時候，modelindex 填預設空值，前兩個 int 引數直接填待交換的 from 行，最後乙個 int 引數，如果 from 比 to 大（從後往前移）就直接填 to 值，如果 from 比 to 小（從前往後移動）就需要填 to+1。

//model 本身有 moverows 介面，但是沒匯出給 qml
void audioinfolistmodel::swaprow(int from, int to)
}

（2021-1-28補充）之前使用 swapitemsat 只考慮了鄰近交換，但是跨行的話 move 觸發當前行移動而不是交換，而記憶體卻把兩項交換了，所以應該改為 takeat+insert 來移動選中行到目的行：

void audioinfolistmodel::swaprow(int from, int to)
}

參照部落格：

參照文件：

QML ListView 滑鼠拖拽交換行

滑鼠拖拽改變物件的屬性，滑鼠拖拽DIV移動

js滑鼠拖拽事件

滑鼠拖拽div元素

QML ListView 滑鼠拖拽交換行

滑鼠拖拽改變物件的屬性，滑鼠拖拽DIV移動

js滑鼠拖拽事件

滑鼠拖拽div元素

相關推薦