鸿蒙界面开发（四）：支付宝首页开发实战

利用了层叠布局和一个scroll滚动组件。

包括底部导航、顶部导航、主体的滚动窗口。

主体的滚动窗口又包括一个快捷导航栏和一个导航窗口、以及主体部分

import text from '@ohos.graphics.text';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  //支付宝首页·
  build() {
    Stack({alignContent:Alignment.Bottom}){
      //顶部导航
      Stack({alignContent:Alignment.Top}){
        Row(){
          Column(){
            Text('北京')
              .fontSize(18)
              .fontColor('#fff')
            Text('晴 37C')//摄氏度的符号怎么打
              .fontSize(12)
              .fontColor('#fff')
            Image($r('app.media.zfb_head_down'))
              .width(12)
              .fillColor('#fff')
              .position({
                x:40,
                y:0
              })

          }

          Row(){
            Image($r('app.media.zfb_head_search'))
              .width(20)
              .fillColor('#666')
              .margin({left:5, right:5})
            Text('北京交通一卡通')
              .layoutWeight(1)
            Text('搜索')
              .width(55)
              .fontColor('#5b73de')
              .fontWeight(700)
              .textAlign(TextAlign.Center)
              .border({
                width:{left:1},
                color:'#ccc'
              })
          }.height(32)
          .layoutWeight(1)//自适应屏幕
          .backgroundColor('#fff')
          .borderRadius(5)
          .margin({left:25, right:12})

          Image($r('app.media.zfb_head_plus'))
            .width(30)
            .fillColor('#fff')
        }.width('100%')
        .height(60)
        .backgroundColor('#5b7fde')
        .zIndex(666)
        .padding({left:10,right:10})
        //Column和Row默认都没有滚动的效果
        // Column(){
        //
        // }
        //利用Scroll实现主体滚动部分
        Scroll(){
          Column(){
            //top快捷按钮
            Row(){
              Column(){
                Image($r('app.media.zfb_top_scan'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }.layoutWeight(1)
              Column(){
                Image($r('app.media.zfb_top_pay'))
                  .width(36)
                  .fillColor('#fff')
                Text('收付款')
                  .fontColor('#fff')
              }.layoutWeight(1)
              Column(){
                Image($r('app.media.zfb_top_travel'))
                  .width(36)
                  .fillColor('#fff')
                Text('出行')
                  .fontColor('#fff')
              }.layoutWeight(1)
              Column(){
                Image($r('app.media.zfb_top_card'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }.layoutWeight(1)
            }.width('100%')
              .padding({top:5,bottom:15})
              .backgroundColor('#5b7fde')

            //主体导航区
            Column({space:10}){
              Row(){
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
              }.width('100%')
              Row(){
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
              }.width('100%')
              Row(){
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
                Column(){
                  Image($r('app.media.zfb_nav1'))
                    .width(28)
                    .margin({bottom:8})
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)
              }.width('100%')
            }
              .width('100%')
              .borderRadius({
                topLeft:20,
                topRight:20
              })
              .padding(10)
              .backgroundColor(Color.White)

            //产品区
            Row({space:5}){
              Image($r('app.media.zfb_pro_pic1'))
                .layoutWeight(1)
              Image($r('app.media.zfb_pro_pic2'))
                .layoutWeight(1)
              Image($r('app.media.zfb_pro_pic3'))
                .layoutWeight(1)
            }.backgroundColor(Color.White)
            Column(){
              Image($r('app.media.zfb_pro_list1'))
                .width('100%')
              Image($r('app.media.zfb_pro_list2'))
                .width('100%')
            }.backgroundColor(Color.White)
          }.width('100%')
          .backgroundColor('#5b73de')

        }.width('100%')
        .padding({top:60,bottom:60})
      }.width('100%')
      .height('100%')//占用全部空间

      //底部导航栏
      Row(){
        Column(){
          Image($r('app.media.zfb_tab_home'))
            .width(35)

          // Text('首页')
          // .fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r('app.media.zfb_tab_money'))
            .width(28)

          Text('理财')
            .fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r('app.media.zfb_tab_life'))
            .width(28)

          Text('生活')
            .fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r('app.media.zfb_tab_chat'))
            .width(28)

          Text('消息')
            .fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r('app.media.zfb_tab_me'))
            .width(28)

            .margin({bottom:2})
          Text('我的')
            .fontSize(12)
        }.layoutWeight(1)
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.White)
    }.width('100%')
    .height('100%')
  }
}