34、鸿蒙/布局/顶部导航栏案例

• 案例：在移动端布局案例中经常会使用到导航栏，文章针对该案例进行实现；
• 思路：首先分析布局为从左到右，使用行(Row)布局来实现移动端顶部导航栏效果，左边为返回按钮（暂且先以图片代替），中间为标题栏文本，右边则为辅助功能（暂且以图片代替），效果图和代码如下：

效果图

代码：

@Component
export struct NavLayout {
  build() {
    Column(){
      Row(){
        Image($r('app.media.startIcon'))
          .height(40).width(40)
        Text('个人中心')
        Image($r('app.media.startIcon'))
          .height(40).width(40)
      }.height(50).width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left: 10, right: 10})
      .backgroundColor(Color.White)
    }.backgroundColor(Color.Gray)
    .height('100%')
    .width('100%')
  }
}