0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式组件:Navigation

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-06-26 09:43 次阅读

Navigation

Navigation组件一般作为Page页面的根容器,通过属性设置来展示页面的标题栏、工具栏、导航栏等。

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。从API Version 9开始,推荐与[NavRouter]组件搭配使用。

接口

Navigation

Navigation()

Navigation10+

Navigation(pathInfos: NavPathStack)

绑定路由栈到Navigation组件。

参数

参数名参数类型必填参数描述
pathInfos[NavPathStack]路由栈信息

属性

除支持[通用属性]外,还支持以下属性:

名称参数类型描述
title[ResourceStr]10+[CustomBuilder]8+
menusArray<[NavigationMenuItem]>[CustomBuilder]8+
titleMode[NavigationTitleMode]页面标题栏显示模式。 默认值:NavigationTitleMode.Free
toolbarConfiguration10+Array<[ToolbarItem]10+>[CustomBuilder]8+
hideToolBarboolean隐藏工具栏。 默认值:false true: 隐藏工具栏。 false: 显示工具栏。
hideTitleBarboolean隐藏标题栏。 默认值:false true: 隐藏标题栏。 false: 显示标题栏。
hideBackButtonboolean隐藏返回键。 默认值:false true: 隐藏返回键。 false: 显示返回键。 不支持隐藏NavDestination组件标题栏中的返回图标。**说明:**返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。
navBarWidth9+[Length]导航栏宽度。 默认值:240 单位:vp**说明:**仅在Navigation组件分栏时生效。
navBarPosition9+[NavBarPosition]导航栏位置。 默认值:NavBarPosition.Start**说明:**仅在Navigation组件分栏时生效。
mode9+[NavigationMode]导航栏的显示模式。 默认值:NavigationMode.Auto 自适应:基于组件宽度自适应单栏和双栏。**说明:**支持Stack、Split与Auto模式。
backButtonIcon9+string[PixelMap]
hideNavBar9+boolean是否显示导航栏。 默认值:false
navDestination10+builder: (name: string, param: unknown) => void创建NavDestination组件。**说明:**使用builder函数,基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件, 但自定义组件不允许设置属性和事件,否则仅显示空白。
navBarWidthRange10+[[Dimension], [Dimension]]导航栏最小和最大宽度(双栏模式下生效)。 默认值:最小默认值 240,最大默认值为组件宽度的40% ,且不大于 432。 单位:vp 规则: 开发者设置优先级 > 默认值 最小值优先级 > 最大值 navBar 优先级 > content优先级 开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。
minContentWidth10+[Dimension]导航栏内容区最小宽度(双栏模式下生效)。 默认值:360 单位:vp 规则: 开发者设置优先级 > 默认值 最小值优先级 > 最大值 navBar优先级 > content优先级 开发者设置多个值冲突,以全局数值优先,局部最小值跟随容器大小。 Auto模式断点计算:默认600vp,minNavBarWidth(240vp) + minContentWidth (360vp)

事件

名称功能描述
onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)当titleMode为NavigationTitleMode.Free时,随着可滚动组件的滑动标题栏模式发生变化时触发此回调。
onNavBarStateChange(callback: (isVisible: boolean) => void)导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示,为false时表示隐藏。

NavPathStack10+

Navigation路由栈。

pushPath10+

pushPath(info: NavPathInfo): void

将info指定的NavDestination页面信息入栈。

参数:

名称类型必填描述
info[NavPathInfo]NavDestination页面的信息。

pushPathByName10+

pushPathByName(name: string, param: unknown): void

将name指定的NavDestination页面信息入栈,传递的数据为param。

参数:

名称类型必填描述
namestringNavDestination页面名称。
paramunknownNavDestination页面详细参数。

pop10+

pop(): NavPathInfo | undefined

弹出路由栈栈顶元素。

返回值:

类型说明
NavPathInfo返回栈顶NavDestination页面的信息。
undefined当路由栈为空时返回undefined。

popToName10+

popToName(name: string): number

回退路由栈到第一个名为name的NavDestination页面。

参数:

名称类型必填描述
namestringNavDestination页面名称。

返回值:

类型说明
number如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的索引,否则返回-1。

popToIndex10+

popToIndex(index: number): void

回退路由栈到index指定的NavDestination页面。

参数:

