HarmonyOS应用开发ArkUI(TS)电商项目实战

项目介绍

本项目基于 HarmonyOS 的ArkUI框架TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:基于TS扩展的声明式开发范式,

工具版本: DevEco Studio 3.1 Canary1

SDK版本: 3.1.9.7(API Version 8 Release)

效果演示

页面解析

主框架

使用容器组件:Tabs 、TabContent、作为主框架,底部Tab使用自定义布局样式,设置点击事件,每次点击更换选中的索引。来切换内容页面。

使用自定义组件来实现:首页、分类、购物车、我的的搭建。

@Entry
@Component
struct MainFrame {@State selectIndex: number = 0private controller: TabsController = new TabsController()private tabBar = getTabBarList()// 内容@Builder Content() {Tabs({ controller: this.controller }) {TabContent() {HomeComponent()}TabContent() {ClassifyComponent()}TabContent() {ShoppingCartComponent({ isShowLeft: false })}TabContent() {MyComponent()}}.width('100%').height(0).animationDuration(0).layoutWeight(1).scrollable(false).barWidth(0).barHeight(0)}// 底部导航@Builder TabBar() {Row() {ForEach(this.tabBar, (item: TabBarModel, index) => {Column() {Image(this.selectIndex === index ? item.iconSelected : item.icon).width(23).height(23).margin({ right: index === 2 ? 3 : 0 })Text(item.name).fontColor(this.selectIndex === index ? '#dc1c22' : '#000000').margin({ left: 1, top: 2 })}.layoutWeight(1).onClick(() => {this.selectIndex = indexthis.controller.changeIndex(index)})}, item => item.name)}.width('100%').height(50).shadow({ radius: 1, color: '#e3e2e2', offsetY: -1 })}build() {Column() {this.Content()this.TabBar()}.width('100%').height('100%')}
}
首页

因为顶部标题栏需要浮在内容之上,所以根布局使用 容器组件Stack ,内容布局最外层使用 容器组件Scroll 来实现滑动,内容整体分为3部分:

  1. 轮播图:使用 容器组件Swiper
  2. 菜单:使用 容器组件Flex 、默认横向布局,子布局宽度分为五等分,设置Flex的参数:wrap: FlexWrap.Wrap可实现自动换行。
  3. 商品列表:和菜单的实现方式一样,只不过宽度是二等分

向下滑动时标题栏显示功能:使用 容器组件Scroll 的属性方法:onScroll来判断y轴方向的偏移量,根据偏移量计算出比例,改变标题栏的透明度。

(以下是部分代码)


@Component
export struct HomeComponent {// 滑动的y偏移量private yTotalOffset = 0// 标题栏透明度@State titleBarOpacity: number = 0// 轮播图列表private banners = [$r("app.media.banner1"), $r("app.media.banner2"), $r("app.media.banner3"),$r("app.media.banner4"), $r("app.media.banner5"), $r("app.media.banner6"),]// 菜单列表private menuList = getHomeMenuList()// 商品列表private goodsList: Array<HomeGoodsModel> = getHomeGoodsList()// 轮播图@Builder Banner() {...}// 菜单@Builder Menu() {....}// 商品列表@Builder GoodsList() {...}build() {Stack({ alignContent: Alignment.Top }) {Scroll() {Column() {this.Banner()this.Menu()this.GoodsList()}.backgroundColor(Color.White)}.scrollBar(BarState.Off).onScroll((xOffset, yOffset) => {this.yTotalOffset += yOffsetconst yTotalOffsetVP = px2vp(this.yTotalOffset)// 轮播图高度 350const scale = yTotalOffsetVP / 200this.titleBarOpacity = scale})Row(){TitleBar({title: '首页',isShowLeft: false,isShowRight: true,rightImage: $r('app.media.search')})}.opacity(this.titleBarOpacity)}.width('100%').height('100%')}
}
详情页

和首页类似,根布局使用容器组件Stack,内容布局最外层使用容器组件Scroll 来实现滑动。因为详情页有相同布局,使用装饰器@Builder来抽离公共布局。

向下滑动时标题栏显示功能原理和首页一样

(以下是部分代码)

