OpenHarmony应用开发-基础组件TextTimer/TimePicker/XComponent/

素年锦时静待君丶

发布于 2023-4-14 15:45

浏览

0收藏

版本：v3.2 Release

TextTimer

通过文本显示计时信息并控制其计时器状态的组件。

说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })

参数：

参数名	参数类型	必填	参数描述
isCountDown	boolean	否	是否倒计时。默认值：false
count	number	否	倒计时时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为倒计时初始值。否则，使用默认值为倒计时初始值。默认值：60000
controller	TextTimerController	否	TextTimer控制器。

属性

名称	参数类型	描述
format	string	自定义格式，需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式，则使用默认值。默认值：‘HH:mm:ss.SS’

事件

名称	功能描述
onTimer(event: (utc: number, elapsedTime: number) => void)	时间文本发生变化时触发。 utc：Linux时间戳，即自1970年1月1日起经过的毫秒数。 elapsedTime：计时器经过的时间，单位为毫秒。

TextTimerController

TextTimer组件的控制器，用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。

导入对象

textTimerController: TextTimerController = new TextTimerController()

start

start()

计时开始。

pause

pause()

计时暂停。

reset

reset()

重置计时器。

示例

// xxx.ets
@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row() {
        Button("start").onClick(() => {
          this.textTimerController.start()
        })
        Button("pause").onClick(() => {
          this.textTimerController.pause()
        })
        Button("reset").onClick(() => {
          this.textTimerController.reset()
        })
      }
    }
  }
}

OpenHarmony应用开发-基础组件TextTimer/TimePicker/XComponent/-鸿蒙开发者社区

TimePicker

时间选择组件，根据指定参数创建选择器，支持选择小时及分钟。

说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

TimePicker(options?: {selected?: Date})

默认以24小时的时间区间创建滑动选择器。

参数：

参数名	参数类型	必填	参数描述
selected	Date	否	设置选中项的时间。默认值：当前系统时间

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
useMilitaryTime	boolean	展示时间是否为24小时制，不支持动态修改。默认值：false

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange(callback: (value: TimePickerResult ) => void)	选择时间时触发该事件。

TimePickerResult对象说明

名称	参数类型	描述
hour	number	选中时间的时。
minute	number	选中时间的分。

示例

时间选择器

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  @State isMilitaryTime: boolean = false
  private selectedTime: Date = new Date('2022-07-22T08:00:00')

  build() {
    Column() {
      Button('切换12小时制/24小时制')
        .margin({ top: 30 })
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime
        })
      TimePicker({
        selected: this.selectedTime,
      })
        .useMilitaryTime(this.isMilitaryTime)
        .onChange((value: TimePickerResult) => {
          this.selectedTime.setHours(value.hour, value.minute)
          console.info('select current date is: ' + JSON.stringify(value))
        })
    }.width('100%')
  }
}

Toggle

组件提供勾选框样式、状态按钮样式及开关样式。

说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

仅当ToggleType为Button时可包含子组件。

接口

Toggle(options: { type: ToggleType, isOn?: boolean })

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数:

参数名	参数类型	必填	参数描述
type	ToggleType	是	开关的样式。
isOn	boolean	否	开关是否打开，true：打开，false：关闭。默认值：false

ToggleType枚举说明

+从API version 9开始，该接口支持在ArkTS卡片中使用。

名称	描述
Checkbox	提供单选框样式。说明：通用属性margin的默认值为： { top: 12 vp, right: 12 vp, bottom: 12 vp, left: 12 vp }
Button	提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Switch	提供开关样式。说明：通用属性margin默认值为： { top: 14 vp, right:6 vp, bottom: 6 vp, left: 14 vp }

属性

除支持通用属性外，还支持以下属性：

名称	参数	参数描述
selectedColor	ResourceColor	设置组件打开状态的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
switchPointColor	ResourceColor	设置Switch类型的圆形滑块颜色。 > 说明： > 仅对type为ToggleType.Switch生效。从API version 9开始，该接口支持在ArkTS卡片中使用。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange(callback: (isOn: boolean) => void)	开关状态切换时触发该事件。从API version 9开始，该接口支持在ArkTS卡片中使用。说明： isOn为true时，代表状态从关切换为开。isOn为false时，代表状态从开切换为关。

示例

// xxx.ets
@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
  }
}

OpenHarmony应用开发-基础组件TextTimer/TimePicker/XComponent/-鸿蒙开发者社区

