爲了製作出能在圖片上掛標籤並記錄的功能，今天首先對CreateNewPage中的Listview進行編輯，並添加自帶的LocalStorage連接到本地Sqlite進行存儲&讀取。
在目前的開發中發現自己對多個qml文件之間進行交互的操作還不太熟悉，對qt最有特色的信號槽系統還不能較正確地使用…在此推薦有意向學習qml基礎的朋友一本書《qtquick核心編程》和一篇博客：https://blog.csdn.net/foruok/article/details/28634543
ListView大致實現：（後期可以用在add等屬性上使用numberAnimation添加動畫）
ListView{
id: content;
width: parent.width; //* 0.9;
height: parent.height;
anchors.horizontalCenter: parent.horizontalCenter;
model: ListModel{
id: rplistmodel;
ListElement{ Source: ""; string: ""; labelStr: "";}
}
function changeItem(str){
content.model.setProperty(content.currentIndex, "labelStr", str);
}
//使用filckable？爲製作類似qq的滑動刪除功能
delegate: Flickable{ boundsBehavior:Flickable.StopAtBounds; height: dp(120);
width: parent.width; contentWidth: parent.width*1.4; contentHeight: dp(120);
Rectangle{
id: rprect;
color: "white";
height: dp(120);
width: parent.width / 7 * 5;//* 0.9;
Image{
id: imgg;
opacity: 1;
source: Source;
anchors.left: parent.left;
anchors.top: parent.top;
height: dp(120);
width: height;
fillMode: Image.PreserveAspectFit;
}
Text {
id: titleString;
text: string;
anchors.left: imgg.right;
color: "black";
font.pixelSize: dp(25);
anchors.verticalCenter: imgg.verticalCenter;
}
Text {
id: labelString;
text: labelStr;
anchors.top: titleString.bottom;
anchors.left: titleString.right;
anchors.leftMargin: dp(5);
/*Connections{
target: editPage;
onLabelStringChanged: {
labelString.text = editPage.labelString;
}
}*/
}
Rectangle{
anchors.left: parent.right;
height: dp(120);
width: parent.width * 0.4;
color: "red";
Text{
text: "刪除";
color: "black";
font.pixelSize: dp(25);
anchors.centerIn: parent;
}
MouseArea{
anchors.fill: parent;
onClicked: {
rplistmodel.remove(content.currentIndex);
deleteItem(content.currentIndex+1);
}
}
}
MouseArea{
//enabled: false;
anchors.fill: parent;
onClicked: {
content.currentIndex = index;
editPage = Qt.createComponent("EditPage.qml").createObject(root,{});
editPage.path = Source;
editPage.initialize();
editPage.getDBData(titleString.text);
navigationStack.push(editPage);
}
onPressed: {
content.currentIndex = index;
}
Connections{
id: popConnenction;
property string labelstr: "";//replace with var?
target: editPage;
onPopped: {
labelstr = "";
for(var i in editPage.labels){
labelstr += " " + editPage.labels[i];
}
content.changeItem(labelstr);
updateDBlabeStr(labelstr, content.currentIndex+1);
}
}
MouseArea{
x: titleString.x;
y: titleString.y;
height: titleString.height;
width: titleString.width;
onClicked: {
NativeDialog.inputText("", "", "", "", function(ok, text) {
if(ok) {
titleString.text = text;
}
});
content.currentIndex = index;
console.log(index);
updateDB(qsTr(titleString.text), index+1);
}
}
}
}
}
highlight: Rectangle{
opacity: 0.8;
color: "lightblue";
width: createPage.width;
}
//highlight爲listview的當前項目（currentindex）提供了高亮顯示
//footer屬性提供了位於listview所有元素底部的一個控件
footer: Rectangle {
color: "white";
opacity: 0.6;
width: parent.width ;//* 0.9;
anchors.horizontalCenter: parent.horizontalCenter;
height: dp(90);
IconButton{
size: dp(50);
color: "black";
anchors.verticalCenter: parent.verticalCenter;
icon: IconType.close;
onClicked: {
clearall();
rplistmodel.clear();
}
}
IconButton{
id: bt;
icon: IconType.pluscircle;
size: dp(50);
color: "lightblue";
anchors.centerIn: parent;
onClicked: {
if(navigation.currentIndex === 0)
if (system.desktopPlatform)
nativeUtils.displayImagePicker(qsTr("選擇圖片"));
else
nativeUtils.displayAlertSheet("", ["本地圖片", "相機"], true);
}//使用felgo提供的Native組件+Connection連接信號再操作而可以省去利用QMutilMeda的相機自建拍照組件的功夫，但需要判斷當前的NavigationItem序號防止其他以nativeUtils爲target的Connection之間產生混亂。
Connections{
id: connectionCreate;
target: nativeUtils;
onAlertSheetFinished: {
if(navigation.currentIndex === 0)
if(!system.desktopPlatform)
if(index == 0)
nativeUtils.displayImagePicker(qsTr("選擇圖片"));
else
nativeUtils.displayCameraPicker("相機");
}
onImagePickerFinished: {
if(navigation.currentIndex === 0)
if(accepted){
imgPath = Qt.resolvedUrl(path);
setData(imgPath,"編輯標題","無標籤");
rplistmodel.append( {Source:imgPath, string:"編輯標題", labelStr:"無標籤"} );
localStoragexy.increaseCounter();
}
}
onCameraPickerFinished: {
if(navigation.currentIndex === 0)
if(accepted){
imgPath = Qt.resolvedUrl(path);
setData(imgPath,"編輯標題","無標籤");
localStoragexy.increaseCounter();
rplistmodel.append( {Source:imgPath, string:"編輯標題", labelStr:"無標籤"} );
}
}
}
}
}
}
delegate的MouseArea內的Connections以自建變量爲目標時在felgo調試臺中會輸出Unable to assign [undefined] to QObject*，但實際編譯後測試沒有問題，猜測是liveclient功能上的缺陷
數據庫的大致實現採用直接寫在CreateNewPgae類內部的最後，代碼大多爲從其他大佬博客中摘抄的、、、慚愧
（對於本地數據可以使用SQLite Expert Personal 5進行表格化操作）
Component.onCompleted: {
initialize();
getDBData();
rplistmodel.remove(0);
//if(navigation.currentIndex === 1)
// console.log("yyyyy"); 用這個解決connection串流！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
//FileUP.upladFile();
}
function initialize(){
myDB = LocalStorage.openDatabaseSync("Grrrrr", "1.0", "ListDatabase", 100000);
myDB.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS Data(Source, string, labelStr)');
})
console.log("ok!");
}
function setData(Source,string,labelStr){
var rowid = 0;
var result;
myDB.transaction(function(tx) {
var res = tx.executeSql('INSERT INTO Data VALUES(?,?,?)', [Source,string,labelStr]);
result = tx.executeSql('SELECT last_insert_rowid()');
rowid = result.insertId;
})
}
function getDBData(){
myDB.transaction(function(tx)
{
var rs = tx.executeSql('SELECT * FROM Data');
for(var i = 0; i < rs.rows.length; i++)
{
rplistmodel.append( {Source:rs.rows.item(i).Source, string:rs.rows.item(i).string, labelStr:rs.rows.item(i).labelStr} );
}
})
}
function deleteItem(rowid){
myDB.transaction(function (tx) {
tx.executeSql('delete from Data where rowid = ?', [rowid]);
})
}
function updateDB(string, Rowid){
myDB.transaction(function (tx){
var res = tx.executeSql('update Data set string=? where rowid = ?',[string, Rowid]);
})
}
function updateDBlabeStr(txt, rowid){
myDB.transaction(function(tx){
var res = tx.executeSql('update Data set labelStr=? where rowid = ?',[txt, rowid]);
})
}
function clearall(){
myDB.transaction(function (tx){
tx.executeSql("DELETE FROM Data");
})
localStoragexy.clear();
}
}
