HarmonyOs NEXT 鸿蒙 ArkUI 这篇就够了

// 使用 @Entry 装饰器定义组件为页面的入口点
@Entry
// 使用 @Component 装饰器定义一个名为 Index 的组件
@Component
struct Index {
  // 使用 @State 装饰器定义一个状态变量 message，并初始化为 'Hello World'
  @State message: string = 'Hello World';

  // 定义组件的构建方法
  build() {
    // 创建一个水平布局的 Row 容器
    Row() {
      // 在 Row 容器中创建一个垂直布局的 Column 容器
      Column() {
        // 在 Column 容器中创建一个 Text 组件，内容为状态变量 message 的值
        Text(this.message)
          // 设置文本的字体大小为 50
          .fontSize(50)
          // 设置文本的字体权重为 Bold（加粗）
          .fontWeight(FontWeight.Bold)
      }
      // 设置 Column 容器的宽度为 '100%'
      .width('100%')
    }
    // 设置 Row 容器的高度为 '100%'
    .height('100%')
  }
}

2.组件的属性方法

组件属性方法	描述
.width(值)	宽度
.height(值)	高度
.backgroundColor(Color.Pink)	背景色
.fontSize(值)	字体大小
.fontweight(FontWeight.Bold)	字体粗细

其中 width、height、backgroundColor是通用属性，fontSize、fontweight是文字属性

3.文本颜色

语法：.fontColor(颜色值)

颜色值说明	具体演示
Color.颜色名	Color.Red、Color.Pink
#开头的16进制	#fc5531

4.文字溢出省略号

语法：.textOverflow({

overflow: TextOverflow.XXX

})

注意：需要配合.maxLines(行数)来使用才有效果

5.行高

语法：.lineHeight(数字)

6.图片组件

语法：Image(图片数据源)

对于本地图片的资源一般存放到 resources -> base -> media中

网络图片数据源直接写链接即可

对于本地图片数据源通过Image($r('app.media.文件名'))

7.输入框

语法: TextInput(参数对象)

.属性方法()

1.参数对象：placeholder 提示文本

2.属性方法: .type(InputType.xxx)设置输入框 type 类型

type值	解释说明
Normal	基本输入模式，无特殊限制
Password	密码输入模式

示例：

TextInput({
    placeholder: '占位符文本'
}).type(InputType.Password)

8.按钮

语法: Button('按钮文本')

9.内边距padding

作用：在组件内添加间距，拉开内容与组件边缘之间的距离

对四个方向的内边距设置距离的语法：

.padding(边距值)

对单个方向的内边距设置距离的语法：

.padding({

top:边距值,

right:边距值,

bottom:边距值,

left:边距值,

})

10.外边距margin

作用：在组件外添加间距，拉开两个组件之间的距离

对四个方向的内边距设置距离的语法：

.margin(边距值)

对单个方向的内边距设置距离的语法：

.margin({

top:边距值,

right:边距值,

bottom:边距值,

left:边距值,

})

11. 边框 border

作用：给组件添加边界，进行修饰美化

四个方向边框样式一致语法：

.border({

width:1, //宽度(必须设置)

color:#e94242, //颜色

style:BorderStyle.Solid //样式

})

可选择单个方向的边框的样式设置的语法：

.border({

width:{left:1,top:2}, //宽度(必须设置)

color:#e94242, //颜色

style:{

left:BorderStyle.Dashed,

top:BorderStyle.Dotted

} //样式还有bottom 和 right

})

12.设置组件圆角

四个圆角相同语法：

.borderRadius(10)

单个圆角设置的语法：

.borderRadius({

topLeft:5,

topRight:15,

bottomLeft:25,

bottomRight:35

})

13.特殊圆角的设置（正圆、胶囊圆（左右半圈））

正圆示例：

      Button('正圆')
        .width(150) //宽度和高度一致
        .height(150)
        .borderRadius(75) //圆角是宽度或高度的一半

胶囊圆（左右半圈）示例：

      Button('胶囊圆')
        .width(150) //宽度大、高度小
        .height(40)
        .borderRadius(20) //圆角是高度的一半

14. 背景属性

