鸿蒙开发自定义构建函数&自定义组件【华为根技术】

@Component
struct Test{
@State a: string = ''
 
// 自定义构建函数
@Builder
//title为自定义函数名
//text为函数调用时传来的参数,参数可以有，也可以没有
title(text: string) {
  Row() {
   ...
  }
  .width('100%')
  .height(56)
}


 build(){
    Column(){
       Text('aaa')
       //调用自定义构建函数
       this.title()
    }
 }
}

@Builder
function title(txt: string, content: string) {
  Row() {
    Text(txt)
    Text('-------')
    Text(`这个${content}也不一样`)
    Blank()
    Text("查看更多-----")
    Text(this.activeIndex.toString()) // 报错，不能访问组件的状态
  }
  .border({ width: 1, color: '#f00' })
  .width('100%')
}


@Entry
@Component
struct Test {
  @State activeIndex: number = 8
  build() {
    Column() {
      //调用全局的Builder
      title('1', '冰天')
    }
  }
}

@Component
export struct ChildComponent {
  // @Prop message: string = ''  // 单向数据绑定
  // @Link message: string = ''  // 双向数据绑定
  
  build() {
    Text('改变message')
    .onClick(()=>{
       this.message = 'how are you'
    })
  }
}

import { TopBar } from "../common/TopBar"

//
/**
 *  TS的数据类型分两大类
 *   1. 基本数据类型  string number boolean ...
 *      name = 'bbbb'
 *   2. 引用数据类型  数组[]  对象{}
 *      arr = ['aaa','bbb']
 *      obj = {
 *        username: 'aaaa',
 *        desc: 'bbbb'
 *      }
 */
export interface StudentModel {
  name: string,
  age: number,
  gender: string
}
@Entry
@Component
export struct Rank {
  @State message: string = '热销榜'
  @State student: StudentModel = {
    name: '张三',
    age: 16,
    gender: '其他'
  }

  build() {
    Column() {
      Text("当前是榜单页")
      TopBar({
        title: this.message,
        color: '红色',
        stu: this.student
      })
    }
    .width('100%')
    .height('100%')
  }
}

import { StudentModel } from "../pages/Rank"

@Component
export struct TopBar {
  @Prop title: string
  @Prop color: string
  @Prop stu: StudentModel
  build() {
    Row() {
      Text("返回箭头").margin(10)
      Text(this.title)
      Blank()
      Text(this.color)
      Text(this.stu.name)
    }
    .width("100%")
    .height("40")
    .border({ width: 1, color: '#f00' })
    .backgroundColor(Color.Orange)
  }
}

import { Child } from '../common/Child'

@Entry
@Component
struct Index {
  // @Provide装饰器可以向后代组件传递参数
  @Provide color: string = '祖先组件的红色'
  @Provide("student") a: string = '张三'
  build() {
    Column(){
      // Button("改变数据")
      //   .onClick(()=>{
      //     this.color = '新的绿色'
      //   })
      Text(this.color)
      Text("首页-父组件")
      Divider().color(Color.Red)
      Child()
    }
  }
}

子组件

import { GrandSon } from "./GrandSon"

@Component
export struct Child {
  build() {
    Column() {
      Text('这是子组件')
      GrandSon()
    }
    .width("100%")
    .height(350)
    .border({ width: 1, color: '#f00' })
  }
}

@Component
export struct GrandSon {
  // @Consume装饰器接收祖先组件传递的参数
  @Consume color: string
  // 接收student, 同时可以给变量一个别名
  // 如果接收的数据和当前组件中的状态名冲突，就可以创建别名
  @Consume("student") name: string

  build() {
    Column() {
      Button("改变数据")
        .onClick(()=>{
          this.color = '新的绿色'
        })
      Text("这是孙组件")
      Text(this.color)
      Text(this.name)
    }
    .width('100%')
    .border({ width: 1, color: '#0f0' })
  }
}

@Entry
@Component
struct Del {
  @State message: string = '我是父组件的信息'

  show(){
    // AlertDialog.show({
    //   message: this.message
    // })
    console.log('aaaa')
  }

  build() {
    Row(){
        Text("父组件")
        Child({
          show: this.show
        })
    }

      .width(300)
      .height(160)
  }
}

@Component
struct Child {
  show: () => void = () => {
  };
  build() {
     Button("单击，会调用父组件的方法").onClick(()=>{
          this.show()
     })
  }
}