Flutter局部刷新方法

Flutter中Widget分为StatefulWidget和StatelessWidget，分别为动态视图和静态视图，视图的更新需要调用StatefulWidget的setState方法，这会遍历调用子Widget的build方法。当一个主页面比较复杂时，会包含多个widget，如果直接调用setState，会遍历所有子Widget的build，这是非常不必要的性能开销，有没有单独刷新指定Widget的方式呢？这个时候就要用到GlobalKey了。

成都创新互联公司专注于企业全网营销推广、网站重做改版、嘉黎网站定制设计、自适应品牌网站建设、H5技术、电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为嘉黎等各大城市提供网站开发制作服务。

一个StatefulWidget包含一个Button，一个Text，通过点击Button调用主Widget的setState方法，刷新Text，示例如下：

同样一个StatefulWidget包含一个多个Text和Button，点击Button我们只需要刷新指定的Text，通过GlobalKey的方式，实现如下：

主Widget，包含一个需要更新的TextWidget和一个不需要更新的Text

需要单独更新的Widget

传递事件的Button

这样点击Button就只会更新指定的TextWidget了，效果如下：

这只是一个简单的例子，在实际开发中为了页面刷新的高效率，模块化封装非常重要。很多情况下都只需要局部刷新，而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握

Flutter - 显示/隐藏控件的几种方法

实际效果，不会占位，隐藏时 TestWidget 不会加载，可 else 一个占位(则会加载占位的组件)

实际效果，会占位，显示隐藏TestWidget都会加载

实际效果，不会占位，显示隐藏TestWidget都会加载

实际效果，可选择是否占位，不占位，隐藏时TestWidget不会加载，占位，显示隐藏TestWidget都会加载

Visibility 选择占位时，隐藏 TestWidget

Flutter初始化

新建一个Flutter工程，android模块。

1，只有一个Activity组件，它是Dart层绘制Widget的容器。

2，Application配置FlutterApplication。

应用Application配置io.flutter.app.FlutterApplication类，App首次启动时，初始化。

调用FlutterMain.startInitialization()方法。

initConfig方法，从AndroidManfest.xml配置的applicaion节点获取meta-data数据，初始化以下默认值。

这些值都是使用中用到的name，例如，抽取apk中asset资源时，flutter_assets打包目录，打包产物data名称。

initResources方法， 初始化资源。

在Flutter打包apk的asset目录下，包括fluttter_asset目录/资源项，将资源从apk中抽取，保存在 Context.getDir("flutter", 0) 目录下。

/data/user/0/包名/app_flutter目录。

在目录中创建一个时间戳文件，根据apk版本和包信息记录的lastUpdateTime更新时间，第二次启动时，若apk未更新，不需要再次抽取。

加载so库，libflutter.so，System.loadLibrary()。

主页面继承FlutterActivity，配置启动模式singleTop。

FlutterActivity类在io.flutter.app包， (区别io.flutter.embedding.android包)， 组件生命周期委托给FlutterActivityDelegate类。

组件启动，onCreate方法。

FlutterMain.ensureInitializationComplete方法，确保资源成功抽取完成，创建FlutterView视图(io.flutter.view)，继承SurfaceView类，setContentView方法，设置组件主布局即FlutterView视图。

最后，根据Bundle路径，runBundle()加载运行，

调用FlutterView的runFromBundle方法，入口点在dart的main方法，

通过FlutterNativeView，调用FlutterJNI的native方法。

nativeRunBundleAndSnapshotFromLibrary方法。

任重而道远

flutter之build(BuildContext context)方法

StatelessWidget是一个抽象类继承自Widget，这个抽象类中定义了build方法：

Widget build(BuildContext context);

功能：

Describes the part of the user interface represented by this widget.

描述这个widget所代表的用户界面的部分，感觉类似于iOS视图控制器中的viewdidload;

调用时机：

The framework calls this method when this widget is inserted into the tree in a given  BuildContext  and when the dependencies of this widget change (e.g., an  InheritedWidget  referenced by this widget changes).

framework会调用这个方法：1.当这个widget被插入到给定  BuildContext  的中的时候；2.当widget的依赖改变的时候；

方式：

framework会用这个方法返回的widget取代这个widget下边的子树，或者更新已经存在的子树，或者删除子树用新子树填充；这依赖于方法返回的widget是否可以更新已经存在的子树的根，或者是widget调用canUpdate；