属性方法	属性
背景色	backgroundColor
背景图	backgroundImage
背景图位置	backgroundImagePosition
背景图尺寸	backgroundImageSize

（1）背景图语法：
.backgroundImage(背景图地址，背景图平铺方式-枚举ImageRepeat)

背景图平铺方式	描述
NoRepeat	不平铺、默认值
x	水平平铺
y	垂直平铺
xy	水平垂直平铺

（2）背景图位置语法：

.backgroundImagePosition(坐标对象或枚举)

位置坐标:{ x : 位置坐标, y : 位置坐标}

枚举 Alignment

例如：

.backgroundImagePosition({x:100,y:100})

.backgroundImagePosition(Alignment.Center)

注意：背景定位-单位问题

背景定位默认单位：px 实际的物理像素点，我们直接测量的是px单位，设备出厂，就定好了分辨率单位

宽高默认单位：vp 虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致（推荐）

使用函数：vp2px(数值) 将vp进行转换，得到px的数值

示例：

.backgroundImagePosition({x:vp2px(100),y:vp2px(100)})

（3）背景尺寸的大小

语法：

.backgroundImageSize(宽高对象或枚举)

参数背景图宽高：{ width:尺寸,height:尺寸 }

枚举 ImageSize

枚举参数	说明
Contain	等比例缩放背景图，当宽或高与组件尺寸相同停止播放
Cover	等比例缩放背景图至完全覆盖组件范围
Auto	默认、原图尺寸

15.线性布局-主轴对齐方式

线性布局通过线性容器Column和Row创建

Column容器：子元素 垂直方向 排列

Row容器：子元素 水平方向 排序

Column排布主方向上的对齐方式

属性：.justifyContent(枚举FlexAlign) （Row排布主方向上的对齐方式相似）

16.线性布局-交叉轴对齐方式

属性：.alignItems(枚举)

枚举类型	描述
HorizontalAlign	交叉轴在水平方向
VerticalAlign	交叉轴在垂直方向

17.自适应伸缩

设置layoutWeight属性的子元素和兄弟元素，会按照权重进行主轴的空间分配

语法：.layoutWeight(数字)

18.弹性布局

语法：Flex(参数对象){

子组件1

子组件2

子组件n

}

说明	参数对象
主轴方向	direction
主轴对齐方式	justifyContent
交叉轴对齐方式	alignItems
布局换行	wrap

搜索历史示例：

实现效果显示：

代码：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('搜索历史')
        .fontSize(30)
        .fontWeight(FontWeight.Medium)
        .width('100%')
        .padding(10)


      Flex({
        direction:FlexDirection.Row,
        wrap:FlexWrap.Wrap
      }){
        Text('HarmonyOs')
          .fontSize(20)
          .backgroundColor('#ffdedee3')
          .margin(10)
          .padding(10)
          .borderRadius(10)

        Text('ArkTs')
          .fontSize(20)
          .backgroundColor('#ffdedee3')
          .margin(10)
          .padding(10)
          .borderRadius(10)

        Text('ArkUI')
          .fontSize(20)
          .backgroundColor('#ffdedee3')
          .margin(10)
          .padding(10)
          .borderRadius(10)

        Text('鸿蒙开发')
          .fontSize(20)
          .backgroundColor('#ffdedee3')
          .margin(10)
          .padding(10)
          .borderRadius(10)

        Text('前端')
          .fontSize(20)
          .backgroundColor('#ffdedee3')
          .margin(10)
          .padding(10)
          .borderRadius(10)
      }

    }
  }
}

19.绝对定位

绝对定位：

语法：.position(位置对象)

参数：{ x:水平偏移量，y:垂直偏移量 }

参照父组件左上角进行偏移。

绝对定位后的组件不再占用自身原有的位置。

20.层级

作用：调整组件的层级

语法：.zIndex(数字)

参数：数字越大，显示层级越高

21.层叠布局

语法：

stack({

alignContent: Alignment.Center //默认

}){

Item()1

Item()2

Item()3

}

22.交互-点击事件

语法：

.onClick(()=>{

})

示例代码：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('你是高手吗？')
        .onClick(()=>{
          AlertDialog.show({
            message:'弹框-我是高手'
          })
        })

    }
    .width('100%')

  }
}

