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

2024-08-26 20:28
文章标签 实战 开发 界面 支付宝 首页 鸿蒙

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

在这里插入图片描述
利用了层叠布局和一个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%')}
}

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

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/1109598。

相关文章

PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

《PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例》词嵌入解决NLP维度灾难,捕捉语义关系,PyTorch的nn.Embedding模块提供灵活实现,支持参数配置、预训练及变长... 目录一、词嵌入(Word Embedding)简介为什么需要词嵌入？二、PyTorch中的nn.Em
阅读更多...
在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

《在IntelliJIDEA中高效运行与调试SpringBoot项目的实战步骤》本章详解SpringBoot项目导入IntelliJIDEA的流程,教授运行与调试技巧,包括断点设置与变量查看,奠定... 目录引言：为良驹配上好鞍一、为何选择IntelliJ IDEA？二、实战：导入并运行你的第一个项目步骤1
阅读更多...
Spring Boot3.0新特性全面解析与应用实战

Spring Boot3.0新特性全面解析与应用实战

《SpringBoot3.0新特性全面解析与应用实战》SpringBoot3.0作为Spring生态系统的一个重要里程碑,带来了众多令人兴奋的新特性和改进,本文将深入解析SpringBoot3.0的... 目录核心变化概览Java版本要求提升迁移至Jakarta EE重要新特性详解1. Native Ima
阅读更多...
Spring Boot 与微服务入门实战详细总结

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三
阅读更多...
SpringBoot集成MyBatis实现SQL拦截器的实战指南

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器？二、MyBATis拦截器基础2.1 核心接口：Interceptor
阅读更多...
基于Python开发一个图像水印批量添加工具

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计（扩展版本）二、核心算法深入解析2.1 自
阅读更多...
从入门到进阶讲解Python自动化Playwright实战指南

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习
阅读更多...
Java docx4j高效处理Word文档的实战指南

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.
阅读更多...
MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法：多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析
阅读更多...
Python办公自动化实战之打造智能邮件发送工具

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置：搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2