鸿蒙开发【任务案例】详细实操

最新推荐文章于 2025-05-18 08:39:51 发布

ᥫᩣ．Miraitowa

最新推荐文章于 2025-05-18 08:39:51 发布

阅读量2.1k

点赞数 41

文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/2401_82930760/article/details/138157588

版权

任务统计案例详细实操

如下图所示，我们需要做这样的一个进度案例，当我门点击时会新增加任务，向左滑动时会有删除

一、创建项目

在这里我所创建的项目命名为 TaskExample，只要命名规范，都可以

二、导入所需要的图片

根据样式图片导入我们所需要的的图片，这里需要添加删除的图片，

需要图片我们可以直接在浏览器搜索 iconfont-阿里巴巴矢量图标库，进去直接搜索我们所需要图片保存即可。

保存图片的路径：D:\develop\MyApplication1\entry\src\main\resources\base\media

三、页面初始化准备

1.设置自定义状态变量

用来显示任务总量，完成的任务数量以及任务数组

struct TaskExample {
//任务总量
@State totalTask: number = 0
//以完成的任务数量
@State finishTask: number = 0
//任务数组
@State tasks: Task[] = []

2.定义一个Task类，用来传入id值，以及任务名称name，完成状态等变量

代码示例：

// 定义一个Task类，用来传入id的值，以及name，完成状态等变量
class Task {
//静态 id 属性所有对象共享的
static id: number = 1
//任务名称每触发一次就会依次增加
name: string = `任务${ Task.id++}`
//任务状态是否完成
finished: boolean = false
}

3.设置定义一个card的样式，统一的卡片样式

//设置card()的样式统一的卡片样式
@Styles function card() {
.width("95%")
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({ radius: 6, color: "#1F000000", offsetX: 2, offsetY: 4 }) //阴影
}

4. 利用@Extend修饰器定义任务完成样式

在里面添加相应的属性样式

//任务完成样式
@Extend(Text) function finishedTask() {
.decoration({ type: TextDecorationType.LineThrough })
.fontColor("#B1B2B1")
}

四、绘制主页面

1.在build（）里面制作任务进度卡片

1.1 利用Column 进行布局，并为其设置宽度、高度以及备件颜色的样式

代码示例：

build() {
   Column({ space:10}){
     //1任务进度卡片
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
}
}

1.2 在Column下继续运用Row排列，以及添加文本内容

分别设置字体的大小，字体加粗

代码示例：

Row(){
Text('任务进度：')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}

1.3 给Row容器设置外边距，以及在主轴上的排列方式

由于前面我们已经给页面设置了卡片的样式，这里我们直接调用card（）即可。

代码示例：

//1任务进度卡片
Row(){
Text('任务进度：')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.card()
.margin({ top:20,bottom:10})
.justifyContent(FlexAlign.SpaceEvenly)

到这里我们运行结果显示：

1.4 添加已经完成任务和总的任务量的文本样式

同样地，利用Row在同一水平方向上排列，添加Text文本组件

代码示例：

Row(){
//已经完成的任务
Text(this.finishTask.toString())
    .fontSize(24)
    .fontColor('#36D')
// 总的任务量
Text(' / '+this.totalTask.toString())
    .fontSize(24)
}

Text文本输入的是字符串内容，这里一定要通过toString（）转化为字符串才能好使，否则就会报错。

这里的运行代码显示：

1.5 利用进度条组件Progress设置，并显示效果

Progress进度条组件，用于显示内容加载或操作处理等进度

代码示例：

嵌套 Progress进度条组件，用于显示内容加载或操作处理等进度

Progress({
//调用 finishTask 指定当前进度值
value: this.finishTask,
total: this.totalTask, //指定进度总长
type: ProgressType.Ring //指定进度条类型
//Ring：环形无刻度样式，环形圆环逐渐显示至完全填充效果
})
.width(100)

代码运行效果：

1.6 利用层叠组件Stack（）使进度条和文本内容层叠

代码示例：

//利用层叠组件嵌套 Progress进度条组件，用于显示内容加载或操作处理等进度
Stack() {
Progress({
    //调用 finishTask 指定当前进度值
    value: this.finishTask,
    total: this.totalTask, //指定进度总长
    <