23.状态管理

普通变量：只有初始化时进行渲染，后续不会再刷新。

状态变量：需要装饰器 @State 修饰，改变会引起UI的渲染刷新；必须设置类型和初始值

示例：

@Entry
@Component
struct Index {

  @State hello:string = 'Hello World'
  hello2:string = 'Hello World'
  build() {
    Column(){
      Text(this.hello.toString())
        .fontSize(40)
        .onClick(()=>{
          this.hello = 'Hello HarmonyOs'
        })

      Text(this.hello2.toString())
        .fontSize(40)
        .onClick(()=>{
          this.hello2 = 'Hello HarmonyOs'
        })

    }
    .width('100%')

  }
}

24.ForEach渲染控制

ForEach可以基于数组的个数，渲染组件的个数

语法：ForEach(arr,(item,index)=>{ })

示例效果显示：

代码：

@Entry
@Component
struct Index {
 @State nav:string[] =['首页','视频','购物','我的']
 build(){
  Column(){
   Blank()
   Row({space:5}){
    ForEach(this.nav,(item:string,index)=>{
     Text(item)
      .fontSize(22)
      .fontWeight(FontWeight.Bold)
      .layoutWeight(1)
      .textAlign(TextAlign.Center)
    })
   }
   .border({
    width:{top:1},
    style:BorderStyle.Dotted
   })
   .borderRadius({topLeft:15,topRight:15})
   .height(80)
   .width('100%')
   .backgroundColor(Color.White)


  }
  .height('100%')
  .width('100%')
  .backgroundColor('#ffded8d8')
 }
}

25. Badge角标组件

语法：Badge({

count: 1 //角标数值

position: BadgePosition.RightTop, //角标位置

style:{

fontSize: 10, //文字大小

badgeSize:16, //圆角大小

badgeColor: Color.Red //圆形底色

}

}){

Image($r('app.media.bg'))

.width(50)

}

26.Grid布局

Grid布局的主要属性

.columnsTemplate('1fr 1fr 1fr')        //列数以及占比
.rowsTemplate('1fr 1fr 1fr 1fr')        //行数以及占比
.columnsGap(5)        //每列间隔
.rowsGap(3)        //每行间隔

显示效果：

示例代码：

@Entry
@Component
struct Index {
 @State category:string[] =['首页','视频','购物','我的','电影','动漫','游戏','商店','知识','世界','节日','幽默']
 build(){
  Grid(){
   ForEach(this.category,()=>{
    GridItem(){
     Column(){

     }.width('100%')
     .height('100%')
     .backgroundColor(Color.Pink)
     .border({width:1})
    }
   })


  }
  .columnsTemplate('1fr 1fr 1fr')
  .rowsTemplate('1fr 1fr 1fr 1fr')
  .columnsGap(5)
  .rowsGap(3)
  .width('100%')
  .height('400')
  .backgroundColor(Color.Gray)

 }
}

27.Swiper轮播图

语法：

