arkUI自定义组件、状态组件管理、任务进度Demo

最新推荐文章于 2024-07-11 15:29:37 发布

三月计划

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量208

点赞数 1

文章标签：前端 java javascript harmonyos

本文链接：https://blog.csdn.net/weixin_44518089/article/details/136958493

版权

arkUI自定义组件

公共头部文件

@Component
export struct Header{
  private title: ResourceStr
  build(){
    Row() {
      Image($r('app.media.ic_public_back'))
        .width(30)
        .height(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.ic_public_email'))
        .width(30)
    }
    .width('100%')
    .height('30')
    // .margin({ bottom: 20 })
    .justifyContent(FlexAlign.Start)
    .backgroundColor('#d9d6c3')
  }
}

自定义组件主体

class Item {
  private img: Resource;
  private name: string;
  private price: number;
  private discount: number

  constructor(img: Resource, name: string, price: number,discount:number = 0) {
    this.img = img
    this.name = name
    this.price = price
    this.discount = discount
  }
}

// @Component
// struct Header{
//   private title: ResourceStr
//   build(){
//     Row() {
//       Image($r('app.media.ic_public_back'))
//         .width(30)
//         .height(30)
//       Text(this.title)
//         .fontSize(30)
//         .fontWeight(FontWeight.Bold)
//       Blank()
//       Image($r('app.media.ic_public_email'))
//         .width(30)
//     }
//     .width('100%')
//     .height('30')
//    // .margin({ bottom: 20 })
//     .justifyContent(FlexAlign.Start)
//     .backgroundColor('#d9d6c3')
//   }
// }
import {Header} from '../common/CommonCompents'

// 全局构建自定义函数组件  全局
// @Builder function ItemCard(item) {
//   Row({ space: 20 }) {
//     Image(item.img)
//       .width(100)
//       .padding({ right: 20 })
//     Column({ space: 10 }) {
//       if (item.discount != 0) {
//         Text(item.name)
//           .fontColor('red')
//           .fontSize(20)
//         Text('原价：￥ ' + item.price)
//           .fontSize(10)
//           .decoration({type: TextDecorationType.LineThrough})
//         Text('现价：￥ ' + (item.price - item.discount))
//           .fontSize(20)
//         Text('折扣：￥ ' + item.discount)
//           .fontSize(15)
//       }else {
//         Text(item.name)
//           .fontColor('red')
//           .fontSize(20)
//         Text('￥ ' + item.price)
//           .fontSize(20)
//       }
//     }
//     .height('100%')
//     .alignItems(HorizontalAlign.Start)
//   }
//   .width('100%')
//   .backgroundColor('#FFF')
//   .borderRadius(20)
//   .height(120)
//   .padding(10)
// }

// 全局公共样式
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
  .backgroundColor('#d9d6c3')
  .padding(20)
}
// 公共文本样式
@Extend(Text) function priceText(){
  .fontColor('red')
  .fontSize(20)
}
@Entry
@Component
struct shopping {
  private items: Array<Item> = [
    new Item($r('app.media.icon'), 'very good1', 661,500),
    new Item($r('app.media.icon'), 'very good2', 662),
    new Item($r('app.media.icon'), 'very good3', 663),
    new Item($r('app.media.icon'), 'very good1', 661,500),
    new Item($r('app.media.icon'), 'very good2', 662),
    new Item($r('app.media.icon'), 'very good3', 663),
    new Item($r('app.media.icon'), 'very good1', 661,500),
    new Item($r('app.media.icon'), 'very good2', 662),
    new Item($r('app.media.icon'), 'very good3', 663)
  ]

