鸿蒙小案例---支付宝首页（Scroll容器）

效果演示

代码实现

import { window } from '@kit.ArkUI'

interface NavInterface {
  navImg: ResourceStr,
  navTitle: string
}

@Entry
@Component
struct Index {
  @State nav_list: NavInterface[] = [
    {
      navImg: $r('app.media.zfb_nav1'),
      navTitle: '滴滴出行'
    },
    {
      navImg: $r('app.media.zfb_nav2'),
      navTitle: '生活缴费'
    },
    {
      navImg: $r('app.media.zfb_nav3'),
      navTitle: '股票'
    },
    {
      navImg: $r('app.media.zfb_nav4'),
      navTitle: '蚂蚁森林'
    },
    {
      navImg: $r('app.media.zfb_nav5'),
      navTitle: '手机充值'
    },
    {
      navImg: $r('app.media.zfb_nav6'),
      navTitle: '余额宝'
    },
    {
      navImg: $r('app.media.zfb_nav7'),
      navTitle: '花呗'
    },
    {
      navImg: $r('app.media.zfb_nav8'),
      navTitle: '飞猪旅行'
    },
    {
      navImg: $r('app.media.zfb_nav9'),
      navTitle: '淘票票'
    },
    {
      navImg: $r('app.media.zfb_nav10'),
      navTitle: '饿了吗'
    },
    {
      navImg: $r('app.media.zfb_nav11'),
      navTitle: '读书听书'
    },
    {
      navImg: $r('app.media.zfb_nav12'),
      navTitle: '基金'
    },
    {
      navImg: $r('app.media.zfb_nav13'),
      navTitle: '直播广场'
    },
    {
      navImg: $r('app.media.zfb_nav14'),
      navTitle: '医疗健康'
    },
    {
      navImg: $r('app.media.zfb_nav15_more'),
      navTitle: '更多'
    },
  ]

  async aboutToAppear() {
    let w = await window.getLastWindow(getContext())
    w.setWindowSystemBarProperties({
      statusBarColor: '#000',
      statusBarContentColor: '#000'
    })
  }

  build() {
    // 思路:
    // 1、整体的Stack布局 + 底部的Tab导航栏
    // 2、主题区域的架子： 头部 + 主题页面 （层叠关系，主题页面可滚动）
    Stack({ alignContent: Alignment.Bottom }) {
      //   主体展示区
      Stack({ alignContent: Alignment.Top }) {
        //   头部
        Row() {
          // 左边
          Column() {
            /*
            Row() {
              Text('北京')
                .fontColor('#fff')
                .fontSize(18)
              Image($r('app.media.zfb_head_down'))
                .fillColor('#fff')
                .width(10)
            }
            .margin({ right: 12 })

            Text('晴 2℃')
              .fontColor('#fff')
              .fontSize(12)
             */

            Text('北京')
              .fontColor('#fff')
              .fontSize(18)
            Text('晴 2℃')
              .fontColor('#fff')
              .fontSize(12)
            Image($r('app.media.zfb_head_down'))
              .fillColor('#fff')
              .width(12)
              .position({
                x: 40,
                y: 0
              })
          }

          // .alignItems(HorizontalAlign.Start)
          // .margin({right: 12})

          // 中间
          Row() {
            Image($r('app.media.zfb_head_search'))// .fillColor('#fff')
              .width(20)
              .fillColor('#666')
              .margin({ left: 5 })

            Text('北京交通一卡通')
              .layoutWeight(1)
              .margin({ left: 8 })

            Text('搜索')
              .fontColor('#5b73de')
              .fontWeight(700)
              .width(55)// .backgroundColor(Color.Pink)
              .textAlign(TextAlign.Center)
              .border({
                width: { left: 1 },
                color: '#ccc'
              })
          }
          // .justifyContent(FlexAlign.SpaceBetween)
          .layoutWeight(1)
          .height(32)
          .backgroundColor('#fff')
          .borderRadius(5)
          .margin({ left: 25, right: 12 })

          // 右边
          Image($r('app.media.zfb_head_plus'))
            .fillColor('#fff')
            .width(30)
        }
        .width('100%')
        .height(60)
        .backgroundColor('#5b73de')
        .zIndex(1)
        .padding({ left: 10, right: 10 })

        //   主体页面
        Scroll() {
          Column() {
            // 顶部快捷按钮
            Row() {
              Column() {
                Image($r('app.media.zfb_top_scan'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }

              Column() {
                Image($r('app.media.zfb_top_pay'))
                  .width(36)
                  .fillColor('#fff')
                Text('首付款')
                  .fontColor('#fff')
              }

              Column() {
                Image($r('app.media.zfb_top_travel'))
                  .width(36)
                  .fillColor('#fff')
                Text('出行')
                  .fontColor('#fff')
              }

              Column() {
                Image($r('app.media.zfb_top_card'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }

              // .justifyContent(FlexAlign.Center)
            }
            .padding({ top: 5, bottom: 15 })
            .backgroundColor('#5b73de')
            .width('100%')
            .justifyContent(FlexAlign.SpaceAround)

            // 主题内容区
            Column() {
              // 导航区
              Grid() {
                ForEach(this.nav_list, (item: NavInterface) => {
                  GridItem() {
                    Column({ space: 8 }) {
                      Image(item.navImg)
                        .width(28)
                      Text(item.navTitle)
                        .fontSize(12)
                        .fontColor('#666')
                    }
                  }
                })
              }
              .rowsTemplate('1fr 1fr 1fr')
              .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
              .height(200)

              // 产品区
              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)
              }
              .width('100%')
              .padding(10)

              // 市民中心
              Column({ space: 10 }) {
                Image($r('app.media.zfb_pro_list1'))
                  .width('100%')
                Image($r('app.media.zfb_pro_list2'))
                  .width('100%')
              }
              .padding(10)
            }
            .width('100%')
            .backgroundColor('#f6f6f6')
            .borderRadius({
              topLeft: 20,
              topRight: 20
            })
            .height(1000)

          }
          .width('100%')
          .padding({ top: 60, bottom: 60 })
        }

      }
      .width('100%')
      .height('100%')

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

        Column() {
          Image($r('app.media.zfb_tab_money'))
            .width(28)
            .margin({ bottom: 2 })
          Text('理财')
          // .fontSize(28)
        }


        Column() {
          Image($r('app.media.zfb_tab_life'))
            .width(28)
            .margin({ bottom: 2 })
          Text('生活')
          // .fontSize(28)
        }

        Column() {
          Image($r('app.media.zfb_tab_chat'))
            .width(28)
            .margin({ bottom: 2 })
          Text('消息')
          // .fontSize(28)
        }

        Column() {
          Image($r('app.media.zfb_tab_me'))
            .width(28)
            .margin({ bottom: 2 })
          Text('我的')
          // .fontSize(28)
        }

      }
      .height(60)
      .width('100%')
      .backgroundColor('#fbfcfe')
      .justifyContent(FlexAlign.SpaceAround)

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#5b73de')

    // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}