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