ArkTS快速入门----Harmony OS 开发(第四期)

freejackman

已于 2025-04-19 15:54:55 修改

阅读量1.1k

点赞数 10

分类专栏： Harmony OS 文章标签：前端 harmonyos 华为

于 2024-01-19 00:45:55 首次发布

本文链接：https://blog.csdn.net/qq_56109699/article/details/135687089

版权

文章目录

ArkTS快速入门

ArkTS快速入门

初始例程解析

装饰器:用来装饰结构体,方法,变量,赋予其特殊含义

@Entry 标记当前组件是入口组件，即可以作为一个独立页面直接访问,若没有该装饰器,则该组件不能被独立访问，只能作为其他组件的陪衬。一个页面只能有一个@Entry修饰的组件,加载页面时会首先创建并呈现@Entry标记的组件,只有@Entry修饰的组件及其子组件才能被显示在页面上。
@Component 标记下面这个是自定义组件----(组件可以理解为模块，可以直接将整体拿来使用)。
@State 标记该变量是状态变量,其值的变化会触发与其关联的组件的刷新(即所有调用了该变量的组件的刷新)。
@Link 标记的变量可以与父组件的@State变量建立双向数据绑定，任何一方做的修改都会使另一方一同改变。 @Link变量不能在组件内部进行初始化。@Link 标记的变量必须在生命周期函数中完成初始化。

在这里插入图片描述

如上图一，在父组件RankPage中通过’$'操作符创建"引用",使父组件中的isSwitchDataSource与子组件TitleComponent中定义的isRefreshData进行双向数据绑定。

5.@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

捕获.PNG

如上图，@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化

@Builder 按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。

在这里插入图片描述

@Builder 就是用于页面构建的装饰器，表示其后面的函数可以用来构建页面(只要函数被调用)，函数可以定义在组件外(全局页面构建函数),也可以定义在组件内部(局部页面构建函数，此时不用加function关键字)。

7.@Styles 就是用于页面构建样式的装饰器,表示其后面的函数可以用来构建页面的样式(只要函数被调用---- .函数名())，要求：函数内部的所有样式必须是通用样式。

在这里插入图片描述

8.@Extend(组件名a) 就是与@Styles 装饰器类似,只是其后面的函数中的样式不全是通用样式，其中有样式为a的特有样式。注意:@Extern 只能定义在全局，不能定义在组件内。

9.@Provide和@Consume 就是 @Provide修饰的状态变量自动对提供者组件的所有后代组件可用，后代组件通过使用@Consume装饰的变量来获得对提供的状态变量的访问。@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染，反之同理，@Consume 修饰的变量不用初始化，但要求变量名与祖先组件一致(方便绑定)，也就是说：@Consume装饰的变量通过相同的属性名绑定其祖先组件内的@Provide装饰的变量

内置组件: ArkUI提供的组件,分为两种:

1.容器组件:用来完成页面布局，如Row(该组件内部的所有元素自动成为一行),Column(该组件内部的所有元素自动成为一列)。

2.基础组件:自带样式和功能的页面元素,如Text。

3.自定义组件: 将上面两种组件组合,可以直接拿来使用。

属性方法:设置对应组件的UI样式。

例子:

.fontSize(50)            //字体大小
.fontWeight(FontWeight.Bold)   //字体宽度
.fontColor("#16B")    //字体颜色
.height('100%')       //字体高度占满

事件方法:设置该组件的触发的事件。

例子:

.onClick(()=>{
             //点击事件
  //……处理点击事件
  this.message="hello ArkTS!"
})

给组件传参数

值传递(默认)

捕获.PNG
上图就是默认的参数传递----值传递，Text()标签调用本组件内部的变量content,外部调用ToDoItem()组件时要为变量content进行初始化，形式:ToDoItem({变量名:值});

引用传递

捕获.PNG

上图便是按引用传递,用$$ : {参数名1:参数类型,参数名2:参数类型……}接收。函数体内要使用参数:$$.参数名。外部调用组件时，变量初始化的方式与值传递的一致。

关于${……}

${……}是一种JavaScript中的模板字符串语法，用于在字符串中插入动态的变量或表达式。

生命周期函数

自定义组件生命周期：指自定义组件从创建到销毁的整个过程。

提供了两个生命周期回调函数 aboutToAppear(),aboutToDisappear(),前者在创建自定义组件后，执行build组件前自动调用，可用于初始化页面要展示的数据或申请定时器资源。 后者在该自定义组件被销毁时调用，可用于释放不再使用的资源。

在这里插入图片描述

对于@Entry标记的页面入口组件,系统还单独给出了三个生命周期回调函数:onPageShow(),onBackPress(),onPageHide(),第一个函数在页面每次显示时触发，第二个函数在用户点击返回键回到另一个页面时调用(原页面存在)，返回值为true时，由页面处理返回逻辑，页面不返回，返回false时由系统处理返回逻辑(默认)，第三个函数在用户删除本页面时调用。

