HarmonyOS4-学习入门知识总结

会跑的兔子2024-04-14 17:47

简单的组件学习：

复制代码 
/**
 * weip 自定义控件
 * 自定义构建函数也是需要充电的地方，分全局和局部的
 * 全局：需要添加function关键字  局部：不加function关键字
 * @Styles function 自定义公共样式 分全局和局部
 * @Extends(Text) 继承模式 只能写成全局的
 * export:导出组件
 */
@Component
export struct Header {
  private title: ResourceStr;
  build() {
    // 标题部分
    Row() {
      // 资源自行替换，返回icon
      Image($r('app.media.app_icon'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      // 资源自行替换，分享icon
      Image($r('app.media.app_icon'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

ImagesPage.ets:

引用header组件

复制代码 
/**
 * 导入head组件
 */
import { Header } from '../components/HeadComponents'

// 全局自定义构建函数  function：代表全局
@Builder function ItemCard() {
  
}

// 组件内的局部函数需要加this
// 自定义公共样式
@Styles function fillScreen() {
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}

// 自定义字体样式 需使用Extend() 继承模式，只能写在全局位置
@Extend(Text) function priceText() {
  .fontSize(18)
  .fontColor('#F36')
}

@Entry
@Component
struct Index {
  @State imageWidth: number = 150

  // ForEach：循环遍历数组，根据数组内容渲染页面组件，超过屏幕的东西就看不到，也滑动不了，所以后面统一使用List组件
  build() {
    // 纵向布局 主轴/交叉轴，一般只设置主轴，不设置交叉轴
    Column() {
      // 标题
      Header({title: "图片详情"})
        .padding({left: 20, top: 20, right: 20, bottom: 20})

      // 横向布局 主轴/交叉轴，一般只设置主轴，不设置交叉轴
      Row(){
        Image($r('app.media.icon'))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      // Row容器 放一行
      Row() {
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#663')

        TextInput({ placeholder: '请输入图片宽度', text:this.imageWidth.toFixed(0) })
          .width(150)
          .backgroundColor('#FFF')
          .type(InputType.Number)
          .onChange(value => {
            console.log(value)
            this.imageWidth = parseInt(value)
          })
      }
      .width('100%')
      .padding({left: 14,right: 14})
      .justifyContent(FlexAlign.SpaceBetween) // 中间留空

      // 分割线
      Divider()
        .width('91%')


      // 两个按钮
      Row(){
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.imageWidth >= 10) {
              this.imageWidth -= 10;
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if (this.imageWidth < 300) {
              this.imageWidth += 10;
            }
          })
      }
      .width('100%')
      .margin({top: 35, bottom: 35})
      .justifyContent(FlexAlign.SpaceEvenly)


      Slider({
        min: 100,
        max: 300,
        value: this.imageWidth,
        step: 10
      })
        .width('100%')
        .blockColor('#36D')
        .trackThickness(7)
        .showTips(true)
        .onChange(value => {
          // value:当前滑块值
          this.imageWidth = value;
        })
    }
    .width('100%')
    .height('100%')
  }
}

/**
 * struct:自定义组件 可复用的UI单元
 * 装饰器：用来装饰类结构、方法、变量
 * @Component：标记自定义组件
 * @Entry：标记当前组件是入口组件
 * @State：标记一个变量是状态变量，值变化时会触发UI更新
 * build（）：UI描述，其内部以声明式方式描述UI结构
 * 内置组件：ArkUI提供的组件，比如容器组件如Row、Column
 * 基础组件：自带样式和功能的页面元素，如Text
 * 属性方法：设置组件的UI样式
 * 事件方法：设置组件的事件回调
 * 组件通用属性、特有属性（图片插值）
 */

Index.ets:

一般是应用程序的入口

复制代码 
@Entry  // 入口組件
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#36D')
          .onClick(() => {
            this.message = 'Hello ArkTS!';
          })

        // Image('https://bkimg.cdn.bcebos.com/pic/bd315c6034a85edf8db139b7db031e23dd54564edf55?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536')
        //   .width('50%')
        // 引用本地图片资源地址
        Image($r('app.media.icon'))
          .width(250)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
    }
    .height('100%')
  }
}

/**
 * struct:自定义组件 可复用的UI单元
 * 装饰器：用来装饰类结构、方法、变量
 * @Component：标记自定义组件
 * @Entry：标记当前组件是入口组件
 * @State：标记一个变量是状态变量，值变化时会触发UI更新
 * build（）：UI描述，其内部以声明式方式描述UI结构
 * 内置组件：ArkUI提供的组件，比如容器组件如Row、Column
 * 基础组件：自带样式和功能的页面元素，如Text
 * 属性方法：设置组件的UI样式
 * 事件方法：设置组件的事件回调
 * 组件通用属性、特有属性（图片插值）
 */
复制代码 
PropPage.ets:
复制代码 
/**
 * 自定义任务类
 */
class Task {
  // 静态变量，所有对象共享变量
  static id: number = 1
  // 任务名称   半角：``
  name: string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished: boolean = false
}

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

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

// 任务统计信息的实体类【c】
class StaticInfo {
  totalTask: number = 0;
  finishTask: number = 0;
}

@Entry
@Component
struct PropPage {
  // 总任务数量
  @State totalTask: number = 0

  // 已完成任务数量
  @State finishTask: number = 0

  build() {
    Column({space: 10}){
      // 任务进度卡片 子组件
      TaskStatistics({finishTask:this.finishTask, totalTask: this.totalTask})

      // 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
      TaskList({finishTask:$finishTask, totalTask: $totalTask})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskList {
  // 总任务数量
  @Link totalTask: number

  // 已完成任务数量
  @Link finishTask: number

  // 任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column() {
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(() => {
          // 新增任务数据
          this.tasks.push(new Task())
          // 更新任务总数量
          this.handleTaskChange()
        })

      // 3、任务列表
      List({space: 10}) {
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row() {
                // 任务名
                Text(item.name)
                  .fontSize(20)
                // 任务复选框
                Checkbox()
                  .select(item.finished)
                  .onChange(isSelected => {
                    // 任务状态发生变更，更新当前任务状态
                    item.finished = isSelected
                    // 更新已完成任务数量
                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end: this.DeleteButton(index)})
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }

  @Builder DeleteButton(index: number) {
    Button(){
      Image($r('app.media.icon'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 从角标开始删 删1个
      this.tasks.splice(index, 1)
      this.handleTaskChange()
    })
  }
}

/**
 * 任务进度卡片 子组件
 * 子组件是TaskStatistics  此时父组件是PropPage.ets
 * Prop:变量不能初始化 单向同步【父组件-->子组件】
 * Link:支持传对象 Prop：不支持传对象
 * provider 跨组件传输
 * consume 跨组件传输
 */
@Component
struct TaskStatistics {
  // 总任务数量
  @Prop totalTask: number

  // 已完成任务数量
  @Prop finishTask: number
  build() {
    Row() {
      // 任务进度
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      // 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })

        // 1/5
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card()
    .margin({top: 20, bottom: 20})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

预览效果图：

注解的学习：

复制代码 
/**
 * 自定义任务类
 */
class Task {
  // 静态变量，所有对象共享变量
  static id: number = 1
  // 任务名称   半角：``
  name: string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished: boolean = false
}

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

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

// 任务统计信息的实体类
class StatInfo {
  totalTask: number = 0;
  finishTask: number = 0;
}

/**
 * 父组件
 */
@Entry
@Component
struct PropPage {
  // 统计信息  【父亲】
  @State stat: StatInfo = new StatInfo()


  build() {
    Column({space: 10}){
      // 任务进度卡片 子组件
      TaskStatistics({finishTask:this.stat.finishTask, totalTask: this.stat.totalTask})

      // 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
      TaskList({stat:$stat})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskList {
  // 统计信息【儿子】  Link可以传对象
  @Link stat: StatInfo

  // 任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column() {
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(() => {
          // 新增任务数据
          this.tasks.push(new Task())
          // 更新任务总数量
          this.handleTaskChange()
        })

      // 3、任务列表
      List({space: 10}) {
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row() {
                // 任务名
                Text(item.name)
                  .fontSize(20)
                // 任务复选框
                Checkbox()
                  .select(item.finished)
                  .onChange(isSelected => {
                    // 任务状态发生变更，更新当前任务状态
                    item.finished = isSelected
                    // 更新已完成任务数量
                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end: this.DeleteButton(index)})
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }

  @Builder DeleteButton(index: number) {
    Button(){
      Image($r('app.media.icon'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 从角标开始删 删1个
      this.tasks.splice(index, 1)
      this.handleTaskChange()
    })
  }
}

/**
 * 任务进度卡片 子组件
 * 子组件是TaskStatistics  此时父组件是PropPage.ets
 * Prop:变量不能初始化 单向同步【父组件-->子组件】
 * Link:支持传对象 Prop：不支持传对象
 * provider 跨组件传输
 * consume 跨组件传输
 */
@Component
struct TaskStatistics {
  // 总任务数量
  @Prop totalTask: number

  // 已完成任务数量
  @Prop finishTask: number
  build() {
    Row() {
      // 任务进度
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      // 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })

        // 1/5
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card()
    .margin({top: 20, bottom: 20})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

跨组件传输数据：

@Provider @Consume

这种相对比较费内存，非跨组件不建议使用

复制代码 
/**
 * 自定义任务类
 */
class Task {
  // 静态变量，所有对象共享变量
  static id: number = 1
  // 任务名称   半角：``
  name: string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished: boolean = false
}

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

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

// 任务统计信息的实体类
class StatInfo {
  totalTask: number = 0;
  finishTask: number = 0;
}

/**
 * 父组件
 */
@Entry
@Component
struct PropPage {
  // 统计信息  【父亲】
  @Provide stat: StatInfo = new StatInfo()


  build() {
    Column({space: 10}){
      // 任务进度卡片 子组件
      TaskStatistics()

      // 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
      TaskList()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskList {
  // 统计信息【儿子】  Link可以传对象
  @Consume stat: StatInfo

  // 任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column() {
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(() => {
          // 新增任务数据
          this.tasks.push(new Task())
          // 更新任务总数量
          this.handleTaskChange()
        })

      // 3、任务列表
      List({space: 10}) {
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row() {
                // 任务名
                Text(item.name)
                  .fontSize(20)
                // 任务复选框
                Checkbox()
                  .select(item.finished)
                  .onChange(isSelected => {
                    // 任务状态发生变更，更新当前任务状态
                    item.finished = isSelected
                    // 更新已完成任务数量
                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end: this.DeleteButton(index)})
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }

  @Builder DeleteButton(index: number) {
    Button(){
      Image($r('app.media.icon'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 从角标开始删 删1个
      this.tasks.splice(index, 1)
      this.handleTaskChange()
    })
  }
}

/**
 * 任务进度卡片 子组件
 * 子组件是TaskStatistics  此时父组件是PropPage.ets
 * Prop:变量不能初始化 单向同步【父组件-->子组件】
 * Link:支持传对象 Prop：不支持传对象
 * provider 跨组件传输
 * consume 跨组件传输
 */
@Component
struct TaskStatistics {
  // 统计信息
  @Consume stat: StatInfo

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

      // 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.stat.finishTask,
          total: this.stat.totalTask,
          type: ProgressType.Ring
        })

        // 1/5
        Row() {
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card()
    .margin({top: 20, bottom: 20})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// bind(this)

复制代码 
/**
 * 自定义任务类
 */
@Observed
class Task {
  // 静态变量，所有对象共享变量
  static id: number = 1
  // 任务名称   半角：``
  name: string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished: boolean = false
}

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

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

// 任务统计信息的实体类
class StatInfo {
  totalTask: number = 0;
  finishTask: number = 0;
}

/**
 * 父组件
 */
@Entry
@Component
struct PropPage {
  // 统计信息  【父亲】
  @Provide stat: StatInfo = new StatInfo()


  build() {
    Column({space: 10}){
      // 任务进度卡片 子组件
      TaskStatistics()

      // 任务列表，包含新增任务 @Link totalTask：$finishTask:变量的引用
      TaskList()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskList {
  // 统计信息【儿子】  Link可以传对象
  @Consume stat: StatInfo

  // 任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column() {
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(() => {
          // 新增任务数据
          this.tasks.push(new Task())
          // 更新任务总数量
          this.handleTaskChange()
        })

      // 3、任务列表
      List({space: 10}) {
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              // bind(this)  绑定父组件的this
              TaskItem({item: item, onTaskChange: this.handleTaskChange.bind(this)})
            }
            .swipeAction({end: this.DeleteButton(index)})
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }

  @Builder DeleteButton(index: number) {
    Button(){
      Image($r('app.media.icon'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 从角标开始删 删1个
      this.tasks.splice(index, 1)
      this.handleTaskChange()
    })
  }
}

/**
 * 自定义任务的item项
 * 方法传递
 */
@Component
struct TaskItem {
  @ObjectLink item: Task
  // 变量的类型是个函数类型
  onTaskChange: () => void

  build() {
    Row() {
      // 任务名 如果完成，需要变灰
      if (this.item.finished) {
        Text(this.item.name)
          .fontSize(20)
          .finishedTask()
      } else {
        Text(this.item.name)
          .fontSize(20)
      }
      // 任务复选框
      Checkbox()
        .select(this.item.finished)
        .onChange(isSelected => {
          // 任务状态发生变更，更新当前任务状态
          this.item.finished = isSelected
          // 更新已完成任务数量
          //this.handleTaskChange()
          this.onTaskChange()
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

/**
 * 任务进度卡片 子组件
 * 子组件是TaskStatistics  此时父组件是PropPage.ets
 * Prop:变量不能初始化 单向同步【父组件-->子组件】
 * Link:支持传对象 Prop：不支持传对象
 * provider 跨组件传输
 * consume 跨组件传输
 */
@Component
struct TaskStatistics {
  // 统计信息
  @Consume stat: StatInfo

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

      // 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.stat.finishTask,
          total: this.stat.totalTask,
          type: ProgressType.Ring
        })

        // 1/5
        Row() {
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card()
    .margin({top: 20, bottom: 20})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}
相关推荐
西岸行者6 天前
学习笔记：SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意6 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码6 天前
嵌入式学习路线
学习
毛小茛6 天前
计算机系统概论——校验码
学习
babe小鑫6 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms6 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下6 天前
Linux Virtual Server（LVS）学习总结
linux·学习·lvs
我想我不够好。6 天前
2026.2.25监控学习
学习
im_AMBER6 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J6 天前
从“Hello World“ 开始 C++
c语言·c++·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04OpenClaw优化飞书API 额度已耗尽问题05Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services06Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤07Window 10部署openclaw报错node.exe : npm error code 12808小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）09OpenClaw大龙虾机器人完整安装教程10网站改了域名，如何查找？