【HarmonyOS 鸿蒙 黑马程序员 学习笔记 98.1】

自定义组件

@Component		//	声明组件
struct		//	后面就是组件名
@Entry		//	页面入口	每个page页面有且只有1个 @Entry 入口

简易示例

@Component
struct xs_com {
  @State num1 : number = 0
  build() {
    Column(){
      Image($r('app.media.7_2')).width(60)
        .onClick(()=>{this.num1++})
      Text(`${this.num1}`).fontSize(20)
    }
  }
}

@Component struct com_ding {
  build() {
    Row(){Text('顶').fontSize(40)}.width('100%').backgroundColor('#f0f')
  }
}
@Component struct com_zhong {
  build() {
    Column(){
      Text('中').fontSize(40)
      xs_com()
      xs_com()
      xs_com()
      xs_com()
    }.layoutWeight(1).backgroundColor('#999')
  }
}
@ComponentV2 struct com_di {
  build() {
    Row(){Text('底').fontSize(40)}.width('100%').backgroundColor('#0ff')
  }
}


@Entry
@Component
struct Index {

  build() {
    Column(){
      com_ding()
      com_zhong()
      com_di()
    }.width('100%').height('100%').backgroundColor('#bbb')
  }
}

通用组件样式和事件

@Preview		//	预览	@Entry	是页面载入
@ComponentV2		//	官方查不到资料

模块代码

@ComponentV2 struct comp_col{
  build() {
    Column(){
      Text('你好世界').fontSize(40).backgroundColor('#0ff') //  有背景色
        .onClick(()=>{
          AlertDialog.show({message:`自定义文本`})
        })
    }.margin(20).backgroundColor('#0bb')  //  无背景色
    .onClick(()=>{
      AlertDialog.show({message:`自定义column`}) //  不可视 or 不存在
    })
  }
}

export {comp_col}

页面代码

import * as com from '../tests/test1'

@Entry
@Component
struct Index {

  build() {
    Column(){
      com.comp_col().margin(20).backgroundColor('#099') //  有背景色
        .onClick(()=>{
          AlertDialog.show({message:`自定义外margin`})
        })
    }.width('100%').height('100%').backgroundColor('#bbb')
  }
}

成员,变量,函数

老师模块是顶部的标题和大框架
我自己写的模块是下面的图+文
模块代码

@Component struct com_top_img{
  @State img : ResourceStr = ``
  @State txt : string = ''
  build() {
    Column(){
      Image(this.img).width(60)
      Text(this.txt).fontSize(16)
    }.width('20%').height('12%').backgroundColor('#999')
  }
}

@Component struct sp{
  @State img : ResourceStr = ``
  @State txt : string = ''
  @State price : string = ''
  p1 = (c1:string)=>{AlertDialog.show({message:c1})} //  成员变量函数  可重写覆盖
  p2(c2:number){  //  不知道能不能在模块外部调用此函数
    this.price = c2.toFixed(2);
    return this.price
  }  //  函数 不可重写覆盖

  build() {
    Row(){
      Image(this.img).width(40)
      Text(this.txt).fontSize(16)
      Blank()
      Text(`价格${this.price}`).fontSize(20)
    }.width('100%').height('12%').backgroundColor('#999')
  }
}

class lei{
  static fun1 (c1:number){return c1.toFixed(2)}
}

export {
  com_top_img,
  sp,
  lei
}

页面代码

import * as com from '../tests/test1'
//import { sp } from '../tests/test1' //系统自动补全代码

@Entry
@Component
struct Index {
  @State top_txt : string[] = ['待付款','待收货','评价','退货/售后']
  @State top_img : ResourceStr[] = [
    $r('app.media.6_2'),
    $r('app.media.7_2'),
    $r('app.media.8_2'),
    $r('app.media.9_2')
  ]

  @State sp_txt : string[] = [] //  偷懒
  @State sp_aimg : ResourceStr[] = [] //  偷懒

  build() {
    Column(){
      Row(){
        Text(`我的订单`).fontSize(20)
        Blank()
        Text(`全部订单 >`).fontSize(20)
      }.width(`100%`)
      Row(){
        ForEach((this.top_txt),(item:string,i:number)=>{  //  IDE不报错 找了半天找不到原因 item不用也要写上
          com.com_top_img({img:this.top_img[i],txt:this.top_txt[i]})
            .onClick(()=>{
              AlertDialog.show({message:`页面跳转 ${this.top_txt[i]}`})
            })
        })
      }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
      Column(){
        Scroll(){
          Column({space:10}){
            ForEach(Array.from({length:15}),(item:string,i:number)=>{ //  偷懒
              com.sp({
                txt:`${item} ${i}`,
                img:$r('app.media.ic_public_code'),
                price:com.lei.fun1(i) //  调用类静态方法
              })
                .onClick(()=>{
                  AlertDialog.show({message:`页面跳转商品 ${i}`})
                })
            })
          }.width(`100%`)
        }
      }.layoutWeight(1) //  scroll里column会撑到最大导致显示异常 外层加个column限制
    }.width('100%').height('100%').backgroundColor('#bbb')
  }
}

成品

修正后
本来想在模块外调用模块内函数,不会
就创建了一个类,调用类静态方法