循环渲染

循环渲染:使用ForEach迭代数组，并为每个数组项创建相应组件。

ForEach()有三个参数，参数1为数组，用于存储要展示的所有数据，可以为空数组，为空数组时，不会创建子组件。参数2为数组中的每个元素创建对应的组件，固定参数:item:数组中的数据项,index:数组中的数据项索引（可选），参数3(string类型)为数据源的每个数组项生成唯一且持久的键值,
函数返回值为开发者自定义的键值生成规则,如果参数未填，则框架默认的键值生成函数为
(item: T, index: number) => { return index + ‘__’ + JSON.stringify(item); }

网络权限申请

凡是涉及到网络，都有提前申请权限。

权限类型分为system_grant(系统授权)和user_grant(用户授权)两种类型。

申请网络权限步骤:

1.官网点击文档—>指南—>开发—>安全—>访问控制授权申请

2.点击应用权限列表，查看你要申请的权限类型,分为system_grant(系统授权)和user_grant(用户授权)两种类型。

捕获.PNG

3.查看权限属性表，若为system_grant(系统授权),则只需要填写"name"这一个属性,否则这要参考下表看是否填写:

捕获.PNG

4.回到项目，找到module.json5文件

在这里插入图片描述

5.找到下图位置，添加"requestPermissions":[],可以看出其是一个数组，在这个数组以一个{}为一组作为一个申请权限，如下图就代表两个权限。

捕获.PNG

6.更改完成后，保存文件module.json5即可。

基础组件

Image组件

声明Image组件

1.string 格式，通常用来加载网络图片，需要申请网络访问权限: ohos.permission.INTERNET—权限名

Image('http://xxx.png') //图片网络地址

2.PixelMap 格式，可以加载像素图，常用在图片编辑中

Image(pixelMapObject)

Resource格式，加载本地图片，推荐使用

Image($r('app.media.图片名'))    
//app. 是固定写法，  
//media.图片名  是resource文件夹下的base下的图片路径，无后缀

Image($rawfile('图片名.后缀'))      //resource文件夹下
                                  //的rawfile下的图片路径

Image组件属性

.width(100)  //图片宽度
.height(120)   //图片高度
.borderRadius(10)    //边框圆角(让图片边缘变圆滑)
.backgroundColor(0xCCCCCC)   //设置图片背景色为灰色
.interpolation(ImageInterpolation.High)    //图片插值，
                                            //消除锯齿

设置缩放类型

//设置图片的缩放类型，objectFit的参数类型为ImageFit
.objectFit(ImageFit.Cover)

//ImageFit包含以下几种类型：
   //Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内
   //Cover（默认值）:保持宽高比进行缩小或者放大，使得图片
      //两边都大于或等于显示边界
      
   //Auto：自适应显示
   //Fill：不保持宽高比进行放大缩小，使得图片充满显示边界
   //ScaleDown：保持宽高比显示，图片缩小或者保持不变
   //None：保持原有尺寸显示

Text组件

声明Text组件

string格式，直接填写文本内容

Text('图片宽度')
Resource格式,读取本地资源文件

Text($r(‘app.string.关键字’))

//这样文本可以根据设备环境的不同而自动改变

//限定词目录 ----en_US(英文),zh_CN(中文):里面存储的是一些文本资源,系统根据设备语言环境，自动选择目录，访问string.json文件,查找匹配的关键字,返回其对应的value。

若几个目录中未找到匹配的关键字，则进入base目录中的string.json文件查找

string.json配置对应文本

找到三个目录下的string.json文件
如下图:

捕获.PNG

在文件中，以一个{}为一组，"name"属性就是查找对应文本的关键字,"value"属性就是显示在页面上的文本。

3.按照上面格式创建新的本地文本即可。

Text组件属性

.lineHeight(32)  //行高
.fontSize(20)    //字体大小
.fontColor('#ff1876f8')   //字体颜色
.fontWeight(FontWeight.Medium)   //字体粗细,参数类型就是下表中的FontWeight类

.textAlign(TextAlign.Start)  //文本对齐，TextAlign类分为
//Start(默认)水平对齐首部,Center水平居中对齐, End水平对齐尾部

设置文本超长显示

//当文本内容较多超出了Text组件范围的时候，
//您可以使用textOverflow设置文本截取方式，
//需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。

 .maxLines(1)    //最大显示一行
 .textOverflow({
   overflow:TextOverflow.Ellipsis})  
 //overflow的类型为TextOverflow.Ellipsis
 //将textOverflow设置为Ellipsis,它将显示不下的文本用 "..." 表示

设置文本装饰线

//使用decoration设置文本装饰线样式及其颜色,decoration包含type和color两个参数，
//其中type用于设置装饰线样式，参数类型为TextDecorationTyp，color为可选参数。

 .decoration({
    type: TextDecorationType.Underline, color: Color.Black })
 //TextDecorationTyp包含以下几种类型:
    //None：不使用文本装饰线
    //Overline：文字上划线修饰
    //LineThrough：穿过文本的修饰线
    //Underline：文字下划线修饰