使用条件：

1.这个widget的区域不能随时间改变；

2.从context使用  BuildContext.inheritFromWidgetOfExactType 获得的任何环境状态。

flutter刷新页面的方法

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

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

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

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

创建一个TimerModel文件

页面布局如下：

Flutter 开发笔记

下面这种情况下，为 InkWell 设置的 splashColor 不会生效：

需要用 Material 去除背景色，然后将颜色设置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回键返回：

注意：使用此方法同时也会禁用 iOS 上的手势滑动返回功能，推荐判断平台后再使用。

修改对话框中的复选框状态，最简便的方法是通过 Element 中的 markNeedsBuild 方法：

当然，更推荐的做法是通过 StatefulBuilder ，然后就可以在 Dialog 中调用 setState 方法了，不过在调用 setState 时需要判断 Dialog 是否已经关闭，否则会造成 setState() called after dispose() 的错误，可以通过添加一个标志位来解决，如下：

在 Web 中加载网络图片有时会失败，遇到这样的报错： Exception caught by image resource service... ，造成该错误的原因通常是，图片跨域了（见 跨域资源共享 ）。最简单的解决办法是， 使用 HTML 渲染加载 ，而不是默认的 CanvasKit。

Flutter 中所有的 list 默认都是没有 ScrollBar 的，必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置，所以 List 的长度必须是固定的。

当使用 WebView 等高度不定的组件时会出现内容被截断的情况，通常可以使用 NestedScrollView 来解决该问题，需要在 WebView 外部嵌套 SingleChildScrollView。

虽然使用了缓存，而且也是用 builder 加载图片的，但是发现一个现象：滑动屏幕后图片短暂消失并重新加载了。图片高度很高时这种现象更加明显，其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:

该参数的作用是改变超出屏幕高度后继续渲染的范围（以像素为单位），比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。

借助 IntrinsicHeight 组件：

另外，IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 显示内在元素的高度 ，从而避免元素因为约束的存在而不显示或者高度太高（比如在使用了 Column 或者 Row 的时候）。

在通过 Uri 的 queryParameters 获取 query 参数时，发现有些链接会抛出下面异常：

造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串，如果链接中包含非 utf-8 字符，就会造成上面的错误，相关 issue 见： issue #31621 。目前该 issue 处于 open 的状态，暂时的解决办法是，在所有使用到 queryParameter 的地方用 try..catch 捕捉可能抛出的异常。

Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

目前该库没有图片加载完成的回调（见 issue #545 ），不过我们可以通过在 imageBuilder 中来添加回调：

这是一个应用内更新插件，安卓 10 以上安装时需要在 manifest 中添加以下内容：

目前功能最强大的 WebView 插件，基本能满足绝大部分移动端网页加载的需求，而且可定制化程度高。

一般通过 CookieManager 修改 Cookie，拦截请求并修改请求对象的 Header 不会生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平台设置 InAppWebViewOptions ，而且需要注意，由于设置 userAgent 后会覆盖默认的 UserAgent，所以如果需要在默认的 UserAgent 上添加其它参数，iOS 上需要通过 InAppWebViewController.getDefaultUserAgent() 获取默认 UserAgent 参数，而 Android 不需要添加。

如果图片源或者请求是 http 的，为了在 Android 上正常加载请求，必须在 AndroidInAppWebViewOptions 中将 mixedContentMode 设置为 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。

当我们想要设置全屏图片的时候，由于默认的 Constraint 会将图片居中显示，所以图片四周会留有空隙。为了去除这个限制，我们需要 Xcode 中打开 LaunchScreen.storyboard，然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。

具体设置方法：右侧 Inspector 面板 Show the Size inspector 解选 Layout Margins 中的 Safe Area Relative Margins，拖动图片占满全屏，然后根据 View Controller Scene 的 Warning，更新 Constraint 就可以了。

在集成某些三方库之后，在使用命令行运行 iOS 模拟器的时候可能会遇到下面这个报错：

这是因为 iOS 模拟器未来将会兼容 arm64 架构，但是目前还不支持，所以我们需要修改 Build Setting 使得能够在 x86_64 的模拟器上运行，操作步骤见 这里 。

分享名称：flutter技巧大全,flutter 菜鸟教程
当前网址：http://scyanting.com/article/dscciei.html