Swiper(){

// 轮播图内容

Image($r(' '))

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

.indicator(

Indicator.dot() //小圆点

.itemWidth(20) //默认宽

.itemHeight(20) //默认高

.color(Color.White) //默认的颜色

.selectedItemWidth(30) //选中的宽

.selectedItemHeight(30) //选中的高

.selectedColor(Color.Black) //选中的颜色

)

.loop(true) //是否开启循环 //默认true

.autoPlay(true) //是否开启自动播放默认false

.interval(4000) //自动播放的时间间隔(ms) 默认3000

.vertical(false) //纵向滑动轮播默认false

轮播图示例显示效果：

示例代码：

@Entry
@Component
struct Index {
build(){

 Column(){

  Swiper(){

   Image($r('app.media.swiper_phone_00'))
   Image($r('app.media.swiper_phone_01'))
   Image($r('app.media.swiper_phone_03'))

  }.width('100%')
  .height(140)
  .autoPlay(true)
  .interval(2000)
  .padding(15)
  .border({width:1})
  .margin(10)
  .indicator(
   Indicator.dot()
    .itemWidth(10)
    .itemHeight(10)
    .color(Color.Gray)
    .selectedItemWidth(10)
    .selectedItemHeight(10)
    .selectedColor(Color.Black)
  )
 }.width('100%').height('100%')

}


}

28.使用@Extend封装重复的代码

扩展组件的样式、事件，实现复用的效果

语法：

@Extend(组件名)

function 自定义属性名(自定义参数){

//设置与组件名相关的属性

}

使用方式：

组件名()

.自定义属性名(自定义参数)

示例显示效果：

示例代码：

@Extend(Text)
function testExtend(fontSize:number){
 .fontColor(Color.Red)
 .fontSize(fontSize)
}

@Entry
@Component
struct Index {
 build(){
 Column() {
  Text('Hello World')
   .testExtend(50)
 }
 }
}

29. @Styles 抽取通用的属性、事件

注意：@Styles和@Extend的实现的功能差不多，但是@Extend是封装特定的组件，而@Styles封装的是通用的组件，且@Styles有两种定义的方式，@Styles不可以传递参数

（1）全局定义语法：

@Styles function 自定义方法名(){

//自定义通用属性

}

（2）组件内定义语法：

@Styles 自定义方法名(){

//自定义通用属性

}

示例显示效果：

示例代码：

//组件外
@Styles function commonStyles() {
 .width('100%')
 .backgroundColor(Color.Red)

}

@Entry
@Component
struct Index {
 //组件内
 @Styles setHeight(){
  .height(150)
 }

 build(){
 Column() {
  Text('Hello World')
   .commonStyles()
   .setHeight()

 }
 }
}

30.@Builder 自定义构建函数（结构、样式、事件）

@Builder跟@Extend和@Styles的使用差不多，不过@Builder不是特定对于某个组件或通用属性生效，而是对全部组件以及组件的属性生效。

语法：

@Builder function 自定义方法名(自定义参数){
//自定义组件

}

示例显示效果：

示例代码：

@Builder function diceImage(){
 Image($r('app.media.one'))
  .width(100)
}

@Entry
@Component
struct Index {

 build(){
 Column() {
   diceImage()
   diceImage()
   diceImage()
   diceImage()
 }
 }
}

31.滚动容器Scroll

当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动

语法：

Scroll(){

// 只支持一个子组件

Column(){

//内容放在内部

//尺寸超过Scroll 开始滚动

}

}.with('100%')

.height(200)

.scrollable(ScrollDirection.xxx) //ScrollDirection.Vertical 纵向，ScrollDirection.Horizontal 横向

（1）滚动容器Scroll-常用属性：

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向： ScrollDirection.Vertical 纵向 SCrollDirection Horizontal 横向
scrollBar	BarState	设置滚动条状态 BarState.On 一直显示 BarState.Off 一直隐藏 BarState.Auto 滑动显示
scrollBarColor	string \| number \| Color	设置滚动条的颜色
scrollBarWidth	string \| number	设置滚动套的宽度
edgeEffect	value:EdgeEffect	设置边缘滑动效果： EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影

（2）滚动容器Scroll-控制器：

通过创建Scroll的控制器获取Scroll滑动的距离；也可以通过Scroll控制器通过事件的方式转移到指定的位置

示例代码：

@Builder function box(color:ResourceColor){
 Text()
  .width('100%')
  .height(180)
  .backgroundColor(color)
}

@Entry
@Component
struct Index {
myScroller:Scroller = new Scroller()

 build(){
  Column(){
   Scroll(this.myScroller){
    Column(){
      box(Color.Red)
      box(Color.Yellow)
      box(Color.Gray)
      box(Color.Green)
     }.width('100%')

    }.width('100%')
    .height(400)
    .backgroundColor(Color.Pink)

    Button('返回顶部')
      .onClick(()=>{
        this.myScroller.scrollEdge(Edge.Top)
      })

    Button('获取当前滑动距离')
      .onClick(()=>{
        AlertDialog.show({
          message:`x:${this.myScroller.currentOffset().xOffset},y:${this.myScroller.currentOffset().yOffset}`
        })
      })

   }

  }

}

（3）Scroll-事件

//滚动时，一直触发

.onScroll((x,y)=>{

//触发内容

})

（4）示例：点击火箭返回顶部
显示效果：

示例代码：

@Builder function box(color:ResourceColor){
 Text()
  .width('100%')
  .height(180)
  .backgroundColor(color)
}

@Entry
@Component
struct Index {
  myScroller:Scroller = new Scroller()
  @State yOffset:number = 0

 build(){
  Column(){
    Stack(){
      Scroll(this.myScroller){
        Column(){
          box(Color.Red)
          box(Color.Yellow)
          box(Color.Gray)
          box(Color.Green)
          box(Color.Pink)
          box(Color.Blue)

        }.width('100%')

      }.width('100%')
        .height('100%')
        .onScroll((x,y)=>{
          this.yOffset = this.myScroller.currentOffset().yOffset
          console.log('y:'+this.yOffset)
        })

        if(this.yOffset > 200){

          Image($r('app.media.rocket'))
            .width(60)
            .height(60)
            .padding(5)
            .offset({x:120,y:120})
            .borderRadius(25)
            .backgroundColor(Color.White)
            .onClick(()=>{
              this.myScroller.scrollEdge(Edge.Top)
            })
        }

      }
    }
  }

}

32.容器组件Tabs

常用于分页展示，顶部或底部的导航栏

语法：

// 起始：BarPosition.Start ，结尾：BarPosition.End

Tabs({ barPosition: BarPosition.XXX}){

//内容

}

.tarBar('tab名')

.vertical(true) //垂直导航：true 水平导航：false

.scrollable(true) //允许滑动：true 不允许滑动：false

.animationDuration(0) //切换动画的时间，毫秒

.barMode(BarMode.XXX) //设置为滚动效果：BarMode.Scrollable 默认为不滚动：BarMode.Fixed

（1）简单示例效果：

示例代码：

@Entry
@Component
struct Index {

 build() {
   Column() {
     Tabs(){
       TabContent(){
         Text('首页内容')
       }.tabBar('首页')

       TabContent(){
         Text('视频内容')
       }.tabBar('视频')

       TabContent(){
         Text('购物内容')
       }.tabBar('购物')
       
       TabContent(){
         Text('首页内容')
       }.tabBar('我的')
     }

   }
 }
}

（2）自定义TabBar-高亮切换

通过监听切换事件，获取索引值，记录高亮的索引

该每个tabBar起个标记,0,1,2

在tabBar内部比较（标记 ==记录的索引？高亮：不高亮）

属性

描述

onChange(event:(index:number)=>void)

Tab页签切换后触发的事件

index 为当前的索引,索引从0开始

滑动切换，点击切换都会触发

onTabBarClick(event:(index:number)=>void)

Tab页签点击后触发的事件。

Index 被点击的index索引，索引从0开始

示例效果：

示例代码：

interface NavTitle {
  title: string,
  img: Resource,
  selectedImg:Resource
}

@Entry
@Component
struct Index {


  @State selectedIndex:number = 0
  @Builder
  myBuilder(itemIndex:number,title: string, img: Resource,selectedImg: Resource) {
    Column() {
      Image(itemIndex==this.selectedIndex ? selectedImg:img)
        .width(40)
      Text(title)
        .fontColor(itemIndex==this.selectedIndex ? Color.Green:Color.Black)
    }
  }

  @State navBottom: NavTitle[] = [
    {
      title: '首页',
      img: $r('app.media.home'),
      selectedImg:$r('app.media.selected_home')
    },
    {
      title: '购物车',
      img: $r('app.media.shop_cart'),
      selectedImg:$r('app.media.selected_shop_cart')
    },
    {
      title: '我的',
      img: $r('app.media.my'),
      selectedImg:$r('app.media.selected_my')
    }
  ]

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      ForEach(this.navBottom, (item: NavTitle, index) => {
        TabContent() {
          Text(item.title + '内容')
        }
        .tabBar(this.myBuilder(index,item.title, item.img,item.selectedImg))

      })
    }.onChange((index:number)=>{
      this.selectedIndex = index
    })

  }

}

