京东框架flutter,京东框架层

Flutter 仿京东商品详情页嵌套滚动组件

这是领苗确认记录详情页需要展示给用户的内容，大家可以看到这个页面要承载很多的信息，要向下滚动一段很长的距离才能展示完，想要实现的效果是在页面的顶部有一个TabBar，用户可以通过点击TabBar进行锚点(jumpTo到指定位置)，AppBar下的整个页面是可以自由滚动的，在滚动过程中AppBar始终固定在顶部，TabBar在第一次进入详情页的时候不显示，只有在向下滑动的时候会由透明渐变为不透明并固定在顶部，同时当页面滑动到TabBar锚点位置的时候TabBar会切换到对应的下标，也就是要实现TabBar和ScrollView联动的双向控制，Tabbar的切换可以控制页面的跳转，页面的滑动又可以反过来控制TabBar的切换，类似与京东、淘宝的商品详情页效果。

SliverAppBar基本已经达到了我们想要的效果，但在界面顶部会有块空白区域试了很多方法怎么都去不掉，最后看了SliverAppBar这个控件的源码发现是它自带的初始高度。

这个没法设置或消除，不可能直接去改源码，所以后来换了一种实现思路，舍弃了SliverAppBar这个控件，以Stack的形式将TabBar置于ScrollView之上也能达到我们想要的效果，那么问题来了，如何实现TabBar的滚动渐变？很容易想到Opacity透明度控件，通过滚动监听来控制TabBar透明度的改变，借助Notificaion可以完美实现我们的需求。

Notification是Flutter中一个重要的机制，在Widget树中，每一个节点都可以分发通知（Notification）与父(包括祖先)Widget通信，通知会沿着当前节点（context）向上传递，所有父节点都可以通过NotificationListener来监听自己关注的通知，Flutter中称这种通知由子向父的传递为“通知冒泡”（Notification Bubbling）。

　 Flutter中很多地方使用了通知，如可滚动(Scrollable) Widget中滑动时就会分发ScrollNotification，而Scrollbar正是通过监听ScrollNotification来确定滚动条位置的。除了ScrollNotification，Flutter中还有SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等。

通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同：

通过改造后，目前这个组件的原型已经实现并且可以满足我们的需求，最后就是对该demo进行完善使其能够完美接入我们的业务，做到技术赋能业务。

在一个页面滚动区域不是很长的情况下不建议使用，只有当页面足够长的情况下使用这个组件效果会比较好，因为如果一个页面过短，点击TabBar最后一栏进行锚点时，页面最后一个子模块内容无法置顶，只会将页面最后的内容推到屏幕范围内，并且由于TabBar监听到的是滚动的位置，会导致TabBar无法切换到对应的下标，看上去会像个bug，其实是因为底部已经没有内容了。

这个组件本身并没有太大的技术难度，但是有一些比较细节的小逻辑得处理好，并且从中衍生出来的很多琐碎的小的知识点都可以进行拓展。 在组件开发的过程中遇到问题时不局限于控件本身的设计模式，转变开发思维去找寻一些比较新颖的解决方案可能会有意外的收获。同时技术不能脱离于业务，技术赋能业务才能创造价值。

相关问答

Q1: Flutter是一个什么框架

Flutter是一个移动应用程序的软件开发工具包（SDK），具有以下特征：

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎自绘

简化版的浏览器，最大限度在android和ios上统一UI，包括业务逻辑和用户体验

开发语言使用dart，结合C, C++, 和Skia（2D渲染引擎）构建

支持hot reload，包含着完整的控件和工具链

一切皆控件，控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。一个控件可以定义：结构元素（比如按钮或菜单）、风格元素（比如字体或颜色方案）、布局的方面（比如填充）、一些业务逻辑等

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

强化版的WebView，框架仅提供一个View层，大部分功能要依赖原生

目前只能够运行大部分Dart代码（不能引入dart:mirrors或dart:html库）

