flutter模仿,flutter仿哔哩哔哩

Flutter 仿企业微信多选-listview可见item位置

有一个需求，是仿企业照微信的多选（效果大家自己去看）。我想到了两种方案：

思路：我们直接通过listview.builder是没办法自定义SliverChildBuilderDelegate，我们可以通过listview.custom来自定义SliverChildBuilderDelegate，通过自定义我们可以重写didFinishLayout方法，拿到里面缓存的第一个item和最后一个item。可见item的跟缓存item是差5个的，可以间接算出来，后面发现其实不太行，上下滑动之后会显示之前滑动时候的可见位置。 正解是：这个里面还有个estimateMaxScrollOffset方法，正常来说通过它可以获取到可见的第一个和最后一个item位置。但是我一开始使用这个方法，不会被回调，后面不知道修改了什么，就会回调，然后这个位置是准确的。

看下listview.builder的源码

我们可以看到childrenDelegate是直接定义好了的。

在看看listview.custom 的源码

childrenDelegate这个是一个必传参数。

相关问答

Q1: flutter如何自定义一个controller

最近在写一个flutter-ui库，类似于antd一样的ui库，google了很久，都没有发现一个类似antd这种国人喜欢用的ui库，大部分都是国外的那种material ui,因为公司多个flutter项目都需要用，每次都是写好几遍，而且还很难维护所以才有了这个打算，第一个要写的ui组件就是日历组件，日历的ui以及数据，都已经写完了，目前正好需要给日历写控制器，所以才有了这篇文章

在无状态组件当中，组件的ui由传入它的参数决定的，组件本身的不需要管理状态。而有状态组件会有多种状态，而它的状态是可以通过外部控制器来控制的。比如TextField，创建一个controller可以给TextField赋值初始值，也可以通过controller来获取到变化之后的value值，而这个控制器就是controller。可以用来控制一个有状态组件的行为以及状态的一个类

为什么要用controller呢，起初我也没想明白为什么要用，因为传参数也可以解决类似的问题啊，就拿TextField来说，

但后来我发现，很多组件内部的行为是没办法通过传参数来控制的，尤其是在特殊的组件生命周期中，没办法实现，而通过controller，可以很好的解决这个问题，我自己感觉，controller的用处就是提供给外部操作当前组件的能力，包括组件的各种状态，以及组件的各种行为，这里举个栗子?

综上，个人理解controller的作用就是暴露组件内部的行为，属性给父元素，使父元素可以很方便使用子元素提供的参数，而不需要去实现监听事件来获取

回到正题，那么如何实现一个自己的controller呢，对我而言，不会就抄，抄谁的呢，当然是超官方的！读官方的源码，看它如何实现，然后我们加以模仿，不就是自己的了。窃书不能算偷……窃书！……读书人的事，能算偷么？

这里借鉴了ScrollController的源码，首先分析下源码，以下是ScrollerController的源码，我把看不懂的英文注释删掉了...本菜?看不懂就删

看了看好像也没多少东西，注意当前类的定义

是继承了ChangeNotifier类，看着这个类顿时觉得好眼熟有没有，对了，不就是我们平时写provider用的那个东东嘛，查阅了官方文档，具体是这么解释的

用我这渣渣英语翻译大概的意思就是，一个类，它可以被继承，它可以被混合并且它提供了使用VoidCallback进行通知的 notification Api

盲猜和provider用法差不多，都是观察者模式模式，父组件可以订阅该controller的更改，当该controller通知其他监听器的时候，监听器的回调函数将被执行，上面ScrollController中的attach中正好也使用了notification方法来通知监听者，具体滚动执行的过程没有看到，但是大致了解了controller的工作原理

好了，知道原理了，开搞

首先得思考，这个controller会提供什么，按照我当前给日历组件的设计，目前会给外部提供当前日历所有的行为事件以及最终的值

目前我写的controller很简单，只需要给外部父容器提供上一个月，下一个月的方法可以使用就可以，所以我的控制器很简单，只有两个方法，并且方法执行完成之后进行消息通知，通知到各个订阅者，也就是这里的日期组件 在日期组件的 initState方法中，对controller进行监听，从而改变ui

最外层父容器是这样的，当前demo用setState临时刷新ui

看起来还不错，还有一些ui上的交互需要后续去调整

未完待续...

最近入了flutter的坑，就想着做一行爱一行，也不能把自己的头衔写死了就只做前端，只写页面。flutter写起来也蛮舒服的，加油，打工人！

Q2: Flutter版仿火币k线与深度线

flutter_k_chart基本实现了火币里面各项指标线以及深度线，Flutter目前没有比较好的开源组件，就自己写了一个，声明式ui自定义起来有点怪怪的，但大致与android差不多，先上效果图

使用方式

GitHub地址：

后期会持续完善，欢迎指出问题以及star

Q3: Flutter开源app---开眼短视频

在玩安卓上有款组件化开源app的项目，一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的，比较简洁，美观，然后最近又在学flutter的知识，于是就写了一款flutter版本的开源短视频，效果也是听不错的，废话不多说，先上效果图。

先附上项目地址：

项目api会在后面的参考链接里，或者直接项目内查看。

项目地址：

更新：6/30 项目新增下拉刷新，上拉加载功能

kotlin版本开眼短视频开发中，敬请期待...

总结：在此感谢参考的伙伴的文章，写的也很好，然后我将这个项目改写成了flutter，当中也学习到了很多flutter相关的知识，后续还有继续巩固，不断学习。

参考链接（包含本项目的api）

Q4: Flutter 仿抖音效果 (一) 全屏点爱星

项目地址: 持续效果更新

flutter 有个onTapUp 事件,字面意思就是 点击抬起的,会返回 TapUpDetails details ,通过 localPosition 属性就能获取到x,y坐标

计算double 并不复杂,每次点击的时候记录下当前的事件戳,只要两个点击的时间戳和坐标距离小于自己设定的阈值,就可以视为双击事件

实现双击

我们使用OverlayEntry 控件,控件详细介绍

效果一共有 缩小 → 上移 → 放大 → 消失

第一组动画(缩小 上移) → 第二组动画(放大 消失)

flutter 动画需要两个类

AnimationController 负责管理动画

Animation 负责具体值操作

然后通过 Transform.scale 函数的,对scale值进行改变

补全第一组动画

现实

项目地址: 持续效果更新

Q5: Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏点爱星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 视频播放列表] ( )

项目地址: 持续效果更新

1.基本的布局是简单的,外层通过Stack作为根

2.左边点赞的控件组通过Align进行统一布局

3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局

4.底部同样使用Positioned,设置底部距离

5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作

1.pageController监听

刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多

2.歌曲名走马灯效果

这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现

首页listview里面套入的是最简单的container+text

listview添加一个ScrollController做为滑动的控制

使用一个定时器,把listview滑到最大的位置之后,在滑回去

先通过scroController.position.maxScrollExtent获取最大位置,

然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画