33.自定义组件

（1）基本的使用

语法：

@Component
struct 自定义组件名{
build(){
//描述UI
}
}

示例：

@Component
struct testComponent {
  build(){
    Text('Hello World')
      .fontSize(40)
  }
}

@Entry
@Component
struct Index {
  build(){
    Column(){
      testComponent()
    }
  }
}

（2）封装组件，然后通过导入的形式使用

一般情况下都不会将组件写一起写，都会对每个组件单独封装

封装的组件为：

interface NavTitle {
  title: string,
  img: Resource,
  selectedImg:Resource
}



@Preview
@Component
export struct NavBottomTabs {

  //成员变量
  @State currentTitle:string = ''
  //成员函数(不可传入覆盖）
  showTip(){
    AlertDialog.show({
      message:'你切换了tab'
    })
  }

  //成员函数(可传入覆盖）
  showTip2 = () => {
    AlertDialog.show({
      message:'你切换了tab2'
    })
  }

  @State selectedIndex:number = 0
  @Builder
  myBuilder(itemIndex:number,title: string, img: Resource,selectedImg: Resource) {
    Column() {
      Image(itemIndex==this.selectedIndex ? selectedImg:img)
        .width(40)
      Text(title)
        .fontColor(itemIndex==this.selectedIndex ? Color.Green:Color.Black)
    }
  }

