HarmonyOS实战开发：Navigation（基础组件）

最新推荐文章于 2024-08-06 15:07:39 发布
最新推荐文章于 2024-08-06 15:07:39 发布
阅读量1k 收藏 8
点赞数 8
分类专栏： 鸿蒙 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84194030/article/details/139511021
版权

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

说明：

该组件从API Version 8开始支持。

子组件

可以包含子组件。

从API Version 9开始，推荐与NavRouter组件搭配使用。

从API Version 10开始，推荐使用NavPathStack配合navDestination属性进行页面路由。

接口

Navigation()

Navigation(pathInfos: NavPathStack)

绑定路由栈到Navigation组件。

参数：

参数名参数类型必填参数描述
pathInfosNavPathStack否路由栈信息。

属性

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

名称参数类型描述
标题ResourceStr10+ | CustomBuilder | NavigationCommonTitle9+ | NavigationCustomTitle9+页面标题。
说明：
使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。
字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。
subTitle(deprecated)字符串页面副标题。不设置时不显示副标题。从API Version 9开始废弃，建议使用title代替。
menusArray<NavigationMenuItem> | CustomBuilder页面右上角菜单。不设置时不显示菜单项。使用Array<NavigationMenuItem> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
titleModeNavigationTitleMode页面标题栏显示模式。
默认值：NavigationTitleMode.Free
toolBar(deprecated)object | CustomBuilder设置工具栏内容。不设置时不显示工具栏。
items: 工具栏所有项。
说明：
items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。
从API version 10开始，该接口不再维护，推荐使用toolbarConfiguration代替。
toolbarConfiguration10+Array<ToolbarItem> | CustomBuilder设置工具栏内容。不设置时不显示工具栏。
说明：
使用Array<ToolbarItem>写法设置的工具栏有如下特性：
工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。
文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。
竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。
使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。
hideToolBar布尔隐藏工具栏。
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。
hideTitleBar布尔隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。
hideBackButton布尔隐藏返回键。
默认值：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 | Resource设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。
hideNavBar9+布尔是否显示导航栏。
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时表示隐藏。

Navigation路由栈。

pushPath10+

pushPath(info: NavPathInfo): void

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

参数：

名称类型必填描述
infoNavPathInfo是NavDestination页面的信息。

pushPathByName10+

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

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

参数：

名称类型必填描述
namestring是NavDestination页面名称。
paramunknown是NavDestination页面详细参数。

pop10+

pop(): NavPathInfo | undefined

弹出路由栈栈顶元素。

返回值：

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

popToName10+

popToName(name: string): number

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

参数：

名称类型必填描述
namestring是NavDestination页面名称。

返回值：

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

popToIndex10+

popToIndex(index: number): void

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

参数：

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

moveToTop10+

moveToTop(name: string): number

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

参数：

名称类型必填描述
namestring是NavDestination页面名称。

返回值：

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

moveIndexToTop10+

moveIndexToTop(index: number): void

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

参数：

名称类型必填描述
指数数是NavDestination页面的位置索引。

clear10+

clear(): void

清除栈中所有页面。

getAllPathName10+

getAllPathName(): Array<string>

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

返回值：

类型说明
数组<字符串>返回栈中所有NavDestination页面的名称。

getParamByIndex10+

getParamByIndex(index: number): unknown | undefined

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

参数：

名称类型必填描述
指数数是NavDestination页面的位置索引。

返回值：

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

getParamByName10+

getParamByName(name: string): Array<unknown>

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

参数：

名称类型必填描述
名字字符串是NavDestination页面名称。

返回值：

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

getIndexByName10+

getIndexByName(name: string): Array<number>

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

参数：

名称类型必填描述
名字字符串是NavDestination页面名称。

返回值：

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

size10+

size(): number

获取栈大小。

返回值：

类型说明
number返回栈大小。

路由页面信息。

constructor

constructor(name: string, param: unknown)

参数：

名称类型必填描述
namestring是NavDestination页面名称。
paramunknown否NavDestination页面详细参数。
名称类型必填描述
valuestring是API Version 9: 显示菜单栏单个选项的文本。
API Version 10: 不显示菜单栏单个选项的文本。
iconstring否菜单栏单个选项的图标资源路径。
action() => void否当前选项被选中的事件回调。

object类型说明

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

ToolbarItem10+类型说明

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

ToolbarItemStatus10+枚举说明

名称描述
NORMAL设置工具栏单个选项为NORMAL态，该选项显示默认样式，可以触发Hover，Press，Focus事件并显示对应的多态样式。
DISABLED设置工具栏单个选项为DISABLED态， 该选项显示DISABLED态样式，并且不可交互。
ACTIVE设置工具栏单个选项为ACTIVE态， 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。
名称描述
Free当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。
说明：
标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效，设置成其余自定义节点类型时字体样式无法变化，下拉时只影响标题栏偏移。
Mini固定为小标题模式。
Full固定为大标题模式。
名称类型必填描述
mainstring是设置主标题。
substring是设置副标题。
名称类型必填描述
builderCustomBuilder是设置标题栏内容。
heightTitleHeight | Length是设置标题栏高度。
名称描述
Start双栏显示时，主列在主轴方向首部。
End双栏显示时，主列在主轴方向尾部。
名称描述
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）。

