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

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。

相关文章

SpringBoot 多环境开发实战(从配置、管理与控制)

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础（单文件 YAML 版）（一）配置原理与优势（二）实操示例二、多环境开发多文件版
阅读更多...
使用docker搭建嵌入式Linux开发环境

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同
阅读更多...
Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...
从原理到实战解析Java Stream 的并行流性能优化

从原理到实战解析Java Stream 的并行流性能优化

《从原理到实战解析JavaStream的并行流性能优化》本文给大家介绍JavaStream的并行流性能优化：从原理到实战的全攻略,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的... 目录一、并行流的核心原理与适用场景二、性能优化的核心策略1. 合理设置并行度：打破默认阈值2. 避免装箱
阅读更多...
Maven中生命周期深度解析与实战指南

Maven中生命周期深度解析与实战指南

《Maven中生命周期深度解析与实战指南》这篇文章主要为大家详细介绍了Maven生命周期实战指南,包含核心概念、阶段详解、SpringBoot特化场景及企业级实践建议,希望对大家有一定的帮助... 目录一、Maven 生命周期哲学二、default生命周期核心阶段详解（高频使用）三、clean生命周期核心阶
阅读更多...
Python实战之SEO优化自动化工具开发指南

Python实战之SEO优化自动化工具开发指南

《Python实战之SEO优化自动化工具开发指南》在数字化营销时代,搜索引擎优化（SEO）已成为网站获取流量的重要手段,本文将带您使用Python开发一套完整的SEO自动化工具,需要的可以了解下... 目录前言项目概述技术栈选择核心模块实现1. 关键词研究模块2. 网站技术seo检测模块3. 内容优化分析模
阅读更多...
Java 正则表达式的使用实战案例

Java 正则表达式的使用实战案例

《Java正则表达式的使用实战案例》本文详细介绍了Java正则表达式的使用方法,涵盖语法细节、核心类方法、高级特性及实战案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、正则表达式语法详解1. 基础字符匹配2. 字符类（[]定义）3. 量词（控制匹配次数）4. 边
阅读更多...
Java Scanner类解析与实战教程

Java Scanner类解析与实战教程

《JavaScanner类解析与实战教程》JavaScanner类（java.util包）是文本输入解析工具,支持基本类型和字符串读取,基于Readable接口与正则分隔符实现,适用于控制台、文件输... 目录一、核心设计与工作原理1.底层依赖2.解析机制A.核心逻辑基于分隔符（delimiter）和模式匹
阅读更多...
Python内存优化的实战技巧分享

Python内存优化的实战技巧分享

《Python内存优化的实战技巧分享》Python作为一门解释型语言,虽然在开发效率上有着显著优势,但在执行效率方面往往被诟病,然而,通过合理的内存优化策略,我们可以让Python程序的运行速度提升3... 目录前言python内存管理机制引用计数机制垃圾回收机制内存泄漏的常见原因1. 循环引用2. 全局变
阅读更多...
PostgreSQL简介及实战应用

PostgreSQL简介及实战应用

《PostgreSQL简介及实战应用》PostgreSQL是一种功能强大的开源关系型数据库管理系统,以其稳定性、高性能、扩展性和复杂查询能力在众多项目中得到广泛应用,本文将从基础概念讲起,逐步深入到高... 目录前言1. PostgreSQL基础1.1 PostgreSQL简介1.2 基础语法1.3 数据库
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2