HarmonyOs ----使命统计案例
[*] 顶部样式计划
[*] https://i-blog.csdnimg.cn/blog_migrate/d5c309af358ffcc03352cc7a98fd9c68.png
[*] 由图中可看出是，程度布局，整体为垂直布局
@Entry
@Component
struct Task_1 {
build() {
Column(){
Row(){
}
}
}
}
2.填写内容
[*]因为整体布局样式相同，用@styles 设置整体布局通用样式
[*]因为数值会变化：用@State界说
[*]外面圆圈也会变化，所以用Progress
[*]第一个数值为：选中数值：finish
[*]第二个数值为：总共数值：totall
//设置整体样式
@Styles function card_1(){
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4})
}
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
build() {
Column(){
Row(){
Text('任务进度：')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Stack(){
Progress({value:this.finish,total:this.totall,type:ProgressType.Ring})
.width(100)
Row(){
Text(this.finish+'')
.fontSize(30)
.fontColor('#36D')
Text(' / '+this.totall)
.fontSize(30)
}
}
}
//引用自定义样式card_1
.card_1()
.justifyContent(FlexAlign.SpaceAround)
}
}
}
[*] 设置按钮
[*] 设置按钮样式
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
build() {
Column(){
Row（）{//顶部样式}
//设置按钮样式
Button('新增任务')
.width(140)
.margin({top:10})
}
}
}
2.添加数组
[*]task类中的id是静态变量，可以被task类中的所有对象共享
//创建task类
class task{
static id :number=1
name:string=`任务${task.id++}`
Boole:boolean=false
}
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task:task[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button('新增任务')
.width(140)
.margin({top:10})
}
}
}
3.添加事故：点击按钮，随之数组增长（顶部totall变化）
[*]push是增长一条新数组
[*] this.task_1.push(new task_1())：只写 task_1()：上面已经界说，就不用在写
[*]数组总值增长，totall数值随之变化
//创建task类
class task_1{
static id :number=1
name:string=`任务${task_1.id++}`
Boole:boolean =false
}
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task_1:task_1[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button('新增任务')
.width(200)
.margin({top:10})
.onClick(()=>{
this.task_1.push(new task_1())
//totall数值是数组长度
this.totall=this.task_1.length
})
}
}
}
[*] 添加内容
[*] 用ForEach循环数组：
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task_1:task_1[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
ForEach(this.task_1,(item:task_1,index)=>{
Row(){
Text(item.name)
.fontSize(20)
}
})
}
}
}
2.添加多选框
[*]select(item.Boole)：select是布尔值，Boole：上面在函数中被设布尔值
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task_1:task_1[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
ForEach(this.task_1,(item:task_1,index)=>{
Row(){
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
}
})
}
}
}
[*] 设置样式
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task_1:task_1[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
ForEach(this.task_1,(item:task_1,index)=>{
Row(){
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
}
.card_1()
.justifyContent(FlexAlign.SpaceBetween)
})
}
}
}
4.添加监听事故：监听task_1变化
[*]onChange：如Checkbox类型变化，finish增长
@Entry
@Component
struct Task_1 {
@State finish:number=0
@State totall:number=0
// 数组类型
@State task_1:task_1[]=[]
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
ForEach(this.task_1,(item:task_1,index)=>{
Row(){
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
.onChange(()=>{
this.finish=this.task_1.filter(item=>item.Boole).length
})
}
.card_1()
.justifyContent(FlexAlign.SpaceBetween)
})
}
}
}
[*] 设置列表
[*] 在list，ListItem内添加数组
@Entry
@Component
struct Task_1 {
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
List(){
ForEach(this.task_1,(item:task_1,index)=>{
ListItem() {
Row() {
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
}
.card_1()
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
}
}
}
[*] 设置样式
@Entry
@Component
struct Task_1 {
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
List({space:10}){
ForEach(this.task_1,(item:task_1,index)=>{
ListItem() {
Row() {
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
}
.card_1()
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
}
[*] 设置左滑动，并删除该组数据
[*].swipeAction({end: this.DeleteButton(index) })：end后添加函数
[*]用@Builder 创建函数
[*] this.tasks.splice(index,1)：splice删除index索引的一个数组
[*]在同步一下totall，finish数据
@Entry
@Component
struct Task_1 {
build() {
Column(){
Row（）{//顶部样式}
Button（）//设置按钮样式
List({space:10}){
ForEach(this.task_1,(item:task_1,index)=>{
ListItem() {
Row() {
Text(item.name)
.fontSize(20)
Checkbox()
.select(item.Boole)
}
.card_1()
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteButton(index:number){
Button({type:ButtonType.Circle}){
//矢量图
Image('/Task/task_delete.svg')
//改变矢量图颜色
.fillColor(Color.White)
.width(50)
}
.width(80)
.margin(5)
.width(80)
.backgroundColor(Color.Red)
.onClick(()=>{
this.tasks.splice(index,1)
this.finishTask=this.tasks.filter(item=>item.finished).length
this.totallTask = this.tasks.length
})
} 有什么不足恣意提，我下次改进！！！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]