XComponent

可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。

说明：
该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

构造参数type为"Surface"时不支持。

从API version 9开始，构造参数type为"component"时可以包含子组件。

接口

XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})

参数:

参数名	参数类型	必填	描述
id	string	是	组件的唯一标识，支持最大的字符串长度128。
type	string	是	用于指定XComponent组件类型，可选值为： -“Surface”：用于EGL/OpenGLES和媒体数据写入，组件内容单独送显，直接合成到屏幕。 -“component”⁹⁺ ：XComponent将变成一个容器组件，并可在其中执行非UI逻辑以动态加载显示内容。
libraryname	string	否	应用Native层编译输出动态库名称，仅XComponent类型为"Surface"时有效。
controller	XComponentcontroller	否	给组件绑定一个控制器，通过控制器调用组件方法，仅XComponent类型为"Surface"时有效。

说明：
type为"component"时，XComponent作为容器，子组件沿垂直方向布局：
垂直方向上对齐格式：FlexAlign.Start
水平方向上对齐格式：FlexAlign.Center
所有的事件响应均不支持。
布局方式更改和事件响应均可通过挂载子组件来设置。
内部所写的非UI逻辑需要封装在一个或多个函数内。

属性

XComponent显示的内容，可由开发者自定义绘制，通用属性不支持背景设置、透明度设置和图像效果。
type为"Surface"时建议使用EGL/OpenGLES提供的接口设置相关内容。
type为"component"时建议使用挂载子组件的方式进行设置相关内容。

事件

仅type为"Surface"时以下事件有效。不支持通用事件和手势。

onLoad

onLoad(callback: (event?: object) => void )

插件加载完成时回调事件。

参数:

参数名	参数类型	必填	描述
event	object	否	获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。

onDestroy

onDestroy(event: () => void )

插件卸载完成时回调事件。

XComponentController

xcomponent 组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。

创建对象

xcomponentController: XComponentController = new XComponentController()

getXComponentSurfaceId

getXComponentSurfaceId(): string

获取XComponent对应Surface的ID，供@ohos接口使用，使用方式可参考相机管理，仅XComponent类型为"Surface"时有效。

返回值:

类型	描述
string	XComponent持有Surface的ID。

setXComponentSurfaceSize

setXComponentSurfaceSize(value: {SurfaceWidth: number, SurfaceHeight: number}): void

设置XComponent持有Surface的宽度和高度，仅XComponent类型为"Surface"时有效。

参数:

参数名	参数类型	必填	描述
SurfaceWidth	number	是	XComponent持有Surface的宽度。
SurfaceHeight	number	是	XComponent持有Surface的高度。

getXComponentContext

getXComponentContext(): Object

获取XComponent实例对象的context，仅XComponent类型为"Surface"时有效。

返回值:

类型	描述
Object	获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。

示例

示例效果请以真机运行为准，当前IDE预览器不支持。

// xxx.ets
@Entry
@Component
struct PreviewArea {
  private SurfaceId : string =''
  xcomponentController: XComponentController = new XComponentController()
  build() {
    Row() {
      XComponent({
        id: 'xcomponent',
        type: 'Surface',
        controller: this.xcomponentController
      })
        .onLoad(() => {
          this.xcomponentController.setXComponentSurfaceSize({SurfaceWidth:1920,SurfaceHeight:1080});
          this.SurfaceId = this.xcomponentController.getXComponentSurfaceId()
        })
        .width('640px')
        .height('480px')
    }
    .backgroundColor(Color.Black)
    .position({x: 0, y: 48})
  }
}

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()

  build() {
    Column() {
      Button('saveCookie')
        .onClick(() => {
          let result = this.controller.getCookieManager().saveCookie()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller

文章转载自：https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md/

分类

卡片开发

三方件

标签

OpenHarmony

已于2023-4-14 15:45:50修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-基础组件TextTimer/TimePicker/XComponent/

TextTimer

子组件

接口

属性

事件

TextTimerController

导入对象

start

pause

reset

示例

TimePicker

子组件

接口

属性

事件

TimePickerResult对象说明

示例

时间选择器

Toggle

子组件

接口

ToggleType枚举说明

属性

事件

示例

XComponent

子组件

接口

属性

事件

onLoad

onDestroy

XComponentController

创建对象

getXComponentSurfaceId

setXComponentSurfaceSize

getXComponentContext

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看