HarmonyOS之组件的使用

一容器

1.1 容器分类

Column表示沿垂直方向布局的容器。

Row表示沿水平方向布局的容器。

1.2 主轴和交叉轴

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向

交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

1.3 对齐

justifyContent：设置子组件在主轴方向上的对齐格式。

alignItems：设置子组件在交叉轴方向上的对齐格式。

主轴方向的对齐（justifyContent）:

Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

Center：元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。

End：元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

交叉轴方向的对齐（alignItems）

Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐）:

Start：设置子组件在水平方向上按照起始端对齐。

Center（默认值）：设置子组件在水平方向上居中对齐。

End：设置子组件在水平方向上按照末端对齐。

Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐）:

Top：设置子组件在垂直方向上居顶部对齐。

Center（默认值）：设置子组件在竖直方向上居中对齐。

Bottom：设置子组件在竖直方向上居底部对齐。

二基础组件：

2.1 Text

Text组件用于在界面上展示一段文本信息，可以包含子组件Span组件用于在界面上展示一段文本信息，可以包含子组件Span

TypeScript 复制代码

@Entry
@Component
struct TextDemo {
  build() {
    Row() {
      Column() {
        Text('HarmonyOS')
        Text('HarmonyOS')
          .fontColor(Color.Blue)
          .fontSize(20)
          .fontStyle(FontStyle.Italic)
          .fontWeight(FontWeight.Bold)
          .fontFamily('Arial')
      }
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
  }
}

2.2 Image

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来，示例如下：

TypeScript 复制代码

Image($r("app.media.image2"))
  .objectFit(ImageFit.Cover)
  .backgroundColor(0xCCCCCC)
  .width(100)
  .height(100)

2.3 TextInput

TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置，下面的示例代码实现了一个简单的输入框：

TypeScript 复制代码

TextInput()
  .fontColor(Color.Blue)
  .fontSize(20)
  .fontStyle(FontStyle.Italic)
  .fontWeight(FontWeight.Bold)
  .fontFamily('Arial')

2.4 Button

Button组件主要用来响应点击操作，可以包含子组件。下面的示例代码实现了一个"登录按钮"：

TypeScript 复制代码

Button('登录', { type: ButtonType.Capsule, stateEffect: true })
  .width('90%')
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .backgroundColor('#007DFF')

2.5 List

List竖向列表，列表往往由多个条目组成，所以我们需要在List组件中写多个ListItem组件来构建列表，这就会导致代码的冗余。使用循环渲染（ForEach）遍历数组的方式构建列表，可以减少重复代码

TypeScript 复制代码

@Entry
@Component
struct ListDemo {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(`${item}`)
              .width('100%')
              .height(100)
              .fontSize(20)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0x007DFF)
          }
        }, item => item)
      }
    }
    .padding(12)
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

2.6 Grid

Grid组件为网格容器，是一种网格列表，由"行"和"列"分割的单元格所组成，通过指定"项目"所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件

TypeScript 复制代码

@Entry
@Component
struct GridExample {
  private arr: String[] = ['0', '1', '2', '3']

  build() {
    Column() {
      Grid() {
        ForEach(this.arr, (day: string) => {
          ForEach(this.arr, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .fontColor(Color.White)
                .backgroundColor(0x007DFF)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
    }
    .width('100%')
    .padding(12)
    .backgroundColor(0xF1F3F5)
  }
}

2.7 AlertDialog

警告弹窗AlertDialog由以下三部分区域构成，对应下面的示意图：

标题区：为可选的。

内容区：显示提示消息。

操作按钮区：用户做"确认"或者"取消"等操作。

TypeScript 复制代码

Button('点击显示弹窗')
  .onClick(() => {
    AlertDialog.show(
      {
        title: '删除联系人', // 标题
        message: '是否需要删除所选联系人?', // 内容
        autoCancel: false, // 点击遮障层时，是否关闭弹窗。
        alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
        offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
        primaryButton: {
          value: '取消',
          action: () => {
            console.info('Callback when the first button is clicked');
          }
        },
        secondaryButton: {
          value: '删除',
          fontColor: '#D94838',
          action: () => {
            console.info('Callback when the second button is clicked');
          }
        },
        cancel: () => { // 点击遮障层关闭dialog时的回调
          console.info('Closed callbacks');
        }
      }
    )
  })

2.8 动画

TypeScript 复制代码

Image(iconItem.imgRes)
  .width(this.iconWidth)
  .position({ x: iconItem.posX })
  .objectFit(ImageFit.Contain)
  .animation({
    duration: 2000,
    tempo: 3.0,
    delay: iconItem.delay,
    curve: Curve.Linear,
    playMode: PlayMode.Normal,
    iterations: 1,
    onFinish: () => {      
      prompt.showToast({ message:"动画播放结束！！！" })
    }
  })

2.9 Web

ArkUI为我们提供了Web组件来加载网页，借助它我们就相当于在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页

加载在线网页

TypeScript 复制代码

@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  build() {
    Column() {
      Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })
    }
  }
}

加载本地网页

TypeScript 复制代码

@Entry
@Component
struct SecondPage {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
    }
  }
}

三网络请求

3.1 生命权限

TypeScript 复制代码

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

3.2 导入http模块

TypeScript 复制代码

import http from '@ohos.net.http';

3.3 创建httpRequest对象

TypeScript 复制代码

let httpRequest = http.createHttp();

3.4 发起http请求

TypeScript 复制代码

