HarmonyOS NEXT星河版零基础入门（2）

news2025/11/5 3:57:17

1.Scroll滚动容器-核心用法

1（1）.Scroll的核心用法

快速得到一个长度为5的数组

Array.from({length:5})

代码：

这种是默认是竖向的要是想要实现横向的就得把Scroll里边的Column改为Row组件并且把scrolllable设置为Horizontal横向

1（2）.Scroll的常见属性

代码部分

1（3）.滚动容器Scroll-控制器

代码：

1（3）.滚动容器Scroll-Scroll事件

2.容器组件Tabs

2.1Tabs的基本用法

代码

2.2Tabs的常用属性

代码

2.3滚动导航栏

代码：

2.4自定义TabBar

案例代码

2.5自定义TabBar-高亮切换

代码：

高亮部分代码

逻辑：传参需要新增它本身的下标和选中的图片如果在切换时那个选中的图标==我们现在这个本身的图标那就相当于选中的就是这个状态那么我们需要将高亮的字体设置为红色图片我们就用传进来的选中的图片

3.class类

3.1class类的实例属性方法（字段）

代码：

3.2class类的构造函数

代码：

代码结构比较复杂时我们就可以基于接口传一个对象

3.3class类-定义方法&静态方法&静态属性

类定义的方法是实例可以访问的

类定义的静态方法和属性是给本身这个类添加的不会去随便变得

3.4class类-继承extends和super关键字

类的继承

代码：

若是子类想要重写父类的方法只需在子类中提供同名的方法即可

这样打印出来的就是子类中的sayHi()

若是还想要继承父类中的方法或属性或构造函数就得用super

代码：

super获取父类方法

super获取父类的构造函数

super获取父类属性

3.5class类-instanceof和typeof

typeof仅能用于简单类型的判断，复杂类型需要用instanceof判断

代码

3.6class类-类的修饰符

readonly修饰符

代码：

private修饰符

代码

protected修饰符

代码：

public修饰符

其实public是默认可不写的

总结

4.剩余参数和展开运算符

剩余参数

代码

展开运算符

代码：

5 interface接口的继承和实现

5.1接口继承

代码：

5.2接口实现

代码：

6.泛型函数

6.1 泛型函数

类型可当参数传过去看下图左边那么多代码右边几行就实现了

代码：

练习

6.2 泛型约束

代码：

6.3多个泛型参数

代码：

6.4泛型接口

代码：

6.5泛型类

代码：

7、模块化语法

7.1模块化基本认知

7.2默认导出和导入

代码

7.3按需导出和导入

代码：

7.4全部导入

代码：

8.自定义组件基础

9.自定义组件-通用样式事件

10.自定义组件-成员函数变量

代码：

11.BuilderParam构建函数-传递UI（插槽）

代码：

11.1单个BuilderParam有两种传递方式

一种是按参数传递参数的key要与子组件中定义的一致

一种是按照自定义组件外部传递这种看起来更与插槽类似

@Entry
@Component
struct BuilderParamPage {
  @Builder
  First(){
    Image('https://img1.baidu.com/it/u=3631027001,3666368042&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500')
      .width(100)
      .height(100)
  }
  @Builder
  Two(){
    Button('我是点击按钮')
  }


  build() {
    Column() {
      SonBuilderParam({
        getContent:this.First,

      })
      SonBuilderParam(){
        Button('代付款')
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
    .padding(20)
  }
}




@Component
struct SonBuilderParam {
  @Builder
  getDefault(){
    Text('我是默认内容')
  }
  @BuilderParam
  getContent:()=>void=this.getDefault


  build() {
    Column() {
this.getContent()
    }
    .height(200)
    .width('100%')
    .backgroundColor('#fff')
    .borderRadius(10)
    .padding(20)
    .margin({
      bottom:20
    })


  }
}

11.1多个BuilderParam怎么传递

代码：

@Entry
@Component
struct ManyBuilderParamPage {
  @Builder
  header() {
    Row() {
      Text('我是头部')
    }
    .width('100%')
    .backgroundColor(Color.Pink)
    .height(60)
  }

  @Builder
  Content() {
    Column() {
      Text('我是内容')

    }
    .width('100%')
    .backgroundColor(Color.Gray)
    .height(100)
  }

  build() {
    Column() {

      // SonManyBuilderParam() {
      //   this.header()
      //   this.Content()
      //
      // }
      SonManyBuilderParam({
        header:()=>{
          this.header()
        },
        Con:()=>{
          this.Content()
        }
      })



    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
    .padding(20)
  }
}


@Component
struct SonManyBuilderParam {
  @Builder
  DefauteHeader() {
    Text('我是默認的')
  }

  @Builder
  DefauteCon() {
    Text('我是默認的')
  }

  @BuilderParam
  header: () => void = this.DefauteHeader

  @BuilderParam
  Con: () => void = this.DefauteCon

  build() {
    Column() {
      this.header()
      this.Con()


      Row() {
        Button('取消').onClick(() => {

        })
        Button('确定').onClick(() => {

        })
      }

    }
    .width('100%')
    .backgroundColor('#fff')
    .borderRadius(10)
    .padding(20)
    .margin({
      bottom: 20
    })

  }
}

看下效果图

11.2尾随闭包

尾随闭包就是父组件在子组件(){}后边写内容结构传过去对面一个@BuilderParam接收要满足两个条件

只有一个builderParam的时候可以使用尾随闭包
当builderParam没有参数传出的时候可以用尾随闭包、

子组件：

@Component
struct DandelCom {
  @State dangleHeight: number = 200
  @BuilderParam
  one: () => void = this.aa

  @Builder
  aa() {
    Text('我是默认的方法')
  }

  build() {
    Column() {
      this.one()

    }
    .width('100%')
    .height(this.dangleHeight)
    .backgroundColor(Color.Gray)
  }
}

export { DandelCom }

父组件

import { DandelCom } from './components/DangleCom';

@Entry
@Component
struct DangleBuilderPage {
  @State message: string = 'Hello 尾随闭包';
  @State Pheight: number = 300

  build() {
    Column() {
      DandelCom({ dangleHeight: this.Pheight, }) {

        Button('哈咯')
          .width(100)
          .height(60)
        Button('哈咯2')
          .width(100)
          .height(60)
        Button('哈咯3')
          .width(100)
          .height(60)


      }
    }
    .height('100%')
    .width('100%')
  }
}