为了制作出能在图片上挂标签并记录的功能，今天首先对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();
}
}
