HarmonyOS：组件Navigation使用中List显示不全的问题探究以及解决办法

1.线性布局中在使用NavPathStack布局中中发现如果使用List组件会发现item显示不全，在使用官方提供的例子中也发现此问题。

如图所示：

底部被遮挡，官方示例的写法

2.如果线性布局中，不显示导航栏，也会出现List被遮挡的问题

如图所示：

我们的页面布局中的List缺失一部分

根据Previewer中的分析
如图所示：

Navigation组件的高度是给的整个屏幕的高度，如果我们加了ToolBar，那么List的区域需要减去toolbar的高度，这个系统不会帮我们自动计算的，需要设置内间距，距离就是toolbar的高度

List({ space: 12 }) {
          ForEach(this.arr, (item:string) => {
            ListItem() {
              NavRouter() {
                Text("NavRouter" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("NavDestinationContent" + item)
                }
                .title("NavDestinationTitle" + item)
              }
            }
          }, (item:string):string => item)
        }
        .width("90%")
        //内边距的高度需要减去toolbar的高度
        .padding({ bottom: 60 })

更复杂的是我的项目中，因为我的例子中，没有显示导航的titile，顶部是搜索框，中间是tabs，底部也是tabs，list的区域更小，这时候设置内间距也不行，还是会出现显示不全的问题，需要隐藏title才行，方法 .hideTitleBar(true)

build() {
    Column(){
      Navigation(this.pageStack) {
        Row(){
            Search({ value: this.changeValue, placeholder: '请输入搜索条件', controller: this.searchController })
              .backgroundColor($r('app.color.main_input_bg_color'))
              .placeholderColor(Color.Grey)
              .placeholderFont({ size: 14, weight: 400 })
              .textFont({ size: 14, weight: 400 })
              .enterKeyType(EnterKeyType.Search)
              .margin({top:10,left:12,right:12})
              .height(44)
              .width('80%')
        }
        .backgroundColor($r('app.color.main_nav_bg_color'))
        .height(64)
        .width('100%')
        Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.tabController }) {
          TabContent() {
            //list在此自定义组件内，底部的tabbar高度要减去
            TodayVisitRoutePage({blockController:this.BlockRef,selectRouteItem:this.selectRouteItem}).padding({bottom:60});
          }.tabBar(this.tabBuilder(0, 'green'))

          TabContent() {
            TodayVisitStorePage();
          }.tabBar(this.tabBuilder(1, 'blue'))
        }
        .vertical(false)
        .barMode(BarMode.Fixed)
        .barWidth('100%')
        .barHeight(60)
        .animationDuration(400)
        .onChange((index: number) => {
          this.currentIndex = index;
          this.changeTabIndex();
        })
      }
      .width('100%')
      .height('100%')
      .margin({ top: 0 })
      .padding({bottom:0})
      .backgroundColor($r('app.color.main_input_bg_color'))
      //隐藏导航标题
      .hideTitleBar(true)
    }

这样就可以正确计算出来组件List的高度了，才不会遮挡或者高度不够的问题。
结语：一起学习，探索，可以私信问我要示例。