说明：

目前可滚动组件只支持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

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。

蜀道衫QAQ
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。 1. 页面跳转分为页面内跳转和页面间跳转。页面内跳转发生在同一个Ability内部，可以通过Router或...
HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能
10-29
在 HarmonyOS 应用开发中，底部导航栏（Bottom Navigation）是用户界面设计的重要组成部分，它为用户提供了一种直观、便捷的方式，以便在多个主功能之间进行切换。本教程将深入探讨如何在 HarmonyOS 应用中实现底部...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Navigation）
m0_64420071的博客
03-11 1915
ArkTS声明式开发（基础手势：Navigation）
HarmonyOS ArkUI实战开发-页面导航（Navigation）
1
04-22 776
Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。
【鸿蒙实战开发】基于Navigation的路由管理
HarmonyOSMN的博客
06-27 1878
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。当前支持的生命周期函数：aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。
HormonyOS第一课第六章习题答案
m0_55660474的博客
06-27 2492
2. WebviewController提供了变更Web组件显示内容的接口，例如可以使用loadData来加载一个网页链接地址改变Web组件的渲染内容。3. Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，可以通过该组件提供的路由能力实现首页与非首页的切换。D. getParamByName方法需要传入一个string类型的页面名称，方法执行完成后会返回第一个页面名称为传入值的页面信息。A. 控制Web组件加载内容。C. 控制Web内容前进后退。D. 加载XML页面。
React技术原理与代码开发实战：React Native中的导航与路由
AI架构设计之禅
11-08 197
作者：禅与计算机程序设计艺术 1.背景介绍 概述 React Native是一个使用JavaScript开发跨平台应用的框架，其优点在于可以实现快速迭代，同时性能也非常优秀。无论是在Android上还是iOS上，React Native都能提供统一的开发体验。在产品
HarmonyOS实战开发：Navigation（组件导航）
2401_84194030的博客
05-10 1323
Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。
鸿蒙HarmonyOS实战开发:Navigation开发页面切换场景
shudaoshanQAQ的博客
04-23 2198
本文就以Navigation页面切换为例，展开讲解Navigation以上的技术点，帮助开发者快速学习。
HarmonyOS实战开发：NavRouter（基础组件）
2401_84194030的博客
06-07 1012
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
HarmonyOS开发实战：Navigation路由管理规范指南
v_maniu110的博客
07-14 1092
Navigation由NavDestination组件组成页面路由，在实现过程中NavDestination组件会被封装在一个自定义组件中，从而作为一个页面被路由栈使用。
HarmonyOS NEXT实战开发：组件导航 (Navigation)
hanyanyou的博客
07-25 648
Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式............
Android-Navigation:Android导航组件
05-09
总之，Android-Navigation组件是Android开发中的强大工具，它极大地简化了应用的导航逻辑，使得开发者能够更加专注于业务功能的实现，提高代码质量和可维护性。通过研究这个项目和相关文章，开发者可以更好地掌握这...
Harmonyos博客文章.zip
12-28
1. **分布式技术**：HarmonyOS的核心之一是分布式能力，它允许不同设备间的硬件资源虚拟化和共享，使得用户可以像操作单个设备一样使用多个设备。分布式任务调度和分布式数据管理是实现这一目标的关键技术。 2. **...
react-navigation-demo:对导航组件react-navigation的使用讲解
05-15
react-navigation导航组件使用详解 注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命令，解决这个错误的办法就是将nodemodules删除，然后使用npm ...
【HarmonyOS NEXT星河版开发学习】小型测试案例06-小红书卡片
最新发布
2302_80329073的博客
08-06 552
在鸿蒙（HarmonyOS）开发中，自适应伸缩是指应用程序能够根据不同设备的屏幕尺寸、分辨率和形态（如手机、平板、电视）自动调整布局和元素大小，以确保用户界面在各种设备上都能良好地显示和使用。约束布局（ConstraintLayout）
鸿蒙图形开发【3D引擎接口示例】
2301_76813281的博客
08-05 1119
本实例主要介绍3D引擎提供的接口功能。提供了@ohos.graphics.scene中接口的功能演示。 3D引擎渲染的画面会被显示在Component3D这一控件中。点击按钮触发不同的功能，用户可以观察渲染画面的改变。
【HarmonyOS NEXT星河版开发学习】小型测试案例01-今日头条置顶练习
2302_80329073的博客
08-05 571
本系列可能是博客首发，鸿蒙开发星河版是一个全新的版本，由于参考视频较少鸿蒙开发不被重视导致csdn上面并没有全套的学习路线，所以我决定分享个人的学习。本人也是正在参照黑马程序员的视频进行逐步学习，并不是这方面的专家。希望大家能够对鸿蒙开发感兴趣。鸿蒙（HarmonyOS）是华为推出的一款全场景分布式操作系统，旨在支持各种设备上的统一操作体验。如果你对鸿蒙开发感兴趣，这里简要介绍一下相关内容：开发语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值