鸿蒙开发任务列表统计出错,我的毕业设计打算做一个习惯打卡软件。用openharmony实现,其中一个模块是任务列表,可以实现添加任务,删除任务,统计任务数量,统计已完成任务数量。在开发中用到了关系型数据库,目前可以实现增删,在统计已完成的任务时总出bug。
目前所用到的代码有
数据的结构
//任务清单
export class TaskModel{
id:number;
title:string;
finish:boolean;
constructor(title?:string,finish?:boolean) {
this.title=title;
this.finish=finish;
}
}
数据库工具
import { TaskModel } from '../model/TaskModel';
import { RdbRelationalStore } from '../utils/RdbRelationalStoreUtil';
import { Task } from './Table';
class TaskDb{
//获取rdb
private preUtil:RdbRelationalStore=RdbRelationalStore.getInstance()
//添加任务
async insert(obj){
return await this.preUtil.insert(Task,obj)>0;
}
//删除任务
async delete(obj){
return await this.preUtil.delete(Task,'id',obj.id)
}
//获取所有数据
async get(){
const pre=await this.preUtil.getPredicates(Task)
return await this.preUtil.query(pre) as TaskModel[]
}
//更新任务
async update(obj){
return await this.preUtil.update(Task,obj,'id',obj.id);
}
}
export const taskDb=new TaskDb();
任务数据库表
//任务清单表
export const Task ='task';
//任务清单
export const sql_task=`
CREATE TABLE IF NOT EXISTS ${Task}(
id INTEGER PRIMARY KEY AUTOINCREMENT , --编号
title TEXT(255) , --标题
finish BIT --完成状态
); --清单表
`;
初始化表
import { RdbRelationalStore } from '../utils/RdbRelationalStoreUtil'
import { sql_account, sql_event, sql_journal, sql_task, sql_total, sql_user } from './Table';
export class InItDb{
private static rdbUtil:RdbRelationalStore=RdbRelationalStore.getInstance();
static async init(){
await this.initTable();
// await this.initDate();
}
//初始化表格
static async initTable(){
await this.rdbUtil.createTable(sql_user,'用户表');
await this.rdbUtil.createTable(sql_event,'事件表');
await this.rdbUtil.createTable(sql_task,'任务表');
await this.rdbUtil.createTable(sql_journal,'日志表');
await this.rdbUtil.createTable(sql_account,'记账表');
await this.rdbUtil.createTable(sql_total,'记账总结表');
}
//初始化数据
// static async initDate(){
//
// }
}
程序的整体
import { taskDb } from '../../db/TaskDb'
import { TaskModel } from '../../model/TaskModel'
import promptAction from '@ohos.promptAction'
@Preview
@Component
export struct task{
@StorageLink('task_arr') task:any[]=[] //任务清单
@State tasks:TaskModel=new TaskModel('',false)
@State f:TaskModel=new TaskModel('',false)
@State select:boolean=false
@State selTask:number=0
@State nowItems:TaskModel=new TaskModel()
scroller:Scroller=new Scroller() //控制滚动效果
async aboutToAppear(){
this.task=await taskDb.get()
this.finish()
}
finish(){
this.selTask=this.task.filter(item=>item.finish==true).length
}
build() {
Column(){
//1,标题
Row(){
Text('任务清单')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Start)
Text(`${this.selTask.toFixed()}/`)
.fontSize(25)
Text(`${this.task.length.toFixed()}`)
.fontSize(25)
}
Row(){
TextInput({placeholder:'输入新的任务',text:this.tasks.title})
.layoutWeight(6)
.onChange((value)=>{
this.tasks.title=value
})
Image($rawfile('index/strawberry_add.png'))
.size({width:35,height:35})
.objectFit(ImageFit.Contain)
.onClick(async ()=>{
if(this.tasks.title===''){
promptAction.showToast({message:'请先指定任务哦!'})
}else{
//插入数据
//默认为完成
let result=await taskDb.insert(this.tasks)
promptAction.showToast({message:result?'记录成功':'记录失败'})
this.tasks.title=''
// this.tasks.finish=false
//更新数据
// this.task=await taskDb.get()
this.task=await taskDb.get()
// this.finish()
}
})
}.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
Divider().color(Color.Gray)
.strokeWidth(3)
//2,渲染列表
List({scroller:this.scroller}){
ForEach(this.task,(items:TaskModel,index:number)=>{
ListItem(){
Row(){
Text(items.title)
.fontSize(22)
Checkbox()
.select(items.finish)
.width(50)
.onChange(async (value:boolean)=>{
const flag:TaskModel=new TaskModel()
flag.finish=value
flag.id=items.id
flag.title=items.title
let result= await taskDb.update(flag)
promptAction.showToast({message:result?`更新成功${flag.finish}`:'更新失败'})
// this.selTask=this.task.filter(item=>item.finish).length
this.finish()
// this.task=await taskDb.get()
this.task=await taskDb.get()
})
}.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
} .swipeAction({ end:this.itemDelete(index)})
})
}.height(360)
}.height(400)
.margin({left:10,right:10})
.padding(10)
.borderRadius(20)
.backgroundColor(Color.White)
// .justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
@Builder itemDelete(index:number){
Column(){
//删除任务
Button('删除').onClick(async (event: ClickEvent) => {
//删除数据库里的数据
let result=await taskDb.delete(this.task[index])
promptAction.showToast({message:result?'删除成功':'删除失败'})
//删除前端显示数据
this.task=await taskDb.get()
})
}
}
}
最后的效果是
主要遇到的问题是在点击checkbox是应该改变items.finised的状态,并更新到数据库中,但是经常出现点击没反应虽然触发更新,但是更新的是和预知效果想反的状态。要么就是要连续点击两次才可以更新状态,导致结果出错,改了很多地方都没有成功。求帮忙