名称类型必填描述
indexnumberNavDestination页面的位置索引。

moveToTop10+

moveToTop(name: string): number

将第一个名为name的NavDestination页面移到栈顶。

参数:

名称类型必填描述
namestringNavDestination页面名称。

返回值:

类型说明
number如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的当前索引,否则返回-1。

moveIndexToTop10+

moveIndexToTop(index: number): void

将index指定的NavDestination页面移到栈顶。

参数:

名称类型必填描述
indexnumberNavDestination页面的位置索引。

clear10+

clear(): void

清除栈中所有页面。

getAllPathName10+

getAllPathName(): Array

获取栈中所有NavDestination页面的名称。

返回值:

类型说明
Array返回栈中所有NavDestination页面的名称。

getParamByIndex10+

getParamByIndex(index: number): unknown | undefined

获取index指定的NavDestination页面的参数信息。

参数:

名称类型必填描述
indexnumberNavDestination页面的位置索引。

返回值:

类型说明
unknown返回对应NavDestination页面的参数信息。
undefined传入index无效时返回undefined。

getParamByName10+

getParamByName(name: string): Array

获取全部名为name的NavDestination页面的参数信息。

参数:

名称类型必填描述
namestringNavDestination页面名称。

返回值:

类型说明
Array返回全部名为name的NavDestination页面的参数信息。

getIndexByName10+

getIndexByName(name: string): Array

获取全部名为name的NavDestination页面的位置索引。

参数:

名称类型必填描述
namestringNavDestination页面名称。

返回值:

类型说明
Array返回全部名为name的NavDestination页面的位置索引。

size10+

size(): number

获取栈大小。

返回值:

类型说明
number返回栈大小。

NavPathInfo10+

路由页面信息。

constructor

constructor(name: string, param: unknown)

参数:

名称类型必填描述
namestringNavDestination页面名称。
paramunknownNavDestination页面详细参数。

NavigationMenuItem类型说明

名称类型必填描述
valuestringAPI Version 9: 显示菜单栏单个选项的文本。 API Version 10: 不显示菜单栏单个选项的文本。
iconstring菜单栏单个选项的图标资源路径。
action() => void当前选项被选中的事件回调。

object类型说明

名称类型必填描述
valuestring工具栏单个选项的显示文本。
iconstring工具栏单个选项的图标资源路径。
action() => void当前选项被选中的事件回调。

ToolbarItem10+类型说明

名称类型必填描述
valueResourceStr工具栏单个选项的显示文本。
iconResourceStr工具栏单个选项的图标资源路径。
action() => void当前选项被选中的事件回调。
status[ToolbarItemStatus]工具栏单个选项的状态。 默认值:ToolbarItemStatus.NORMAL
activeIconResourceStr工具栏单个选项处于ACTIVE态时的图标资源路径。

ToolbarItemStatus10+枚举说明

名称描述
NORMAL设置工具栏单个选项为NORMAL态,该选项显示默认样式,可以触发Hover,Press,Focus事件并显示对应的多态样式。
DISABLED设置工具栏单个选项为DISABLED态, 该选项显示DISABLED态样式,并且不可交互。
ACTIVE设置工具栏单个选项为ACTIVE态, 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。

NavigationTitleMode枚举说明

名称描述
Free当内容为可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样。**说明:**标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效,设置成其余自定义节点类型时字体样式无法变化,下拉时只影响标题栏偏移。
Mini固定为小标题模式。
Full固定为大标题模式。

NavigationCommonTitle类型说明

名称类型必填描述
mainstring设置主标题。
substring设置副标题。

NavigationCustomTitle类型说明

名称类型必填描述
builder[CustomBuilder]设置标题栏内容。
height[TitleHeight][Length]

NavBarPosition枚举说明

名称描述
Start双栏显示时,主列在主轴方向首部。
End双栏显示时,主列在主轴方向尾部。

NavigationMode枚举说明