TextInput组件

TextInput组件用于输入单行文本，响应输入事件。

声明TextInput组件

TextInput({ placeholder: '请输入账号' })

TextInput组件属性

TextInput()
  .fontColor(Color.Blue)    //字体颜色
  .fontSize(20)            //字体大小
  .fontStyle(FontStyle.Italic)  //字体形式 
  .fontWeight(FontWeight.Bold)    //字体粗细
  .fontFamily('Arial')      //字体

设置输入提示文本

提示功能使用placeholder属性,还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式

TextInput({
    placeholder: '请输入账号' })
  .placeholderColor(0x999999)    //设置提示文字颜色
  .placeholderFont({
    size: 20, weight: FontWeight.Medium, 
  family: 'cursive', style: FontStyle.Italic })
  //设置提示文字样式

设置输入类型

可以使用type属性来设置输入框类型。

TextInput({
    placeholder: '请输入密码' })
  .type(InputType.Password)      //设置输入框为密码框类型
  
  //type的参数类型为InputType
  //Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
  //Password：密码输入模式
  //Email：e-mail地址输入模式
  //Number：纯数字输入模式

获取输入文本

可以给TextInput设置onChange事件，输入文本发生变化时触发回调，实时获取用户输入的文本信息。

 .onChange((value: string) => {
   
    this.text = value
 })

Button组件

Button组件主要用来响应点击事件，可以包含子组件。

声明Button组件

Button('按钮上显示的文本', { type: ButtonType.Capsule, stateEffect: true })

 //第一个参数类型是ButtonType,用于设置按钮显示样式,
 //ButtonType 有三种类型:
 //Capsule：胶囊型按钮（圆角默认为高度的一半）
 //Circle：圆形按钮。
 //Normal：普通按钮（默认不带圆角）
 
 //第二个参数类型是boolean,用于按钮按下时是否开启
 //按压态显示效果

Button组件属性

  .width('90%')   //按钮宽度
  .height(40)    //按钮高度
  .fontSize(16)   //按钮字体大小
  .fontWeight(FontWeight.Medium)   //按钮字体粗细
  .backgroundColor('#007DFF')  //按钮背景颜色

设置按钮点击事件

  .onClick(() => {
   
  // 处理点击事件逻辑
  })

按钮可以包含子组件

Button({
    type: ButtonType.Circle, stateEffect: true }) {
   
  Image($r('app.media.icon_delete')) 
    .width(30)
    .height(30)
      //按钮中包含了图片,则这个图片就是按钮。
}
.width(55)
.height(55)
.backgroundColor(0x317aff)

Slider组件(滑块)

声明Slider组件

Slider({max:100,min:0,value:40,step:10,style:SliderStyle.OutSet,direction:Axis.Horizontal,reverse:false})

Slider({参数……})

max 进度条最大值

min 进度条最小值

value 当前滑块所在进度条的位置对应的值

step 步长，每次滑动变化的值

style:SliderStyle.InSet 滑块在进度条内部还是外部
(style:SliderStyle.OutSet)

direction:Axis.Horizontal 进度条是水平还是垂直的
(direction:Axis.Vertical)

reverse :false 是否反向滑动（即水平的进度条变为max在左，
min在右,垂直的进度条变为max在上，min在下）

OutSet与Inset样式

Slider组件属性

.width('90%')    //进度条的宽
.showTips(true)  //是否展示value的百分比提示
.blockColor('#36d')  //滑块颜色
.onChange((value)=>{
   
     //进度条改变时的响应事件，value就是当前滑块值   
})

LoadingProgress组件

LoadingProgress组件用于显示加载进展，比如应用的登录界面，当我们点击登录的时候，显示的“正在登录”的进度条状态。

LoadingProgress组件声明与属性

LoadingProgress()
  .color(Color.Blue)
  .height(60)
  .width(60)

Video组件

Video组件可以帮助 实现视频的播放功能并控制其播放状态，常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。

声明Video组件

Video({src,currentProgressRate,previewUri,controller})

其中包含四个可选参数:src、currentProgressRate、previewUri和controller。

src表示视频播放源的路径，可以支持本地视频路径和网络路径,使用网络地址,需要注意的是需要在module.json5文件中申请网络权限:"ohos.permission.INTERNET"。
currentProgressRate表示视频播放倍速，其参数类型为
PlaybackSpeed
，取值支持
(PlaybackSpeed.Speed_Forward_1_00_X),
Speed_Forward_0_75_X,Speed_Forward_2_00_X…………，
默认值为1.0倍速。
previewUri表示视频未播放时的预览图片路径
controller表示视频控制器

捕获.PNG

Video组件属性

除了支持组件的尺寸设置、位置设置等通用属性外,还有私有的一些属性:

.muted()     //是否静音。默认值：false
.au

最低0.47元/天解锁文章