Q2: Flutter跨平台框架（Dart语言）

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。(-中文网；-英文网)

Flutter是一种趋势，势必会取代RN，成为最主流的跨平台开发框架，基于Dart语言。ios开发必须Mac电脑。android开发window、linux、Mac均可。

Q3: 我的第一个flutter项目：购物app

这是个产假作业。故事是这样的。

生了娃，生活一地鸡毛。擦，碎钞机的需求怎么那么多。

当时，有一堆返利优惠券app比较火

...这里扯多了这篇文章被锁了....

我就想，来扒一扒，他们是怎么赚钱的。

结论：淘宝联盟。

淘宝联盟是阿里巴巴旗下的亲儿子，不那么有名是因为是个私生子吧，官网上还有个没听过的名号叫“阿里妈妈”，呵呵。淘宝联盟是给淘宝上推广商品的人用的，他们有一个专门的名称，叫做淘宝客，即“推广者（Publisher）”，他们帮电商平台推荐商品给别的买家，买家购买后，电商平台可以增加销量，而他们则可以获得推广佣金。

后来，知道京东也有自己的联盟平台，叫做“京东联盟”，拼多多也有，叫做“多多进宝”。

回到这些app的赚钱逻辑上来。对于用户而言，它们的两个噱头是：

“用我们的app买，你可以自用省钱”

“用我们的app，分享给别人下单，你可以赚钱！”

所以，这些app推广起来很容易啊，因为谁用谁赚钱呀！

那么为何不自己搭一个呢？

与其这些佣金落到别人口袋，不如自己直接做最顶层上线，发展出N个下线，岂不是躺着赚钱，哈哈哈哈哈

搞清楚赚钱逻辑之后，我发现淘宝联盟的api是很开放的。

商品链接： ;pid=mm_343780171_368000361_101527600308itemId=595640102734src=qtka_wxxtdx=1

其中，activityId是优惠券id，pid是推广者在阿里妈妈官网注册的id，只有这个id是我注册的，那么佣金就到我口袋去了，哈哈哈。

刚好练一下flutter，一次开发，两端使用，我一个人就可以了。app暂时取名为“小猪购”，拿粉红猪贴牌。

演示视频：

Q4: 为什么Flutter开发APP性能最接近原生，前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架，支持Android、iOS和WEB终端。1.0版在2018年12月5日发布，目前的最新版本是1.5，它采用的开发语言是Dart，Dart也是谷歌开发的计算机编程语言，语法类似C，是编译型语言：

hello world例子，打印字符串“Hello World!”：

1、没有桥接层

React Native、Weex等技术都是跨终端的框架，然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的：

React Native、Weex等技术多了一个桥接层，所以界面渲染会慢一些，由于UI渲染非常频繁，想要不卡顿，基本上比较难，性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在：

Dart可以被编译成不同平台的本地代码，让Flutter不通过桥接层直接跟平台通信，自然性能会快一些。

2、编译执行

JavaScript是解释执行的，Dart是编译执行的，性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的，Flutter Engine使用C/C++编写，开发人员通过Flutter框架直接和API在内部进行交互，所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外，Flutter还提供了自己的小部件，Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时，窗口小部件会重建其描述，框架将根据前面的描述进行区分，以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘，也就是一些核心类库直接放到虚拟机里面，调用起来更快。

从它的系统结构可以看出，类似安卓的ART(Android Run Time)虚拟机，同样采用AOT(Ahead of TIme)技术，会在APP安装时就编译成机器语言，不再解释执行，从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系统自带Skia引擎，iOS平台上Flutter也会把Skia引擎打包到APP中，从而实现了高效渲染。而React Native通过桥接层访问原生UI，操作频繁就容易出性能问题。

综合所述，Flutter 是性能最接近原生代码 的一种开发框架，未来也会是构建谷歌Fuchsia应用的主要方式，前途不可限量，唯一的问题就是需要学习一门新的语言：Dart，而有Java或者C#语言基础的程序员会比较容易学习。