flutter网页,flutter网页要加载好久

flutter页面的绘制和管理

Element管理Widget和RenderObject。

widget保持显示当前的页面状态，当widget产生点击等交互，调用setState()改变element中管理的state，

flutter刷新页面的方法

这种方法最常见，但是有些地方引用的话，刷新的成本比较大，刷新的是整个页面，数据太多加载太慢的话，会有闪烁的现象

这种方法类似于iOS中的set方法，通过设置某个属性的时候，去刷新某个控件。在flutter中这种刷新方式，是对上面setState(){}方法的改进，根本的方法还是setState(){}，只不过是通过方法去刷新某个控件。如下：

首先在pubspec.yaml中添加provider依赖

下面通过provider来实现一个发送验证码的案例。

创建一个TimerModel文件

页面布局如下：

flutter 页面的生命周期（转）

转自

在 Flutter 中，有两类常用的 Widget：

在开发过程中，我们经常需要继承它们两来实现自己的 Widget。

一个 StatelessWidget 是不能被改变的，比如： Icon 、 Text 等。

如果你的控件一旦显示，就不需要再做任何的变更，那么你应该使用 StatelessWidget 。

实现一个自己的 StatelessWidget 很简单。

当你看到下面这个例子?时，你就知道它有多简单了。

看，只要在 build() 中返回你的视图就可以了。

一个 StatefulWidget 是有状态的，可变的。

它可以改变自己的外观，以响应用户的操作或者数据的变化。

比如： CheckBox 、 Switch ..

我们之所以能够改变一个 StatefulWidget ，是因为它有一个设置状态的函数：

调用这个函数后，就会触发 StatefulWidget 的视图树重建。

因此，当我们需要一个可交互的，即能根据用户操作或数据变化而改变视图的 Widget 时，那就得用上 StatelessWidget 了。

现在，来创建一个自定义的 StatefulWidget：

从上面的例子中可以看到， StatefulWidget 会要求提供一个含有视图树的 State 。

既然 State 能够控制一个视图的状态，那它肯定会有一系列的生命周期。

上图就是 State 的生命周期图。

Flutter页面导航

返回用navigator的pop方法

使用navigator的pushNamed方法push到对应的页面

在导航的目的页面的build方法里用ModalRoute.of(context)方法获取需要的参数：

第二个页面返回到第一个页面的时候如果要带参数，可以使用async异步方法来实现

用navigator的push方法，在页面的初始化方法中传递参数：

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时再移除这个蒙层。