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

本文主要是介绍鸿蒙界面开发（四）：支付宝首页开发实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

利用了层叠布局和一个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%')}
}

这篇关于鸿蒙界面开发（四）：支付宝首页开发实战的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---