鸿蒙断点系统使首页响应式

响应式的能力使得鸿蒙能够适应多个设备，断点系统查询正是响应式的能力之一

通过查询断点系统的查询，得知设备的尺寸从而让不同的布局方式适配。

初始化断点查询系统

bpSystem: BreakpointSystem = new BreakpointSystem()
@StorageProp(BreakPoint) breakPoint: string = 'xs'

生命周期开始就调用

aboutToAppear(): void {
  Log.info({name:'register',age:18})
  this.bpSystem.register()
}

当设备为大屏时，tab栏在左侧，否则在下方显示

Tabs({ barPosition: this.breakPoint=='lg'?BarPosition.Start:BarPosition.End }) {
  ForEach(this.list, (item: TabItem, index: number) => {
    TabContent() {

      if(index===0){
        HomeView()
      }else if(index===1){
        CategoryView()
      }else if(index===2){
        CartView()
      }else{
        MyView()
      }

    }
    .tabBar(this.TabItemBuilder(item, index))
  })

}
.scrollable(false)
.onTabBarClick(index => {
  this.activeIndex = index
})
.vertical(this.breakPoint=='lg'?true:false)