44、鸿蒙/组件/App首页布局

效果

案例

@Component
export struct AppIndex {
  build() {
    //
    Stack({ alignContent:Alignment.BottomEnd }){
      // 导航栏
      Stack({ alignContent: Alignment.TopStart }){
        Column(){
          Text('导航栏')
        }.height(60).backgroundColor(Color.Pink).width('100%')
        .justifyContent(FlexAlign.Center).zIndex(2)
        // 内容区域可滚动
        Scroll(){
          Column(){
            Text('内容').height(200).width('100%').border({width: 1})
            Text('内容').height(200).width('100%').border({width: 1})
            Text('内容').height(200).width('100%').border({width: 1})
            Text('内容').height(200).width('100%').border({width: 1})
            Text('内容').height(200).width('100%').border({width: 1})
            Text('内容').height(200).width('100%').border({width: 1})
          }
        }.padding({
          top: 70,
          bottom: 70
        })
      }.width('100%').height('100%')

      // 底部tabbar
      Row(){
        // 首页
        Column(){
          Image($r('app.media.startIcon')).width(30).height(30)
          Text('首页').fontSize(18).padding({top: 5})
        }.height('100%').justifyContent(FlexAlign.Center)
        .layoutWeight(1)
        // 推荐
        Column(){
          Image($r('app.media.startIcon')).width(30).height(30)
          Text('推荐').padding({top: 5})
        }.height('100%').justifyContent(FlexAlign.Center)
        .layoutWeight(1)
        // 新闻
        Column(){
          Image($r('app.media.startIcon')).width(30).height(30)
          Text('新闻').padding({top: 5})
        }.height('100%').justifyContent(FlexAlign.Center)
        .layoutWeight(1)
        // 我的
        Column(){
          Image($r('app.media.startIcon')).width(30).height(30)
          Text('我的').padding({top: 5})
        }.height('100%').justifyContent(FlexAlign.Center)
        .layoutWeight(1)
     }.backgroundColor(Color.Pink)
      .width('100%').height(60)
      .alignItems(VerticalAlign.Center)

    }.width('100%').height('100%').backgroundColor(Color.Gray)
  }
}