跟着小白一起学鸿蒙之第一个Hap应用（六）

@Entry                                //用@Entry装饰的自定义组件用作页面的默认入口组件，也可以理解为页面的根节点。   一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。
@Component                            //@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件，在build方法里描述UI结构。
struct Hello {                         //在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct
    @State myText: string = 'World'
    build() {                          //build函数用于定义组件的声明式UI描述，在build方法中以声明式方式进行组合自定义组件或系统内置组件。
        Column() {                     //Column：沿垂直方向布局的容器。
            Text('Hello')              //Text：显示一段文本的组件。
                .fontSize(30)
            Text(this.myText)
                .fontSize(32)
            Divider()                  //Divider：提供分隔器组件，分隔不同内容块/内容元素。
            Button() {                 //Button：按钮组件，可快速创建不同样式的按钮，通常用于响应用户的点击操作。
                Text('Click me')
                .fontColor(Color.Red)
            }.onClick(() => {
                this.myText = 'UI'
            })
            .width(500)
            .height(200)
        }
    }
}

import ConfigData from '../../Utils/ConfigData';
import {SubEntryComponent} from '../../component/subEntryComponent';
@Entry
@Component
struct HomePage {
  @State message: string = 'The Test'
  build() {
    Column(){
      GridContainer({columns:12, sizeType: SizeType.Auto, gutter: vp2px(1) === 2 ? '12vp' : '0vp', margin: vp2px(1) === 2 ? '24vp' : '0vp'}) {
        Row({}) {
          Column() {}
          .width(ConfigData.WH_100_100)
          .height(ConfigData.WH_100_100)
          .useSizeType({
            xs: { span: 0, offset: 0 }, sm: { span: 0, offset: 0 },
            md: { span: 0, offset: 0 }, lg: { span: 2, offset: 0 }
          });
          Column() {
            Text(this.message)
              .fontSize($r("app.float.font_30"))
              .lineHeight($r("app.float.lineHeight_41"))
              .fontWeight(FontWeight.Bold)
              .fontFamily('HarmonyHeiTi')
              .textAlign(TextAlign.Start)
              .width(ConfigData.WH_100_100)
              .padding({left: $r('app.float.distance_26'), top: $r('app.float.distance_12'), bottom: $r('app.float.distance_17')})
          Column({space:'16vp'}){
            List(){
              ListItem(){            SubEntryComponent({targetPage:"pages/test1",title:$r("app.string.test1")})
              }
              .padding({top: $r('app.float.distance_2'), bottom: $r('app.float.distance_2')})
              ListItem(){          SubEntryComponent({targetPage:"pages/test2",title:$r("app.string.test2")})
              }
              .padding({top: $r('app.float.distance_2'), bottom: $r('app.float.distance_2')})
              ListItem(){
SubEntryComponent({targetPage:"pages/test3",title:$r("app.string.test3")})
              }
              .padding({top: $r('app.float.distance_2'), bottom: $r('app.float.distance_2')})
              ListItem(){
SubEntryComponent({targetPage:"pages/test4",title:$r("app.string.test4")})
              }
              .padding({top: $r('app.float.distance_2'), bottom: $r('app.float.distance_2')})
            }
          }
          .width(ConfigData.WH_100_100)
        }
        .padding({left: $r('app.float.distance_24'), right: $r('app.float.distance_24')})
        .width(ConfigData.WH_100_100)
        .height(ConfigData.WH_100_100)
        .useSizeType({
          xs: { span: 12, offset: 0 }, sm: { span: 12, offset: 0 },
          md: { span: 12, offset: 0 }, lg: { span: 8, offset: 2 }
        });

        Column() {}
        .width(ConfigData.WH_100_100)
        .height(ConfigData.WH_100_100)
        .useSizeType({
          xs: { span: 0, offset: 12 }, sm: { span: 0, offset: 12 },
          md: { span: 0, offset: 12 }, lg: { span: 2, offset: 10 }
        })
        }
        .width(ConfigData.WH_100_100)
        .height(ConfigData.WH_100_100);
      }
      .width(ConfigData.WH_100_100)
      .height(ConfigData.WH_100_100);
    }
    .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
    .width(ConfigData.WH_100_100)
    .height(ConfigData.WH_100_100);
  }
}

import ConfigData from '../Utils/ConfigData';
@Component
export struct SubEntryComponent{
  private targetPage: string;
  private title:string | Resource;
  @State isTouched:boolean = false;
  private date: any = null;
  private deviceId: any = null;
  build() {
    Navigator({target: this.targetPage}){
      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems:ItemAlign.Center }) {
        Row() {
          Text(this.title)
            .fontSize($r('app.float.font_30'))
            .lineHeight($r('app.float.wh_value_32'))
            .fontColor($r('app.color.font_color_182431'))
            .fontWeight(FontWeight.Medium)
            .margin({left: $r('app.float.distance_8')})
            .textAlign(TextAlign.Start)
            .height($r('app.float.wh_value_32'));
        }
        Image(('app.media.ic_settings_arrow'))
          .width($r('app.float.wh_value_12'))
          .height($r('app.float.wh_value_100'))
          .margin({right: $r('app.float.distance_8')});
      }
      .height(ConfigData.WH_100_100)
      .width(ConfigData.WH_100_100)
      .borderRadius($r('app.float.radius_12'))
      .linearGradient(this.isTouched ? {
         angle: 90,
         direction: GradientDirection.Right,
         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
       } : {
          angle: 90,
          direction: GradientDirection.Right,
          colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]})
      .onTouch((event: TouchEvent) => {
        if (event.type === TouchType.Down) {
          this.isTouched = true;
        }
        if (event.type === TouchType.Up) {
          this.isTouched = false;
        }
      })
    }
    .params( {date: this.date, deviceId: this.deviceId} )
    .padding($r('app.float.distance_4'))
    .height($r('app.float.wh_value_100'))
    .borderRadius($r('app.float.radius_24'))
    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
  }
}

targetpage:"{页面路径}"

定义：
const 'NAME' = '路径';
实现：
Router.push({ uri: PAGE_URI_TEST_NAME });

// 提供在给定范围内选择评分的组件
@Entry
@Component
struct RatingExample {
  @State rating: number = 1
  @State indicator: boolean = false

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('current score is ' + this.rating).fontSize(20)
      Rating({ rating: this.rating, indicator: this.indicator })
        .stars(5)
        .stepSize(0.5)
        .onChange((value: number) => {
          this.rating = value
        })
    }.width(350).height(200).padding(35)
  }
}

@State counter: Counter = new Counter()
ts

MyComponent({counter: $myCounter})

dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})

class ClassA {
  public a:number
  constructor(a: number) {
    this.a = a
  }
}
@Entry
@Component
struct Parent {
  @State parentState: ClassA = new ClassA(1)
  
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(2), aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(3), aLink: $parentState })
      }
    }
  }
}
@Component
struct CompA {
  @State aState: any = false
  @Link aLink: ClassA
  
  build() {
    Column() {
      CompB({ bLink: $aLink, bProp: this.aState })
      CompB({ bLink: $aState, bProp: false })
    }
  }
}
@Component
struct CompB {
  @Link bLink: ClassA
  @Prop bProp: boolean
  
  build() {
    Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
      Text(JSON.stringify(this.bLink.a)).fontSize(30)
      Text(JSON.stringify(this.bProp)).fontSize(30).fontColor(Color.Red)
     }.margin(10)
  }
}