了解更多请访问：鸿蒙技术社区，与华为官方共建https://ost.51cto.com3.5行容器组件3.4节，在自定义左侧带有图标的按钮时，我们使用了Row容器组件。什么是Row容器组件？Row容器组件称为沿水平方向的布局容器，Column容器组件称为沿垂直方向的布局容器。定向布局容器，我将两者都称为线性布局容器。Row容器组件的用法与Column容器组件类似。@Entry@ComponentstructRowExample{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('水平子组件布局间距').fontSize(14).fontColor('#CCCCCC').width('90%')Text('居中对齐，默认对齐，不可写').fontSize(14).fontColor('#CCCCCC').width('90%')Row({space:4}){Text('A').width('50%').height('100%').fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)文本('B').width('50%').height('100%').fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)}.height(50)。width(300)Text('底部对齐').fontSize(14).fontColor('#CCCCCC').width('90%')Row(){Text('A').width('50%').height(50).fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)Text('B').width('50%').height(60).fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)}.alignItems(垂直对齐.Bottom).width('90%').height(100)Text('topalignment').fontSize(14).fontColor('#CCCCCC').width('90%')Row(){Text('A').width('50%').height(50).fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)Text('B').width('50%'.height(60).fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)}.alignItems(VerticalAlign.Top).width('90%').height(100)}.width('100%').height('100%')}}3.6实现页面跳转通过对容器组件、组件、装饰器的理解，在3.4小节中，实现了标题栏区域的功能按钮布局。如何点击按钮进入绑定页面如何？本节继续带大家了解页面跳转（又称路由跳转）。路由跳转有两种形式：通过路由容器组件Navigator或者路由RouterAPI接口实现页面间的跳转。3.6.1Navigator路由容器组件Navigator路由容器组件用于对组件进行包装，使其具有路由和跳转的能力。例如，它包含了Text文本组件，并设置了样式，使其可以提供类似于HTML中a标签的功能。使用target和type属性控制跳转目标页面和路由方式。//navigationExample.ets@Entry@ComponentstructNavigationExample{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Navigator({target:'pages/simple/routerApiExample',type:NavigationType.Push}){Text('跳转到RouterApiExample页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8)}.margin({bottom:12})Navigator({target:'pages/simple/routerApiExample',type:NavigationType.Replace}){Text('使用RouterApiExample页面更换当前页').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8)}}.width('100%').height('100%')}}//routerExample.ets@Entry@ComponentstructRouterApiExample{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Navigator({target:'pages/simple/navigationExample',type:NavigationType.Back}){Text('返回导航示例页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8)}}.width('100%').height('100%')}}注：点击【跳转到RouterApiExample页面】按钮跳转到页面，点击【返回NavigationExample页面】按钮返回页面。点击【用RouterApiExample页面替换当前页面】按钮跳转到该页面，销毁当前页面，无法返回。3.6.2RouterAPIAPI接口也提供页面路由功能。需要在对应页面导入模块，使用组件的onClick方法跳转页面。要使用它，您需要在页面顶部引入importrouterfrom'@system.router'。//navigationExample.etsimportrouterfrom'@system.router';@Entry@ComponentstructNavigationExample{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('Navigator路由容器组件').fontSize(14).fontColor('#CCCCCC').width('90%')Navigator({target:'pages/simple/routerApiExample',type:NavigationType.Push}){Text('跳转到RouterApiExample页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8))}.margin({bottom:12})Navigator({target:'pages/simple/routerApiExample',type:NavigationType.Replace}){Text('用RouterApiExample页面替换当前页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8)}.margin({bottom:12})Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')Text('返回到RouterApiExample页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8).onClick(()=>{router.back({uri:'pages/simple/routerApiExample'})})}.width('100%').height('100%')}}//routerApiExample.etsimport路由器来自'@system.router';@Entry@ComponentstructRouterApiExample{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')Text('跳转到NavigationExample页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8).margin({bottom:12}).onClick(()=>{router.push({uri:'pages/simple/navigationExample'})})Text('用NavigationExample页面替换当前页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8).margin({bottom:12}).onClick(()=>{router.replace({uri:'pages/simple/navigationExample'})})Text('Navigator路由容器组件'.fontSize(14).fontColor('#CCCCCC').width('90%')Navigator({target:'pages/simple/navigationExample',type:NavigationType.Back}){Text('返回NavigationExample页面').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor('#cccccc').height(54).padding(8).borderRadius(8)}}.width('100%').height('100%')}}3.7标题栏区域按钮添加页面跳转newscience.ets（科学计算器），housingLoan.ets（抵押计算器）、programmer.ets（程序员计算器）、history.ets（历史）四个页面介绍routerAPI接口。importrouterfrom'@system.router'为按钮添加点击事件。//在bindMenu菜单元素的action中添加路由跳转{value:"Science",action:()=>{router.push({uri:'pages/science'})}},//赋权history为记录按钮添加一个onClick事件。onClick(()=>{router.push({uri:'pages/history'})})总结本节简单介绍Row容器组件和路由跳转，下一节继续完成我们的标准计算器。更多信息请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com