import router from '@ohos.router';@Entry
@Component
struct GoodsDetail {....// 轮播图@Builder Banner() {...}// 内容item@Builder ContentItem(title: string, content: string, top=1) {Row() {Text(title).fontSize(13).fontColor('#808080')Text(content).fontSize(13).margin({ left: 10 }).fontColor('#ff323232')Blank()Image($r('app.media.arrow')).width(12).height(18)}.width('100%').padding(13).backgroundColor(Color.White).margin({ top: top })}// 内容@Builder Content() {...this.ContentItem('邮费', '满80包邮', 7)this.ContentItem('优惠', '减5元')this.ContentItem('规格', '山核桃坚果曲奇; x3', 7)this.ContentItem('配送', '北京市朝阳区大塔路33号')}// 评论@Builder Comment() {...}// 商品参数item@Builder GoodsParamItem(title: string, content: string) {Row() {Text(title).width(100).fontSize(13).fontColor('#808080')Text(content).fontSize(13).fontColor('#ff323232').layoutWeight(1).padding({ right: 20 })}.width('100%').padding({ top: 15 }).alignItems(VerticalAlign.Top)}// 商品参数@Builder GoodsParam() {...}build() {Stack() {Scroll() {Column() {this.Banner()this.Content()this.Comment()this.GoodsParam()}}.scrollBar(BarState.Off).onScroll((xOffset, yOffset) => {this.yTotalOffset += yOffsetconst yTotalOffsetVP = px2vp(this.yTotalOffset)// 轮播图高度 350const scale = yTotalOffsetVP / 350this.titleBarBgTmOpacity = 1 - scaleif (scale > 0.4) {this.titleBarBgWhiteOpacity = scale - 0.2} else {this.titleBarBgWhiteOpacity = 0}})this.TopBottomOperateBar()}.width('100%').height('100%').backgroundColor('#F4F4F4')}
}
分类

此页面很简单,就是左右两个容器组件List、一个宽度30%,一个宽度70%,使用循环渲染组件ForEach来渲染列表。

(以下是部分代码)

@Component
export struct ClassifyComponent {// 搜索@Builder Search() {...}// 内容@Builder Content() {Row() {// 左分类List() {...}.width('30%')// 右分类List({scroller:this.scroller}) {...}.width('70%')}.width('100%').layoutWeight(1).alignItems(VerticalAlign.Top)}build() {Column() {this.Search()this.Content()}.width('100%').height('100%').backgroundColor(Color.White)}
}
购物车

此界面功能:全选、单选、删除商品、更改商品的数量。当有商品选中,右上角删除按钮显示。更改商品数量同步更新合计的总价格。

使用List组件来实现列表。数据数组使用装饰器@State定义。数据更新必须是更改数组的项

(以下是部分代码)

@Component
export struct ShoppingCartComponent {...// 商品详情@Builder GoodsItem(item: ShoppingCartModel, index: number) {...}build() {Column() {TitleBar()if (this.list.length > 0) {// 列表  List() {...}.layoutWeight(1)// 结算布局Row() {...}} else {Row() {Text('空空如也~')}}}.width('100%').height('100%').backgroundColor('#F4F4F4')}selectOperation(item: ShoppingCartModel, index: number) {// 替换元素,才能更改数组,这样页面才能更新let newItem = {...item}newItem.isSelected = !item.isSelectedthis.list.splice(index, 1, newItem)this.calculateTotalPrice()}// 加/减操作addOrSubtractOperation(item: ShoppingCartModel, index: number, type: -1 | 1) {...}// 计算合计calculateTotalPrice() {let total = 0let selectedCount = 0for (const item of this.list) {if (item.isSelected) {selectedCount++total += item.newPrice * item.count}}this.totalPrice = totalthis.isAllSelected = selectedCount === this.list.length}
}

结尾

此项目没有比较难的点,都是照着官方文档,查阅API做出来的,依靠着声明式UI的简洁和强大,页面搭建效率很高。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

春招3月面试题的总结--南京,山东,西安,东莞四家公司总结。

1.南京某公司 1.Java的几种基本数据类型&#xff1f;分别是多少字节&#xff1f; byte&#xff0c;8bit 1字节 char&#xff0c;16bit 2字节 short&#xff0c;16bit 2字节 int&#xff0c;32bit 4字节 float&#xff0c;32bit 4字节 long&#xff0c;64bit 8字节 doubl…

睿尔曼-具身智能双臂主从手项目方案

具身智能双臂主从手项目方案 一、公司介绍 成立于2018年&#xff0c;是一家专注于超轻量仿人机械臂研发、生产及销售的国家级高新技术企业。总部位于北京石景山区首特产业园&#xff0c;工厂坐落于江苏省常州科教城智能数字产业园&#xff0c;团队的核心成员毕业于北京航空航…

前端验证码

一、基础验证码 gVerify.js&#xff1a; !(function (window, document) {function GVerify(options) { //创建一个图形验证码对象&#xff0c;接收options对象为参数this.options { //默认options参数值id: "", //容器IdcanvasId: "verifyCanvas", //ca…

springboot实现七牛云的文件上传下载

一&#xff1a;依赖包 <dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><qiniu-java-sdk.version>7.7.0</qiniu-java-sdk.version></dependency>二:具体实现 RestController RequestMapping…

c++11 标准模板(STL)本地化库 - 平面类别 - (std::ctype) 定义字符分类表(三)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 定义字符分类表 std::ctype template< class CharT > clas…

【办公软件】开发常用网站

文章目录 一、开发社区二、开发学习三、视图工具四、开发工具五、前端web开发工具六、开发接口官网 备用产看。 https://www.webhub123.com https://www.webhub123.com/#/home/detail?projectHashid59183272&ownerUserid22053727 java全栈只是体系&#xff1a;https://www…

嵌入式软件面试---编程基础篇

嵌入式软件工程师面试中&#xff0c;编程基础部分通常涵盖以下几个核心主题&#xff1a; C/C基础知识 语法和语义&#xff1a;包括但不限于变量定义、数据类型、运算符、流程控制语句&#xff08;if-else、switch-case、for、while、do-while循环&#xff09;、函数定义及调用…

Java中常见的线程同步方式

在Java中&#xff0c;当多个线程同时访问共享资源时&#xff0c;为了防止数据不一致或损坏的问题&#xff0c;需要进行线程同步。Java提供了多种线程同步的方式&#xff0c;以下是一些常见的方法&#xff1a; 1. 使用synchronized关键字 synchronized关键字可以修饰方法或代码…

【nc工具信息传输】

nc&#xff0c;全名叫 netcat&#xff0c;它可以用来完成很多的网络功能&#xff0c;譬如端口扫描、建立TCP/UDP连接&#xff0c;数据传输、网络调试等等&#xff0c;因此&#xff0c;它也常被称为网络工具的 瑞士军刀 。 nc [-46DdhklnrStUuvzC] [-i interval] [-p source_po…

Linux系统Docker搭建Wiki.Js应用程序并结合cpolar实现公网访问内网知识库

文章目录 1. 安装Docker2. 获取Wiki.js镜像3. 本地服务器打开Wiki.js并添加知识库内容4. 实现公网访问Wiki.js5. 固定Wiki.js公网地址 不管是在企业中还是在自己的个人知识整理上&#xff0c;我们都需要通过某种方式来有条理的组织相应的知识架构&#xff0c;那么一个好的知识整…

zookeeper之基本命令

1、创建节点: create [-s] [-e] [-c] [-t ttl] path [data] [acl] -s: 创建一个顺序节点。顺序节点会在其路径名后加上一个递增的数字&#xff0c;这个数字反映了节点被创建的顺序。-e: 创建一个临时节点。临时节点在客户端会话结束时会自动被删除。-c: 创建一个容器节点。容器…

腾讯云4核8G12M服务器和标准型S5服务器配置价格表

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…

数据结构和算法:十大排序

排序算法 排序算法用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用&#xff0c;因为有序数据通常能够被更高效地查找、分析和处理。 排序算法中的数据类型可以是整数、浮点数、字符或字符串等。排序的判断规则可根据需求设定&#xff0c;如数字大小、字符 ASCII…

关于时区一致性设置

服务器部署海外&#xff0c;这时候&#xff0c;需要考虑时区问题&#xff0c;很多程序地方不能写死&#xff0c;需要调整中间件或者服务器时区&#xff0c;代码使用localTime。 1、服务器 Linux CentOS7 # 设置时区 timedatectl set-timezone Europe/London# 列出伦敦 时区设置…

基于注意力整合的超声图像分割信息在乳腺肿瘤分类中的应用

基于注意力整合的超声图像分割信息在乳腺肿瘤分类中的应用 摘要引言方法 Segmentation information with attention integration for classification of breast tumor in ultrasound image 摘要 乳腺癌是世界范围内女性最常见的癌症之一。基于超声成像的计算机辅助诊断&#x…

【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录(SSO)设置

【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录(SSO)设置 目录 【DevOps工具篇】使用Ansible部署Keycloak oauth2proxy 和 单点登录(SSO)设置Ansible 基础知识部署 Keycloak创建 OIDC-客户端创建 oauth2proxy 部署顶级 Ansible PlaybookHost.iniplayboo…

prompt 工程案例

目录 prompt 工程是什么&#xff1f; 案例 vllm 推理加速框架 prompt 工程是什么&#xff1f; prompt&#xff1a;提示词&#xff0c;也就是我们使用网页版输入给大模型的内容就叫 prompt&#xff0c;那什么是 prompt 工程呢&#xff1f; 简单理解其实就是利用编写的 prom…

.NET 5种线程安全集合

在.NET中&#xff0c;有许多种线程安全的集合类&#xff0c;下面介绍五种我们常用的线程安全集合以及他们的基本用法。 ConcurrentBag ConcurrentBag 是一个线程安全的无序包。它适用于在多线程环境中频繁添加和移除元素的情况。 ConcurrentBag<int> concurrentBag n…

使用自己训练的superpoint与superglue模型进行图像配准

基于官方团队发布的预训练模型&#xff0c;使用SuperPoint与SuperGlue实现图像配准&#xff0c;可以参考https://blog.csdn.net/a486259/article/details/129093084 基于官方团队发布的代码训练自己的模型&#xff0c;可以参考https://blog.csdn.net/a486259/article/details/…

如何理解UDP 和 TCP? 区别? 应用场景?

文章目录 一、UDP二、TCP三、区别参考文献 一、UDP UDP&#xff08;User Datagram Protocol&#xff09;&#xff0c;用户数据包协议&#xff0c;是一个简单的面向数据报的通信协议&#xff0c;即对应用层交下来的报文&#xff0c;不合并&#xff0c;不拆分&#xff0c;只是在…