名称描述
Stack导航栏与内容区独立显示,相当于两个页面。
Split导航栏与内容区分两栏显示。 以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示 1.当navBarWidth属性的值,在navBarWidthRange属性的值范围以外时,navBarWidth按如下规则显示: navBarWidth < minNavBarWidth时,navBarWidth修正为minNavBarWidth; navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth - 分割线宽度(1vp)大于maxNavBarWidth时,navBarWidth修正为maxNavBarWidth; navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth - 分割线宽度(1vp)小于minNavBarWidth时,navBarWidth修正为minNavBarWidth; navBarWidth > maxNavBarWidth,且组件宽度 - minContentWidth - 分割线宽度(1vp)在navBarWidthRange范围内,navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth。 2.当navBarWidth属性的值,在navBarWidthRange属性的值范围以内时,navBarWidth按如下规则显示: minNavBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时,navBarWidth修正为minNavBarWidth; minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度,且navBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时,navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth; minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度,且navBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度时,navBarWidth为设置的值。 3.缩小组件尺寸时,先缩小内容区的尺寸至minContentWidth,然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小,先缩小内容区,内容区消失后再缩小导航栏。 4.设置导航栏为固定尺寸时,若持续缩小组件尺寸,导航栏最后压缩显示。 5.若只设置了navBarWidth属性,则导航栏宽度为navBarWidth,且分割线不可拖动。
AutoAPI version 9之前:窗口宽度>=520vp时,采用Split模式显示;窗口宽度<520vp时,采用Stack模式显示。 API version 10及以上:窗口宽度>=600vp时,采用Split模式显示;窗口宽度<600vp时,采用Stack模式显示,600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。

TitleHeight枚举说明

名称描述
MainOnly只有主标题时标题栏的推荐高度(56vp)。
MainWithSub同时有主标题和副标题时标题栏的推荐高度(82vp)。HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151450.png

说明:

目前可滚动组件只支持List。

示例

示例1

// xxx.ets
class A {
  text: string = ''
  num: number = 0
}

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

  @Builder NavigationTitle() {
    Column() {
      Text('Title')
        .fontColor('#182431')
        .fontSize(30)
        .lineHeight(41)
        .fontWeight(700)
      Text('subtitle')
        .fontColor('#182431')
        .fontSize(14)
        .lineHeight(19)
        .opacity(0.4)
        .margin({ top: 2, bottom: 20 })
    }.alignItems(HorizontalAlign.Start)
  }

  @Builder NavigationMenus() {
    Row() {
      Image('common/ic_public_add.svg')
        .width(24)
        .height(24)
      Image('common/ic_public_add.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
      Image('common/ic_public_more.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
    }
  }

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width('90%')
          .height(40)
          .backgroundColor('#FFFFFF')
          .margin({ top: 8 })

        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) = > {
            ListItem() {
              Text('' + item)
                .width('90%')
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: number) = > item.toString())
        }
        .height(324)
        .width('100%')
        .margin({ top: 12, left: '10%' })
      }
      .title(this.NavigationTitle)
      .menus(this.NavigationMenus)
      .titleMode(NavigationTitleMode.Full)
      .toolbarConfiguration([
        {
          value: $r("app.string.navigation_toolbar_add"),
          icon: $r("app.media.ic_public_highlightsed")
        },
        {
          value: $r("app.string.navigation_toolbar_app"),
          icon: $r("app.media.ic_public_highlights")
        },
        {
          value: $r("app.string.navigation_toolbar_collect"),
          icon: $r("app.media.ic_public_highlights")
        }
      ])
      .hideTitleBar(false)
      .hideToolBar(false)
      .onTitleModeChange((titleModel: NavigationTitleMode) = > {
        console.info('titleMode' + titleModel)
      })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

zh-cn_image_navigation

示例2

// Index.ets
import { pageOneTmp } from './pageOne'
import { pageTwoTmp } from './pageTwo'
import { pages }  from './pageTwo'