  @State navBottom: NavTitle[] = [
    {
      title: '首页',
      img: $r('app.media.home'),
      selectedImg:$r('app.media.selected_home')
    },
    {
      title: '购物车',
      img: $r('app.media.shop_cart'),
      selectedImg:$r('app.media.selected_shop_cart')
    },
    {
      title: '我的',
      img: $r('app.media.my'),
      selectedImg:$r('app.media.selected_my')
    }
  ]

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      ForEach(this.navBottom, (item: NavTitle, index) => {
        TabContent() {
          Text(this.currentTitle)
            .fontSize(40)
            .backgroundColor(Color.Red)



        }
        .tabBar(this.myBuilder(index,item.title, item.img,item.selectedImg))
      })
    }.onChange((index:number)=>{
      this.selectedIndex = index
      this.showTip()
      this.showTip2()
    })

  }

}

使用的方式：（可以修改原有的成员变量，和箭头函数的成员函数）

注意：不是箭头函数的成员函数不可覆盖

import {NavBottomTabs} from '../component/nav_bottom_tabs'

@Entry
@Component
struct Index {

  build(){
    Column(){
      NavBottomTabs({currentTitle:'你好',showTip2(){
        console.log('传入覆盖了showTip2函数的内容')
      }})
    }
  }
}

34.@BuidlerParam构造函数

可以让自定义组件允许外部传递UI（也可以传递子组件中的多个@BuidlerParam构造函数）

语法：

//组件部分
@Component