let url = "https://EXAMPLE_URL";
let promise = httpRequest.request(
  // 请求url地址
  url,
  {
    // 请求方式
    method: http.RequestMethod.POST,
    // 请求的额外数据。
    extraData: {
      "param1": "value1",
      "param2": "value2",
    },
    // 可选，默认为60s
    connectTimeout: 60000,
    // 可选，默认为60s
    readTimeout: 60000,
    // 开发者根据自身业务需要添加header字段
    header: {
      'Content-Type': 'application/json'
    }
  });

3.5 处理响应结果

TypeScript 复制代码

promise.then((data) => { 
  if (data.responseCode === http.ResponseCode.OK) {
    console.info('Result:' + data.result);
    console.info('code:' + data.responseCode);
  }
}).catch((err) => {
  console.info('error:' + JSON.stringify(err));
});

四三方库的使用

4.1 目前提供了两种途径获取开源三方库：

通过访问Gitee网站开源社区获取，在Gitee中，搜索OpenHarmony-TPC仓库，在tpc_resource中对三方库进行了资源汇总，可以供开发者参考。

通过HarmonyOS开发者官网提供的资源中心获取，进入HarmonyOS开发者官网选择开发>DevEco Service，在DevEco Service页面下找到资源中心，在资源中心找到三方库入口

4.2 lottie动画三方库为例，lottie的安装：通过ohpm执行对应的指令，将lottie安装到项目中。

TypeScript 复制代码

ohpm install @ohos/lottie

4.3 卸载lottie

TypeScript 复制代码

ohpm uninstall @ohos/lottie

4.4 引入lottie，通过import指令在项目中引入lottie到文件中。

TypeScript 复制代码

import lottie from '@ohos/lottie'

4.5 构建Canvas画布

lottie解析JSON动画文件的数据需要基于Canvas 画布进行2D渲染，所以在加载JSON动画之前，要先初始化渲染上下文，并在画面中创建Canvas画布区域，将对应的渲染上下文renderingContext传递给Canvas。

TypeScript 复制代码

// 初始化渲染上下文  
private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) // 设置开启抗锯齿
private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)  // 创建2D渲染上下文

// 加载Canvas画布   
Canvas(this.renderingContext)
  ...

4.6 使用lottie加载JSON动画

加载JSON动画需要用到loadAnimation方法，在方法中需配置相应的初始设置，包括渲染上下文、渲染方式以及JSON动画资源的路径等。可以直接使用lottie.loadAnimation方法，也可以用一个animationItem实例来接收返回的animationItem对象

TypeScript 复制代码

// 用animationItem实例接收
let animationItem = lottie.loadAnimation({
		container: this.renderingContext,            // 渲染上下文
		renderer: 'canvas',                          // 渲染方式
		loop: 10,                                    // 设置为循环播放10次
		autoplay: true,                              // 是否自动播放，默认true
		path: 'common/lottie/data.json',             // json路径
	  })
//或者直接使用      
lottie.loadAnimation({
		container: this.renderingContext,            // 渲染上下文
		renderer: 'canvas',                          // 渲染方式
		loop: true,                                  // 默认为true
		autoplay: true,                              // 是否自动播放，默认true
		path: 'common/lottie/data.json',             // json路径
	  })

4.7 lottie控制动画

TypeScript 复制代码

// 播放、暂停、停止、销毁  可以使用lottie，也可以使用animationItem实例进行控制
lottie.play();        // 从目前停止的帧开始播放
lottie.stop();        // 停止播放，回到第0帧
lottie.pause();       // 暂停该动画，在当前帧停止并保持
lottie.togglePause(); // 切换暂停/播放状态
lottie.destroy();     // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法

// 播放进度控制
animationItem.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
animationItem.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animationItem.goToAndStop(30, true);       // 例：跳转到第30帧并停止
animationItem.goToAndPlay(300);            // 例：跳转到第300毫秒并播放

// 控制帧播放
animationItem.setSegment(5,15);             // 限定动画资源播放时的整体帧范围，即设置动画片段
animationItem.resetSegments(5,15);          // 重置播放的动画片段
animationItem.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
animationItem.playSegments([10,20], false); // 例：播放完之前的片段，播放10-20帧
animationItem.playSegments([[5,15],[20,30]], true); //例： 直接播放5-15帧和20-30帧

// 动画基本属性控制
lottie.setSpeed(speed);         // 设置播放速度，speed为1表示正常速度
lottie.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

// 获取动画帧数属性
animationItem.getDuration();    //获取动画时长

4.8 事件订阅

在一些特殊场景下，比如开始加载动画或者动画播放结束时，可能需要执行相应的操作，在lottie中提供了事件订阅和取消订阅的功能，当触发对应的event，会执行传入的回调函数，用户可以在回调函数中完成要实现的功能

TypeScript 复制代码

// 订阅事件
animationItem.addEventListener(event,function(){
    // TODO something
})

// 取消订阅事件
animationItem.removeEventListener(event,function(){
    // TODO something
})

TypeScript 复制代码

// event事件类型
'enterFrame'   // 每进入一帧就会触发
'loopComplete' // 当前循环下播放（循环播放/非循环播放）结束时触发
'complete'     // 播放完成时触发
'segmentStart' // 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
'destroy'      // 销毁动画时触发
'data_ready'   // 数据准备完成
'DOMLoaded'    // 动画相关dom已经被添加
'error'        // 出现错误
'data_failed'  // 数据加载失败
  ...

HarmonyOS之 组件的使用

HarmonyOS之组件的使用