  build() {
    Column() {
      Header({title:'商品列表'})
      .margin({bottom:10})

      List(){
        ForEach(
          this.items,
          item =>{
            ListItem(){
              // Row({ space: 20 }) {
              //   Image(item.img)
              //     .width(100)
              //     .padding({ right: 20 })
              //   Column({ space: 10 }) {
              //     if (item.discount != 0) {
              //       Text(item.name)
              //         .fontColor('red')
              //         .fontSize(20)
              //       Text('原价：￥ ' + item.price)
              //         .fontSize(18)
              //         .decoration({type: TextDecorationType.LineThrough})
              //       Text('现价：￥ ' + (item.price - item.discount))
              //         .fontSize(20)
              //       Text('折扣：￥ ' + item.discount)
              //         .fontSize(20)
              //     }else {
              //       Text(item.name)
              //         .fontColor('red')
              //         .fontSize(20)
              //       Text('￥ ' + item.price)
              //         .fontSize(20)
              //     }
              //   }
              //   .height('100%')
              //   .alignItems(HorizontalAlign.Start)
              // }
              // .width('100%')
              // .backgroundColor('#FFF')
              // .borderRadius(20)
              // .height(120)
              // .padding(10)
              // ItemCard(item) 全局
              this.ItemCard(item) //局部
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      // ForEach(
      //   this.items,
      //   item =>{
      //     Row({ space: 20 }) {
      //       Image(item.img)
      //         .width(100)
      //         .padding({ right: 20 })
      //       Column({ space: 10 }) {
      //         if (item.discount != 0) {
      //           Text('原价：￥ ' + item.price)
      //             .fontSize(18)
      //             .decoration({type: TextDecorationType.LineThrough})
      //           Text('现价：￥ ' + (item.price - item.discount))
      //             .fontSize(20)
      //           Text('折扣：￥ ' + item.discount)
      //             .fontSize(20)
      //         }else {
      //           Text(item.name)
      //             .fontColor('red')
      //             .fontSize(20)
      //           Text('￥ ' + item.price)
      //             .fontSize(20)
      //         }
      //       }
      //       .height('100%')
      //       .alignItems(HorizontalAlign.Start)
      //     }
      //     .width('100%')
      //     .backgroundColor('#FFF')
      //     .borderRadius(20)
      //     .height(120)
      //     .padding(10)
      //   }
      // )
    }
    .fillScreen()
  }

  //局部构建自定义函数组件
  @Builder ItemCard(item) {
    Row({ space: 20 }) {
      Image(item.img)
        .width(100)
        .padding({ right: 20 })
      Column({ space: 10 }) {
        if (item.discount != 0) {
          Text(item.name)
            .priceText()
          Text('原价：￥ ' + item.price)
            .fontSize(15)
            .decoration({type: TextDecorationType.LineThrough})
          Text('现价：￥ ' + (item.price - item.discount))
            .fontSize(20)
          Text('折扣：￥ ' + item.discount)
            .fontSize(15)
        }else {
          Text(item.name)
            .priceText()
          Text('￥ ' + item.price)
            .priceText()
        }
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .backgroundColor('#FFF')
    .borderRadius(20)
    .height(120)
    .padding(10)
  }
}

状态组件

状态：state 驱动试图更新数据被装饰器标记的变量
视图：view 基于ui描述渲染的到的用户界面

@State 声明必须初始化，支持Object、class、string、number、enum、boolean以及这些类型的数组

//对象类型
class Student{
  name: string
  age: number
  boy: Student

  constructor(name:string,age:number,boy ?: Student) {
    this.name = name
    this.age = age
    this.boy = boy
  }
}

@Component
struct StateView2{
  @State s:Student = new Student("ty",15)
  build(){
    Column(){
      Text(`${this.s.name}:${this.s.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() =>{
          this.s.age++
        })

      // Text(`${this.s.boy.name}:${this.s.boy.age}`)
      //   .fontSize(50)
      //   .fontWeight(FontWeight.Bold)
      //   .onClick(() =>{
      //     this.s.boy.age++
      //   })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
@Entry
@Component
struct StateView{
  @State msg:string = 'hello'
  @State age:number = 1
  @State name:string = 'ty'
  @State su:Student[] =[
    new Student("xx",12),
    new Student("yy",10)
  ]
  @State idx:number = 1
  build(){
    Column(){
      Text(this.msg)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() =>{
          this.msg = 'hello ArkUI'
        })
      Text(`${this.name}:${this.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() =>{
          this.age++
        })
      Text("=======Student List=======")
      Button('添加')
        .onClick(() =>{
          this.su.push(new Student('oo'+this.idx+1,this.age+1) )
        })
      ForEach(
        this.su,
        (s,index) =>{
          Row(){
            Text(`${s.name}: ${s.age}`)
              .onClick(() =>{
                this.su[index] = new Student(s.name,s.age+1)
              })
            Button('删除')
              .onClick(() =>{
                this.su.splice(index,1)
              })
          }
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

任务管理demo

class Task{
  static id:number = 1
  name:string = `任务：${Task.id++}`
  state:boolean = false

}
//统一卡片样式
@Styles function card(){
  .width('95%')
  .padding(20)
  .borderRadius(15)
  .backgroundColor(Color.White)
  .shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard(){
  .decoration({type:TextDecorationType.LineThrough})
  .backgroundColor('#B1B2B1')
}

@Entry
@Component
struct task{
  //总任务数
  @State totalTask:number = 0;
  //完成数
  @State finishTask: number = 0;
  //任务个数
  @State Tasks:Task[] =[]
  //创建一个更新函数
  handleTaskChange(){
    this.totalTask = this.Tasks.length
    this.finishTask = this.Tasks.filter(item => item.state).length
  }
  build(){
    Column({space:10}) {
      //1.任务进度
      Row() {
        Text("任务进度：")
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
        Stack() {
          Progress({
            value: this.finishTask,
            total: this.totalTask,
            type: ProgressType.Ring
          })
            .width('100')
          Row() {
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor('blue')
            Text(' / ' + this.totalTask.toString())
              .fontSize(24)
          }
        }
      }
      .card()
      .margin({ top: 10, bottom: 10 })
      .justifyContent(FlexAlign.SpaceEvenly)
      //2.新增任务按钮
      Button('新增任务')
        .onClick(() => {
          this.Tasks.push(new Task())
          //this.totalTask = this.Tasks.length
          this.handleTaskChange()
        })
        .fontSize(20)
      //3.任务列表
      List(){
        ForEach(
          this.Tasks,
          (item:Task, index) =>{
            ListItem(){
              Row(){
                Text(item.name)
                  .fontSize(25)
                Checkbox()
                  .select(item.state)
                  .onChange(val =>{
                    item.state = val
                    //完成的数量 = 任务列表中filter状态的长度
                    //this.finishTask = this.Tasks.filter(item => item.state).length
                    this.handleTaskChange()
                  })
              }
              .card()
              .margin({top:15})
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end: this.DeleteCard(index)})
          })
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }

  @Builder DeleteCard(index:number){
    Button(){
      Image($r('app.media.ic_public_delete_filled'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(()=>{
      this.Tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}