flutter控制器,Flutter教程

flutter如何自定义一个controller

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

创新互联-专业网站定制、快速模板网站建设、高性价比宁河网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宁河网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖宁河地区。费用合理售后完善，十余年实体公司更值得信赖。

在无状态组件当中，组件的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写起来也蛮舒服的，加油，打工人！

flutter跳转原生页面后的穿透问题

现象：

flutter页面通过present跳转原生页面后，原生页面上的点击会首先响应下面的flutter页面中的内容（比如按钮什么的）。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测：

推测是flutter对控制器（或者view）加了分类，重写了控制器的点击事件，用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1：

在原生控制器中，加入点击事件的几个方法的空实现，用以覆盖flutter框架中的实现：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2：

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3：

在flutter跳转到原生页面之前，在flutter中加上一个蒙层，用来隔绝手势往flutter下面的view传递。原生页面返回flutter时再移除这个蒙层。

Flutter开发 -- [12 - 监听滚动事件]

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

另外，通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：

如果我们希望监听什么时候开始滚动，什么时候结束滚动，这个时候我们可以通过 NotificationListener 。

案例: 列表滚动, 并且在中间显示滚动进度

Flutter 之 滚动监听及控制（十九）

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

ScrollController构造函数如下：

ScrollController常用的属性和方法：

ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件，如：

示例

我们创建一个ListView，当滚动位置发生变化时，我们先打印出当前滚动位置，然后判断当前位置是否超过1000像素，如果超过则在屏幕右下角显示一个“返回顶部”的按钮，该按钮点击后可以使ListView恢复到初始位置；如果没有超过1000像素，则隐藏“返回顶部”按钮。

ScrollPosition是用来保存可滚动组件的滚动位置的。一个ScrollController对象可以同时被多个可滚动组件使用，ScrollController会为每一个可滚动组件创建一个ScrollPosition对象，这些ScrollPosition保存在ScrollController的positions属性中（ListScrollPosition）。ScrollPosition是真正保存滑动位置信息的对象，offset只是一个便捷属性

一个 ScrollController 虽然可以对应多个可滚动组件，但是有一些操作，如读取滚动位置 offset ，则需要一对一！但是我们仍然可以在一对多的情况下，通过其它方法读取滚动位置，举个例子，假设一个 ScrollController 同时被两个可滚动组件使用，那么我们可以通过如下方式分别读取他们的滚动位置：

我们可以通过 controller.positions.length 来确定 controller 被几个可滚动组件使用。

ScrollPosition 有两个常用方法： animateTo() 和 jumpTo() ，它们是真正来控制跳转滚动位置的方法， ScrollController 的这两个同名方法，内部最终都会调用 ScrollPosition 的。

我们来介绍一下 ScrollController 的另外三个方法：

当 ScrollController 和可滚动组件关联时，可滚动组件首先会调用 ScrollController 的 createScrollPosition() 方法来创建一个 ScrollPosition 来存储滚动位置信息，接着，可滚动组件会调用 attach() 方法，将创建的 ScrollPosition 添加到 ScrollController 的 positions 属性中，这一步称为“注册位置”，只有注册后 animateTo() 和 jumpTo() 才可以被调用。

当可滚动组件销毁时，会调用 ScrollController 的 detach() 方法，将其 ScrollPosition 对象从 ScrollController 的 positions 属性中移除，这一步称为“注销位置”，注销后 animateTo() 和 jumpTo() 将不能再被调用。

需要注意的是， ScrollController 的 animateTo() 和 jumpTo() 内部会调用所有 ScrollPosition 的 animateTo() 和 jumpTo() ，以实现所有和该 ScrollController 关联的可滚动组件都滚动到指定的位置。

Flutter Widget树中子Widget可以通过发送通知（Notification）与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的通知

可滚动组件在滚动时会发送 ScrollNotification 类型的通知， ScrollBar 正是通过监听滚动通知来实现的。通过 NotificationListener 监听滚动事件和通过 ScrollController 有两个主要的不同：

示例

下面，我们监听ListView的滚动通知，然后显示当前滚动进度百分比：

在接收到滚动事件时，参数类型为ScrollNotification，它包括一个metrics属性，它的类型是ScrollMetrics，该属性包含当前ViewPort及滚动位置等信息：

Flutter是一个什么框架

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

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

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

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

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

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

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

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

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

flutter-动画

1.动画原理：在一段时间内快速的多次改变UI外观，由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。

UI的一次改变称为一个动画帧，对应一次屏幕刷新。

FPS：帧率，每秒的动画帧数。

flutter动画分为两类：

常见动画模式：

是一个抽象类，主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类，可以是线性或者曲线或者其他。

可以生成除double之外的其他类型值，如：Animation Color 或 Animation Size 。

是一个动画控制器，控制动画的播放状态，在屏幕刷新的每一帧，就会生成一个新的值。

包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法，在给定的时间段内线性的生成从0.0到1.0（默认区间）的数字。

curve:描述动画的曲线过程。

curvedAnimation:指定动画的曲线。

常用Curve：

继承自Animatable T ，表示的就是一个 Animation 对象的取值范围，只需要设置开始和结束的边界值(值也支持泛型)。 它唯一的工作就是定义输入范围到输出范围的映射。

例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。

Tween.animate:返回一个Animation。

映射过程：

1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation)， 并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。

2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。

3). 这里的 animation 其实就是前面的 AnimationController 对象， transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。

接收一个TickerProvider类型的对象，它的主要职责是创建Ticker。

防止屏幕外动画消耗资源。

[图片上传失败...(image-115b94-1636441483468)]

过程：

回调：

不使用addListener()和setState()来给widget添加动画。

使用AnimatedWidget，将widget分离出来，创建一个可重用动画的widget，AnimatedWidget中会自动调用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染过渡，把渲染过程也抽象出来：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平台风格一致的路由切换动画

CupertinoPageRoute：左右切换风格

自定义：PageRouteBuilder

1.要创建交织动画，需要使用多个动画对象（Animation）。

2.一个AnimationController控制所有的动画对象。

3.给每一个动画对象指定时间间隔（Interval）

可以同时对其新、旧子元素添加显示、隐藏动画.

当AnimatedSwitcher的child发生变化时（类型或Key不同），旧child会执行隐藏动画，新child会执行执行显示动画。

希望大家支持一下，感谢