鸿蒙开发 - 支付宝页面练习

最新推荐文章于 2024-06-25 21:19:55 发布
最新推荐文章于 2024-06-25 21:19:55 发布
阅读量934 收藏 18
点赞数 13
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shr007_/article/details/136746699
版权
这篇文章详细描述了一个使用structIndex构建的应用界面，包括标题区、天气信息、搜索框、轮播图展示多个功能模块，如滴滴出行、生活缴费等，以及市民图片和消费圈的布局。
摘要由CSDN通过智能技术生成

 自己的一个小练习 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {


    Column() {

      Column() {


        // 标题区

        Column() {
          Row() {

            // 天气
            Column() {
              Row() {
                Text('北京')
                Image($r('app.media.zfb_head_down'))
                  .width(15)
              }

              Text('晴2°C')
            }


            // 搜索框
            Row({ space: 5 }) {
              Image($r('app.media.zfb_head_search'))
                .width(20)
                .aspectRatio(1)
              Text('北京交通一卡通32')
              Text()
                .border({
                  width: 1,
                  color: '#cce'
                })
                .width(1)
                .height(10)

              Text('搜索')

            }
            .padding(5)
            .width(215)
            .height(32)
            .backgroundColor(Color.White)
            .borderRadius(8)

            Image($r('app.media.zfb_head_plus'))
              .width(22)
              .fillColor(Color.White)
          }
          .height(60)
          // .alignItems(VerticalAlign.Top)
          .padding(10)
          .justifyContent(FlexAlign.SpaceBetween)
          .width('100%')
          .alignItems(VerticalAlign.Center)


          Row() {

            // 标题第二行

            Image($r('app.media.zfb_top_scan'))
              .width(36)
              .fillColor(Color.White)

            Image($r('app.media.zfb_top_pay'))
              .width(36)
              .fillColor(Color.White)

            Image($r('app.media.zfb_top_travel'))
              .width(36)
              .fillColor(Color.White)

            Image($r('app.media.zfb_tab_money'))
              .width(36)
              .fillColor(Color.White)

          }
          .justifyContent(FlexAlign.SpaceAround)
          .padding({ bottom: 15 })
          .width('100%')

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


        // 轮播图区

        List() {


          ListItem() {
            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav1'))
                .width(28)
              Text('滴滴出行')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {
            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav2'))
                .width(28)
              Text('生活缴费')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav3'))
                .width(28)
              Text('股票')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav4'))
                .width(28)
              Text('蚂蚁森林')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav5'))
                .width(28)
              Text('手机充值')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav6'))
                .width(28)
              Text('余额宝')
                .fontSize(14)
            }
            .alignItems(HorizontalAlign.Center)
            .margin(8)
            .width(58)

          }


          ListItem() {


            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav7'))
                .width(28)
              Text('花呗')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav8'))
                .width(28)
              Text('飞猪出行')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {


            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav9'))
                .width(28)
              Text('淘票票')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {


            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav10'))
                .width(28)
              Text('饿了么')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav10'))
                .width(28)
              Text('饿了么')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {


            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav10'))
                .width(28)
              Text('饿了么')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav11'))
                .width(28)
              Text('读书听书')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {


            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav12'))
                .width(28)
              Text('基金')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {

            //  直播广场

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav15_more'))
                .width(28)
              Text('更多')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }


          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav14'))
                .width(28)
              Text('医疗健康')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }

          // 更多

          ListItem() {

            Column({ space: 8 }) {
              Image($r('app.media.zfb_nav13'))
                .width(28)
              Text('直播广场')
                .fontSize(14)
            }
            .width(58)
            .alignItems(HorizontalAlign.Center)
            .margin(8)

          }

        }
        .backgroundColor('#f6f6f6')
        .scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
        .lanes(3, 5)
        .width('100%')
        // .layoutWeight(1)
        .height(200)
        .borderRadius({
          topLeft: 30,
          topRight: 30
        }) // todo
        // .backgroundColor(Color.Blue)  // todo


        /*Flex({wrap:FlexWrap.Wrap
      })
      {

        Column({space:8}){
          Image($r('app.media.zfb_nav1'))
            .width(28)
          Text('滴滴出行')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)

        Column({space:8}){
          Image($r('app.media.zfb_nav2'))
            .width(28)
          Text('生活缴费')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)


        Column({space:8}){
          Image($r('app.media.zfb_nav3'))
            .width(28)
          Text('股票')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)


        Column({space:8}){
          Image($r('app.media.zfb_nav4'))
            .width(28)
          Text('蚂蚁森林')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)


        Column({space:8}){
          Image($r('app.media.zfb_nav5'))
            .width(28)
          Text('手机充值')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)

        Column({space:8}){
          Image($r('app.media.zfb_nav6'))
            .width(28)
          Text('余额宝')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Center)
        .margin(8)
        .width(58)


        Column({space:8}){
          Image($r('app.media.zfb_nav7'))
            .width(28)
          Text('花呗')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)

        Column({space:8}){
          Image($r('app.media.zfb_nav8'))
            .width(28)
          Text('飞猪出行')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)




        Column({space:8}){
          Image($r('app.media.zfb_nav9'))
            .width(28)
          Text('淘票票')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)

        Column({space:8}){
          Image($r('app.media.zfb_nav10'))
            .width(28)
          Text('饿了么')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)



        Column({space:8}){
          Image($r('app.media.zfb_nav10'))
            .width(28)
          Text('饿了么')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)


        Column({space:8}){
          Image($r('app.media.zfb_nav10'))
            .width(28)
          Text('饿了么')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)



        Column({space:8}){
          Image($r('app.media.zfb_nav11'))
            .width(28)
          Text('读书听书')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)



        Column({space:8}){
          Image($r('app.media.zfb_nav12'))
            .width(28)
          Text('基金')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)

        Column({space:8}){
          Image($r('app.media.zfb_nav13'))
            .width(28)
          Text('直播广场')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)


        Column({space:8}){
          Image($r('app.media.zfb_nav14'))
            .width(28)
          Text('医疗健康')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)

        Column({space:8}){
          Image($r('app.media.zfb_nav15_more'))
            .width(28)
          Text('更多')
            .fontSize(14)
        }
        .width(58)
        .alignItems(HorizontalAlign.Center)
        .margin(8)


      }
      .width('100%')*/


        // 轮播图图片区

        List() {

          ListItem() {
            Image($r('app.media.zfb_pro_pic1'))
              .width(100)
          }
          .margin({
            top: 10,
            left: 10
          })


          ListItem() {
            Image($r('app.media.zfb_pro_pic2'))
              .width(100)
          }
          .margin({
            top: 10,
            left: 10
          })


          ListItem() {
            Image($r('app.media.zfb_pro_pic3'))
              .width(100)

          }
          .margin({
            top: 10,
            left: 10
          })

        }
        .scrollBar(BarState.Off)
        .listDirection(Axis.Horizontal)
        .width('100%')
        // .layoutWeight(1)
        .height(210)  // 不设置高，会被挤压扁
        .backgroundColor('#f6f6f6')
        // .backgroundColor(Color.Red)
        .padding(10)




        // 市民图片和消费圈


        List() {

          ListItem() {

            // 市民图片

            Image($r('app.media.zfb_pro_list1'))
              .width('100%')
          }

          ListItem() {

            // 消费圈

            Row() {

              Image($r('app.media.zfb_pro_list2_1'))
                .width('100%')
            }

          }

        }
        .scrollBar(BarState.Off)
        .width('100%')
        .layoutWeight(1)



        Stack({ alignContent: Alignment.Bottom }) {

          // 底部区

          Row() {

            Image($r('app.media.zfb_tab_home'))
              .width(35)

            Column() {
              Image($r('app.media.zfb_tab_money'))
                .width(25)
              Text('理财')
            }

            Column() {
              Image($r('app.media.zfb_tab_life'))
                .width(25)
              Text('生活')
            }

            Column() {
              Image($r('app.media.zfb_tab_chat'))
                .width(25)
              Text('消息')
            }

            Column() {
              Image($r('app.media.zfb_tab_me'))
                .width(25)
              Text('我的')
            }

          }
          .justifyContent(FlexAlign.SpaceAround)
          .height(60)
          .width('100%')
          .backgroundColor(Color.White)

        }

      }
      .width('100%')
      .height('100%')
      // .backgroundColor('#f6f6f6')
      // .padding(10)
      .backgroundColor('#5b73de') // todo


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

  }
}

 


                

        

        

    

  


    

      

        

            

              
                
                  shr007_
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
鸿蒙HarmonyOS实战-UIAbility页面跳转_鸿蒙os开发uiabillty之间的跳转

				
			

			

				

					2401_84181108的博客
				

				

					04-21
					
					828
					
				

			

		

		

			
				
android.settings.INPUT_METHOD_SUBTYPE_SETTINGS    【API 11及以上】 // 跳转 语言选择界面 【多国语言选择】android.settings.NFC_SETTINGS    显示NFC设置。android.settings.MANAGE_ALL_APPLICATIONS_SETTINGS    跳转到应用程序界面【所有的】android.settings.INTERNAL_STORAGE_SETTINGS    跳转存储设置界面【内部存储】

			
		

	



                

              
                



	

		

			

				
					
零基础开始学习鸿蒙开发-继页面跳转后，页面参数的传递与接收。

				
			

			

				

					qq_36973384的博客
				

				

					12-07
					
					1785
					
				

			

		

		

			
				
【代码】零基础开始学习鸿蒙开发-继页面跳转后，页面参数的传递与接收。

			
		

	



                


  
              

                


	

		

			

				
					
纯血鸿蒙开发实战—如何开发出一个鸿蒙购物应用！

				
			

			

				

					m0_64422261的博客
				

				

					06-06
					
					1549
					
				

			

		

		

			
				
HarmonyOS 支持应用以 Ability 为单位进行部署，Ability 可以分为 FA（Feature Ability）和 PA（Particle Ability）两种类型。

			
		

	





	

		

			

				
					
【鸿蒙开发】使用鸿蒙编写登录页面并跳转

				
			

			

				

					qq_41872338的博客
				

				

					11-21
					
					696
					
				

			

		

		

			
				
新建一个登录页面。

			
		

	



		

			
		



	

		

			

				
					
鸿蒙个人项目-欢迎页面UI及业务实现

				
			

			

				

					m0_73743793的博客
				

				

					06-25
					
					533
					
				

			

		

		

			
				
在 UserPrivacyDialog 中使用了@CustomDialog 装饰器声明弹窗组件，通过controller 控制弹窗的出现，添加了Button 按钮，用来实现首页的跳转与退出。再此基础上，需要完成同意协议弹窗的实现。

			
		

	





	

		

			

				
					
手把手教你写用 ArkTS 完成 HarmonyOS 实战项目编写 —— 支付宝页面仿写

				
			

			

				

					欢迎来到Gorit的博客
				

				

					12-15
					
					2179
					
				

			

		

		

			
				
HarmonOS ArkTS 实战项目

			
		

	





	

		

			

				
					
鸿蒙窗口扩展应用-如何实现点击设置菜单栏，跳转或加载详情页面

				
			

			

				

					2401_82546228的博客
				

				

					04-07
					
					1035
					
				

			

		

		

			
				
本示例仿设置应用，实现点击设置菜单栏，跳转或加载详情页面。

			
		

	





	

		

			

				
					
鸿蒙应用ets之仿黑马智慧商城商品详情页

				
			

			

				

					m0_59926833的博客
				

				

					04-22
					
					915
					
				

			

		

		

			
				
鸿蒙应用开发ets之仿黑马智慧商城项目商品详情页

			
		

	





	

		

			

				
					
HarmonyOS引导页登陆页以及tabbar的代码说明 我的页面6

				
			

			

				

					hzether的博客
				

				

					12-28
					
					509
					
				

			

		

		

			
				
【代码】HarmonyOS引导页登陆页以及tabbar的代码说明 我的页面6。

			
		

	





	

		

			

				
					
零基础开始学习鸿蒙开发-页面导航栏布局设计

				
			

			

				

					06-30
				

			

		

		

			
				
零基础开始学习鸿蒙开发-页面导航栏布局设计

			
		

	





	

		

			

				
					
鸿蒙开发-仿库街区应用

					
最新发布

				
			

			

				

					07-23
				

			

		

		

			
				
包含该项目的所有源码和图片资源

			
		

	





	

		

			

				
					
支付宝（高仿）源码

				
			

			

				

					07-10
				

			

		

		

			
				
等待完成界面：
1.手势解锁界面
2.其他详情页面

已经完成界面：
1.支付宝Home页（可自由对图标进行拖动排序和删除，尚未做持久化存储）
2.二维码、条形码扫描功能
3.服务界面
4.财富界面
5.余*额宝界面（收益数字动态表现）


测试环境：Xcode 6.2，iOS 6.0以上

欢迎有兴趣的同学和我一起努力完善此款APP

			
		

	





	

		

			

				
					
仿支付宝界面。所有图标，旧版本的，喜新版本勿下

				
			

			

				

					11-12
				

			

		

		

			
				
仿支付宝的图标和首页几面， 只有界面的代码，其他的没有，只有图标代码，首页UI  ，请注意

			
		

	





	

		

			

				
					
自定义仿支付宝首页Behavior 实例源码

				
			

			

				

					07-05
				

			

		

		

			
				
一个自己写的博客附带源码

			
		

	





	

		

			

				
					
javaweb支付宝系统_完整源码_精美页面_Mysql数据库文件

				
			

			

				

					05-25
				

			

		

		

			
				
完美！javaweb支付宝系统_完整源码_精美页面_Mysql数据库文件，系统引入即可执行！

			
		

	





	

		

			

				
					
支付宝在线支付静态页面

				
			

			

				

					10-31
				

			

		

		

			
				
支付宝电脑端在线支付DEMO静态页面，页面默认推荐支付宝扫码支付

			
		

	





	

		

			

				
					
零基础开始学习鸿蒙开发-读书app简单的设计与开发

				
			

			

				

					06-30
				

			

		

		

			
				
零基础开始学习鸿蒙开发-读书app简单的设计与开发

			
		

	





	

		

			

				
					
鸿蒙版瑞幸咖啡开发日记（六）详情页与首页联动

				
			

			

				

					stephen_curry300的博客
				

				

					02-16
					
					1487
					
				

			

		

		

			
				
鸿蒙版瑞幸咖啡开发日记之详情页与首页联动1.需实现的功能总结2.详细功能开发2.1 添加已点咖啡到菜单栏2.2 已点咖啡是否展示2.3 陷阱提示

首先我们来看一下最终的实现效果【添加不同的咖啡后，自动更新价格和数量，并且添加到首页底部的已点菜单栏中】


1.需实现的功能总结

点击加入购物车后，首页对应的咖啡右边的数量进行更新，并且底部菜单栏中的总数量进行更新
实时计算所有已点咖啡的预计到手价格
将所有的已点咖啡展示在底部菜单栏中，点击后显示，再次点击后隐藏【当然这里还需要隐藏配送费6元，再买24.6…

			
		

	





	

		

			

				
					
鸿蒙开发【商城列表案例】详细实操

				
			

			

				

					2401_82930760的博客
				

				

					04-20
					
					2101
					
				

			

		

		

			
				
目前商城界面已经支持滑动了，但是最下面的图片还不能完全展示出来，我们需要用.layoutWeight属性设置权重。在Row容器从左到右依次部署Image组件、Column组件，传入数据，并调整Image和Text组件大小。设置容器的间距，以及组件颜色，对容器设置宽度大小，背景颜色，以及字体颜色等。的宽度和高度，以及圆角边框大小，背景颜色。的宽度和高度，以及圆角边框大小，背景颜色。的宽度和高度，以及圆角边框大小，背景颜色。的宽度和高度，以及圆角边框大小，背景颜色。键值生成规则 重复渲染 设置唯一标识。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值