struct 自定义组件名{

@BuilderParam 自定义函数:() => void = this.defaultUI

@Builder

defaultUI(){

//自定义组件

}

build(){

Column(){

this.自定义函数()

}

//调用组件

@Entry

@Component

struct Index{

build() {

Column(){

自定义组件名() //方式一：不传递外部组件

自定义组件名() { //方式二：传递外部组件（覆盖原有默认组件）

// 组件内容

}

示例一：（外部传递了UI，默认覆盖原有的UI效果）

@Component
struct TitleComponent{
  @BuilderParam TitleName:()=>void = this.defaultTitle
  @Builder
  defaultTitle(){
    Text('还没命名标题')
      .fontSize(30)
  }

  build(){
    Column(){
      this.TitleName()
    }
  }
}

@Entry
@Component
struct Index {

  build(){
    Column(){

      TitleComponent(){
        Text('教学@BuilderParam')
          .fontSize(30)
      }

    }
  }
}

运行结果：

示例二：（外部没有传递UI，默认原有的UI效果）

@Component
struct TitleComponent{
  @BuilderParam TitleName:()=>void = this.defaultTitle
  @Builder
  defaultTitle(){
    Text('还没命名标题')
      .fontSize(30)
  }

  build(){
    Column(){
      this.TitleName()
    }
  }
}

@Entry
@Component
struct Index {

  build(){
    Column(){

      TitleComponent()

    }
  }
}

运行效果显示：

35. @Prop 父向子单项传递

@Prop 装饰的变量可以和父组件建立单向的同步关系。

该装饰的变量是可变的，但是变化不会同步会该父组件。

所以，@Prop用于修饰子组件的变量；同时，@Prop修饰的变量，在原有的组件中是无法同步显示的，需要由父组件进行传递才能实现同步显示的效果。

注意：对于this指向的数据，必须使用箭头函数的方式，不然this指向的是子组件的this,如果使用箭头函数的方式，那么this指向的是父组件

36. List列表

列表是一种容器，当列表项达到超过List容器组件大小时会自动滚动

ListItem为列表项，填写列表的组件

主轴方向： .listDirection(Axis.Horizontal)
交叉轴布局：.lanes(列数，间距)
列对齐方式：.alignListItem(ListItemAlign.Center)
滚动条状态：.scrollBar(BarState.Auto)
分割线样式：.divider({ ... }) //例如可以添加startWith设置宽度，color设置颜色

37. iconfont使用

官网：iconfont-阿里巴巴矢量图标库

优势：任意缩放不失真，可以修改颜色

将所使用的图标加入购物车，然后添加入项目中，最后下载至本地

创建fonts目录，将下载好的文件粘贴到fonts目录，方便使用图标字体

点击uuid,在项目中即可使用Unicode引入图标字体

使用的方式是\u + Unicode的x后面的字符串

示例：

在HarmonyOS的ArkUI框架中，aboutToAppear是一个组件的生命周期函数，它在组件即将出现在屏幕上时被调用。这个生命周期函数是在组件被创建并准备好显示之前执行的，通常用于执行一些初始化操作，比如加载资源、注册字体、请求数据等。

在给出的代码示例中，aboutToAppear函数用于注册一个自定义字体，这样在组件构建时，就可以使用这个字体来显示文本。这是在组件可见之前完成的，确保用户在看到界面时，所有的字体都已经正确加载和渲染。

// 引入字体模块
import font from '@ohos.font';

// 声明一个名为Index的组件，作为页面的入口
@Entry
@Component
struct Index {

  // 组件即将出现时的生命周期函数
  aboutToAppear():void{
    // 注册自定义字体
    // 'homeFont'是字体家族名，用于后续引用
    // '/fonts/iconfont.ttf'是字体文件路径
    font.registerFont({
      familyName:'homeFont',
      familySrc:'/fonts/iconfont.ttf'
    })

  }

  // 构建函数，用于定义组件的UI结构
  build(){
      // 创建一个垂直布局的Column容器
      Column(){
        // 显示信封图标
        // '\ue673'是图标的Unicode编码
        // fontSize设置字体大小
        // fontFamily指定使用注册的自定义字体
        Text('\ue673')
          .fontSize(100)
          .fontFamily('homeFont')

        // 显示up主图标
        Text('\ue665')
          .fontSize(100)
          .fontFamily('homeFont')

        // 显示游戏机图标
        Text('\ue613')
          .fontSize(100)
          .fontFamily('homeFont')

        // 显示点赞图标
        Text('\uec7f')
          .fontSize(100)
          .fontFamily('homeFont')

      // 设置Column的宽度和高度为100%
      }.width('100%')
      .height('100%')
  }
}

显示效果：

38. @Link 双向同步

父组件的可以将状态属性传递给子组件，子组件通过@Link修饰即可；

@Link是双向同步的，而@Prop只能父传子

如果子组件的后代也要与父组件和子组件进行数据双向同步，使用@Link修饰即可

示例效果显示：（点击父组件或者子组件的修改数据，都会进行数据的同步修改）

示例：

@Entry
@Component
struct Index {

  @State count:number = 0

  build(){
      Column(){
        Text('父组件')
         .fontSize(100)
        Text(this.count.toString())
        Button('修改数据')
          .onClick(()=>{
            this.count++
          })
        SonComponent({
          count:this.count
        })

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

@Component
struct SonComponent{

  @Link count:number
  build(){
    Column(){
      Text('子组件')
        .fontSize(100)
      Text(this.count.toString())
      Button('修改数据')
        .onClick(()=>{
          this.count++
        })
    }
  }
}