@Entry
@Component
struct NavigationExample {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      pageOneTmp()
    } else if (name === 'pageTwo') {
      pageTwoTmp({ names: name, values: this.pageInfos } as pages)
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈
          })
      }
    }.title('NavIndex').navDestination(this.PageMap)
  }
}
// pageOne.ets
class tmpClass{
  count:number=10
}
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            let tmp = new tmpClass()
            this.pageInfos.pushPathByName('pageTwo', tmp) //将name指定的NavDestination页面信息入栈,传递的数据为param
          })
        Button('popToname', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.popToName('pageTwo') //回退路由栈到第一个名为name的NavDestination页面
            console.log('popToName' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.popToName('pageTwo')))
          })
        Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.popToIndex(1) // 回退路由栈到index指定的NavDestination页面
            console.log('popToIndex' + JSON.stringify(this.pageInfos))
          })
        Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.moveToTop('pageTwo') // 将第一个名为name的NavDestination页面移到栈顶
            console.log('moveToTop' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.moveToTop('pageTwo')))
          })
        Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.moveIndexToTop(1) // 将index指定的NavDestination页面移到栈顶
            console.log('moveIndexToTop' + JSON.stringify(this.pageInfos))
          })
        Button('clear', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.clear() //清除栈中所有页面
          })
        Button('get', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            console.log('-------------------')
            console.log('获取栈中所有NavDestination页面的名称', JSON.stringify(this.pageInfos.getAllPathName()))
            console.log('获取index指定的NavDestination页面的参数信息', JSON.stringify(this.pageInfos.getParamByIndex(1)))
            console.log('获取全部名为name的NavDestination页面的参数信息', JSON.stringify(this.pageInfos.getParamByName('pageTwo')))
            console.log('获取全部名为name的NavDestination页面的位置索引', JSON.stringify(this.pageInfos.getIndexByName('pageOne')))
            console.log('获取栈大小', JSON.stringify(this.pageInfos.size()))
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() = > {
      this.pageInfos.pop() // 弹出路由栈栈顶元素
      console.log('pop' + '返回值' + JSON.stringify(this.pageInfos.pop()))
      return true
    })
  }
}
// pageTwo.ets

export class pages {
  names: string = ""
  values: NavPathStack | null = null
}

@Builder
export function pageTwoTmp(info: pages) {
  NavDestination() {
    Column() {
      Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
        .width('80%')
        .height(40)
        .margin(20)
        .onClick(() = > {
          (info.values as NavPathStack).pushPathByName('pageOne', null)
        })
    }.width('100%').height('100%')
  }.title('pageTwo')
  .onBackPressed(() = > {
    (info.values as NavPathStack).pop()
    return true
  })
}

navigation.gif

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    512

    浏览量

    17816
  • 鸿蒙
    +关注

    关注

    57

    文章

    2345

    浏览量

    42822
收藏 人收藏

    评论

    相关推荐

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    轨迹。状态与数据管理状态数据管理作为基于ArkTS声明开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
    发表于 01-17 15:09

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 551次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS声明组件:DataPanel

    数据面板组件,用于将多个数据占比情况使用占比图进行展示。
    的头像 发表于 06-21 09:42 405次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:DataPanel

    鸿蒙ArkTS声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 422次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Marquee

    鸿蒙ArkTS声明组件:NavDestination

    作为NavRouter组件的子组件,用于显示导航内容区。
    的头像 发表于 06-27 14:05 487次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:NavDestination

    鸿蒙ArkTS声明组件:PatternLock

    图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
    的头像 发表于 06-27 09:59 455次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:PatternLock

    鸿蒙ArkTS声明组件:【RichText】

    富文本组件,解析并显示HTML格式文本。
    的头像 发表于 06-29 09:35 715次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:【RichText】

    鸿蒙ArkTS声明组件:ScrollBar

    滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
    的头像 发表于 07-01 15:52 520次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:ScrollBar

    鸿蒙ArkTS声明组件:Span

    作为Text组件的子组件,用于显示行内文本的组件
    的头像 发表于 07-01 09:14 458次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Span

    鸿蒙ArkTS声明组件:StepperItem

    用作[Stepper]组件的页面子组件
    的头像 发表于 07-02 17:47 405次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:StepperItem

    鸿蒙ArkTS声明组件:TextArea

    多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
    的头像 发表于 07-02 15:02 677次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextArea

    鸿蒙ArkTS声明组件:TextInput

    单行文本输入框组件
    的头像 发表于 07-03 09:14 949次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextInput

    鸿蒙ArkTS声明组件:TextPicker

    滑动选择文本内容的组件
    的头像 发表于 07-03 15:07 473次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextPicker

    鸿蒙ArkTS声明组件:TextTimer

    通过文本显示计时信息并控制其计时器状态的组件
    的头像 发表于 07-03 17:06 505次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextTimer

    鸿蒙ArkTS声明组件:XComponent

    可用于EGL/OpenGLES和媒体数据写入,并显示在XComponent组件
    的头像 发表于 07-05 09:56 681次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:XComponent