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

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

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

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

javascript 复制代码
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%')
  }
}
相关推荐
Andy醒几秒前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
软件小伟3 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
yuwinter6 分钟前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
醉の虾24 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
ZZZCY200325 分钟前
华为ENSP--IP编址及静态路由配置
网络·华为
张小小大智慧33 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm42 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue