Flutter实现京东淘宝电商商品详情页效果
之前开发电商的功能时,需要做商品界面,UI基本是参考京东、淘宝的效果,以前android原生开发的时候觉得很好做,切到Flutter之后只能自己想办法,所以自己后来做出了这样的效果,分享下实现方案。
先看效果图吧
效果图比较
这是京东的效果
下图是我做的效果,基本和京东的保持一致,点击tab可快速切换到某一页,滑动列表tab自动切换。
思路
仔细查看京东的商品详情页,可以整理出下面三点
1.tabbar随着慢慢滑动一定距离会变透明,再次滑到顶部则重新变成不透明
2.滑动的过程中,到达新的页面内容,顶部的tab下标会自动切换到当前的内容下标
3.点击tab中的某一项,页面则会自动滑动到相应页面
整体的思路其实就是最重要的一点,得到商品页的高度。得到了商品页的高度,再通过滑动事件针对偏移量进行操作,我们就可以做到上面的三件事。
方案
上面提到最重要的是得到商品的高度,那么在flutter中如何得到widget的高度呢?我通过查询资料得到了最后的答案。获取到widget的size,从而获得它的height属性。这里还有一个坑,一些异步加载的布局,你有时候直接去拿获取不到正确值,需要等页面加载完成才能真正获取到大小。
在flutter中可以使用GlobalKey获取到控件的大小,使用 GlobalKey 的步骤如下:1.创建globalkey对象 ,GlobalKey _globalKey = GlobalKey();
2.将widget设置globalkey属性,key: _goodsKey,
3.通过globalkey字段获取到Size这三个步骤是获取到上面效果最关键的步骤。
还有一个就是滑动监听,这边用到了flutter的SingleChildScrollView控件中的ScrollController,通过监听回调,返回当前的偏移量,从而与商品高度进行比较更新界面。
_scrollController.addListener(() {///此处监听滑动的偏移量...});
另外两个简单的逻辑是tab的切换和点击,这个flutter自带的tab控件使用方法很简单,可以自行参考。
编码实现
这里只放部分代码,我会把整个demo上传到github上面去,需要的可以自己拿。
计算商品页面widget高度的代码:
///计算商品信息页的高度void calculateHeight() {_goodHeight =getSize(_goodsKey.currentContext) - (Platform.isIOS ? 88 : 50);print("calculateHeight $_goodHeight");}double getSize(BuildContext buildContext) {final RenderBox box = buildContext.findRenderObject();final size = box.size;return size.height;}
整体布局界面代码:
@overrideWidget build(BuildContext context) {return Scaffold(///底部购买商品、购物车bottomNavigationBar: buildBottomBar(),body: Stack(children: [SingleChildScrollView(controller: _scrollController,child: Column(children: [Container(key: _goodsKey,///商品页child: GoodsInfoPage(),),Container(///详情中的图片child: _html,),],),),///根据透明度显隐顶部的barOpacity(opacity: toolbarOpacity,child: Container(height: 78,color: Colors.red,///顶部显隐的barchild: buildTopBar(),),)],),);}
还有滑动监听的处理逻辑
_scrollController.addListener(() {///如果滑动的偏移量超出了自己设定的值,tab栏就进行透明化操作double t = _scrollController.offset / DEFAULT_SCROLLER;if (t < 0.0) {t = 0.0;} else if (t > 1.0) {t = 1.0;}if (mounted) {setState(() {toolbarOpacity = t;});}///如果滑动偏移量大于商品页高度,tab就切换到详情页if (_scrollController.offset >= _goodHeight) {_tabController.animateTo(1);} else {_tabController.animateTo(0);}});
难度其实也不是很大,但是整体的思路和方案才是最难的,当然也有其他一些实现方式,欢迎交流。
源码
Demo地址:https://github.com/shudaizisd/Flutter_Shop
如果有不对的地方,欢迎指出。
Flutter实现京东淘宝电商商品详情页效果相关推荐
- HTML5期末大作业:仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...
- html网页制作——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业C71
HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...
- html访问java接口出现缓存_高可用架构设计(3) -电商商品详情页缓存背景及框架说明...
Github 0 导读 我们这个教程,基于hystrix,如何来构建高可用的分布式系统的架构,项目实战 模拟真实业务的这么一个小型的项目,来全程贯穿,用这个项目中的业务场景去一个一个的讲解hystri ...
- 高可用架构设计(3) -电商商品详情页缓存背景及框架说明
大背景:电商网站,首页,商品详情页,搜索结果页,广告页,促销活动,购物车,订单系统,库存系统,物流系统 小背景:商品详情页,如何用最快的结果将商品数据填充到一个页面中,然后将页面显示出来 分布式系统: ...
- 数字化时代-15:从商品交换过程解剖淘宝电商
概述:本文探讨淘宝电商中的淘宝平台.支付宝.淘宝的买家.淘宝的卖家的各个角色. 探讨淘宝整个再生产过程中,处于哪个环节,支付在宝和淘宝解决了什么问题? 又有什么启发? 生产:在前面,花了很多的时间,从 ...
- 1个人,3个月业余时间,采用Flutter,居然仿写了一个淘宝电商开源项目
来源 | https://www.jianshu.com/p/194448388ce9 前言 Flutter现在如火如荼,Google也在大力推广,是到了学习Flutter的时候了,今天推荐一款用Fl ...
- 淘宝电商创业可能会面临哪些问题?
谈到互联网创业离不开电商,电商的魅力在于其不受时间.地点限制,创业门槛低,投入成本小,众多优势使得许多创业者加入电商创业大军. 此外,网购用户不断增长,2019年网络用户购物规模已超过6亿人次,电商行 ...
- 未来五年,做淘宝电商不做好私域流量,将寸步难行!
关键词:淘宝电商.私域运营.私域流量 使用行业:通用 这是个相对的概念,"私域"相对"公域".公域就是对所有企业品牌而言,大家集体共有的流量渠道,这其中有免费的 ...
- 淘宝电商项目落地,从零开始搭建亿级系统架构笔记
电商亿级系统架构设计笔记,分为:基础篇.数据库篇.缓存篇.消息队列篇.分布式服务篇.维护篇.实战篇.通过学习这份笔记,你可以系统的学会从零开始搭建亿级系统架构.其中每篇中又有具体的设计实施的笔记供大家 ...
最新文章
- 标准出现问题,人工智能正在走向错误的方向
- C# 正则表达式小结
- C Primer Plus_第8章_字符输入输出和输入确认_编程练习
- Serverless 架构下的服务优雅下线实践
- jsch连接mysql_求用jsch网络工具包通过ssh连接远程oracle数据库并发送sql操作语句(数据库在unix上)java代码例子...
- Python学习:numpy点乘,按元素相乘,以及转置的处理
- 什么是 CD 管道?一文告诉你如何借助Kubernetes、Ansible和Jenkins创建CD管道!
- 计算机调剂到材料科学与工程,2019年郑州大学材料科学与工程专业考研调剂信息...
- JSON和JS数据类型转化
- 转 ajax.dll 与 ajaxpro.dll的用法
- 微信发送模版消息,PHP代码简单案例
- 第七章节 类的抽象(抽象类)
- java常用类的特征_Java常用类-包装类
- 【读书笔记《Android游戏编程之从零开始》】10.游戏开发基础(View 游戏框架)
- CCA分析图如何解读_BI报表控件Wyn使用教程:如何使用网状/雷达图进行数据分析...
- 私募基金相关知识介绍(一)——TOT
- 不知道如何压缩PDF?教你3个压缩PDF文件方法
- Java编程规范-文件组织与排版
- Outline for Mac(Mac记事本软件)
- 会议室预约微信小程序推荐_会议室预约微信小程序开发