鸿蒙界面开发(四):支付宝首页开发实战

在这里插入图片描述
利用了层叠布局和一个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%')
  }
}
华为鸿蒙HarmonyOS开发整理资料汇总,共38份。 1学前必读:HarmonyOS学习资源主题分享 2学前必读:OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述:技术特性 3-2.HarmonyOS概述:开发工具与平台 3-3.HarmonyOS概述:系统安全 3-4.HarmonyOS概述:系统定义 3-5.HarmonyOS概述:下载与安装软件 3-6.HarmonyOS概述:应用开发基础知识 3-7.HarmonyOS概述:最全HarmonyOS文档和社区资源使用技巧 4-1.生态案例:【开发者说】重塑经典,如何在HarmonyOS手机上还原贪吃蛇游戏 4-2.生态案例:HarmonyOLabo涂鸦鸿蒙亲子版 4-3.生态案例:HarmonyOS分镜头APP案例 4-4.生态案例:HarmonyOS时光序历史学习案例 4-5.生态案例:HarmonyOS先行者说 宝宝巴士携手HarmonyOS共同打造儿童教育交互新体验 4-6.生态案例:HarmonyOS智能农场物联网连接实践 4-7.生态案例:分布式开发样例,带你玩转多设备 4-8.生态案例:华为分布式日历应用开发实践 5-1.【Codelab】HarmonyOS基于图像模块实现图库图片的种常见操作 5-2.【CodeLab】手把手教你创建第一个手机“Hello World” 5-3.【Codelab】如此简单!一文带你学会15个HarmonyOS JS组件 5-4.【Codelab】懒人“看”书新法—鸿蒙语音播报,到底如何实现? 5-5.【Codelab】基于AI通用文字识别的图像搜索,这波操作亮了 5-6.【Codelab】开发样例概览 6-1.技术解读之HarmonyOS轻量JS开发框架与W3C标准差异分析 6-2.技术解读之HarmonyOS驱动加载过程分析 6-3.技术解读之HarmonyOS组件库使用实践 6-4.技术解读之华为架构师解读:HarmonyOS低时延高可靠消息传输原理 6-5.技术解读之解密HarmonyOS UI框架 6-6.技术解读之如何从OS框架层面实现应用服务功能解耦 7-1.常见问题之HarmonyOS元服务的设计与开发解析 7-2.常见问题之Java开发 7-3.常见问题之JS开发 7-4.常见问题之模拟器登录 7-5.常见问题之模拟器运行 7-6.常见问题之如何使用JsJava开发HarmonyOS UI 7-7.常见问题之应用配置 7-8.常见问题之预览器运行 8【视频合集】入门到进阶视频学习资料合集30+
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weightOneMillion

感谢未来的亿万富翁捧个钱场~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值