扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Flutter中有两个常用的状态Widget分为StatefulWidget和StatelessWidget,分别为动态视图和静态视图,视图的更新需要调用StatefulWidget的setState方法,这会遍历调用子Widget的build方法。如果一个页面内容比较复杂时,会包含多个widget,如果直接调用setState,会遍历所有子Widget的build,这样会造成很多不必要的开销,所以非常有必要了解Flutter中局部刷新的方式:
创新互联建站专注于宜君企业网站建设,响应式网站设计,商城网站制作。宜君网站建设公司,为宜君等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
globalkey唯一定义了某个element,它使你能够访问与element相关联的其他对象,例如buildContext、state等。应用场景:跨widget访问状态。
例如:可以通过key.currentState拿到它的状态对象,然后就可以调用其中的onPressed方法。
Flutter框架内部提供了一个非常小巧精致的组件,专门用于局部组件的刷新。适用于值改动的刷新。
实现原理:在 initState 中对传入的可监听对象进行监听,执行 _valueChanged 方法,_valueChanged 中进行了 setState 来触发当前状态的刷新。触发 build 方法,从而触发 widget.builder 回调,这样就实现了局部刷新。可以看到这里回调的 child 是组件传入的 child,所以直接使用,这就是对 child 的优化的根源。
可以看到 ValueListenableBuilder 实现局部刷新的本质,也是进行组件的抽离,让组件状态的改变框定在状态内部,并通过 builder 回调控制局部刷新,暴露给用户使用。
通过这个可以创建一个支持局部刷新的widget树,比如你可以在StatelessWidget里面刷新某个布局,但是不需要改变成StatefulWidget;也可以在StatefulWidget中使用做部分刷新而不需要刷新整个页面,这个刷新是不会调用Widget build(BuildContext context)刷新整个布局树的。
异步UI更新:
很多时候我们会依赖一些异步数据来动态更新UI,比如在打开一个页面时我们需要先从互联网上获取数据,在获取数据的过程中显示一个加载框,等获取到数据时我们再渲染页面;又比如我们想展示Stream(比如文件流、互联网数据接收流)的进度。当然StatefulWidget我们完全可以实现以上功能。但由于在实际开发中依赖异步数据更新UI的这种场景非常常见,并且当StatefulWidget中控件树较大时,更新一个属性导致整个树重建,消耗性能,因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。
通常情况下,子Widget无法单独感知父Widget的变化,当父state变化时,通过其build重建所有子widget;
InheriteddWidget可以避免这种全局创建,实现局部子Widget更新。InheritedWidget提供了一种在Widget树中从上到下传递、共享数据的方式。Flutter SDK正是通过InheritedWidget来共享应用主题和Locale等信息。
InheritedWidgetData
TestData
InheritedTest1Page
provider是Google I/O 2019大会上宣布的现在官方推荐的管理方式,而ChangeNotifierProvider可以说是Provider的一种:
yaml文件需要引入provider: ^3.1.0
顶层嵌套ChangeNotifierProvider
创建共享数据类DataInfo:
数据类需要with ChangeNotifier 以使用 notifyListeners()函数通知监听者更新界面。
使用Provider.of(context)获取DataInfo
nextPage:
使用Consumer包住需要使用共享数据的Widget
RepaintBoundary就是重绘边界,用于重绘时独立于父视图。页面需要更新的页面结构可以用 RepaintBoundary组件嵌套,flutter 会将包含的组件独立出一层"画布",去绘制。官方很多组件 外层也包了层 RepaintBoundary 标签。如果你的自定义view比较复杂,应该尽可能的避免重绘。
以上总结了几种Flutter的局部刷新的方式,可根据实际需要使用不同的方式,最适合的才是最好的。
在此之前先推荐看大佬的: 填坑指导
iOS需要注意:
1、flutter2.0要求cocoapods 升级到1.9.0
详情看这篇博客
2、原来flutter项目中的podfile文件是旧版本的ccocoapods了,删除podfile和对应的.lock,然后flutter项目重新运行使用它自动生成的podfile文件
3、安装CocoaPods
卸载cocoapods:sudo gem uninstall cocoapods
查看cocoapods版本:pod --version
指定版本安装:
sudo gem install -n /usr/local/bin cocoapods -v 1.9.3(新MacOS系统升级)
不指定版本安装
sudo gem install -n /usr/local/bin cocoapods
说明 :老项目sdk1.17.0===升级到2.0.1,当前所有操作基于win平台
到此为止环境已经准备妥当,正式进入项目修改。
所有的插件都要适配到空安全,插件是否支持均会有对应说明Null safety,适配过程不确定版本的话,可以使用dio: any,适配完事后再在pubspec.lock文件中查看具体的版本修改过来,实在有部分插件没有支持的,参考下面
部分插件在适配空安全的版本放弃维护了,得自行更新或寻找替代,如: flutter_swiper 变为 flutter_swiper_null_safety ,插件更新后要注意项目中的用法是否需要更新
2.1.1: 以前采用的是 provide 插件共享全局数据,现在变化为 provider ,用法改变, 点击参考 ,以防文章丢失,我重复一遍:
比如:
2.1.2: dio版本升级到4.0.0最新版后,部分用法改变
2.2.1
2.2.2
解决方案:
2.2.3
解决方案:
2.2.4
解决方案:
2.2.5
解决方案:
2.2.6
解决方案:
2.2.7
解决方案:
2.2.8
解决方案: child 换为sliver
2.2.8.1
解决方案: 项目目录下: android--app-build.gradle --minSdkVersion改为:18 或者19
2.2.8.2
解决方案: 在pubspec.yarm管理里面添加:publish_to
2.2.8.3
解决方案: video_player升级后字段发生了变化,initialized字段更换为:isInitialized(_controller.value.isInitialized)
2.2.8.4
解决方案:
2.2.8.5
解决方案:
2.2.8.6
解决方案: 方案一:删除ios目录下的Podfile.lock 文件然后重新运行 pod install命令
方案二:删除ios目录下的Podfile.lock与Podfile文件 重新运行flutter run或flutter build ios
方案三:删除ios目录,重新运行 flutter create . 命令,注意有"."这个符号不要忘记
2.2.8.7
这个报错一般对应的就是下面的报错,注意看后面的报错信息,看是哪个插件报错。
解决方案: 把Podfile的版本注释打开,改为platform :ios, '9.0' 或者是更高的版本
全局替换
1.将new List() 替换为[];
2.TextField的inputFormatters:[WhitelistingTextInputFormatter.digitsOnly] 替换为[FilteringTextInputFormatter.digitsOnly]
3.TextField的inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-z|A-Z|0-9]"))]替换为FilteringTextInputFormatter.allow(RegExp("[a-z|A-Z|0-9]"))
4.Stack组件中overflow: Overflow.visible改为 clipBehavior: Clip.none;overflow: Overflow.clip改为clipBehavior:Clip.hardEdge
5.ListWheelScrollView组件中clipToSize = false改为clipBehavior: Clip.none,clipToSize = true改为 Clip.hardEdge
6.TextField中maxLengthEnforced: true改为maxLengthEnforcement:MaxLengthEnforcement.enforced
7.FlatButton、RaisedButton、OutlineButton的变化: 官方参考
颜色的属性发生了变化,由原来的Color 变为了MaterialStatePropertyColor, 这是未了解决不同状态(pressed、hovered、focused、disabled)下按钮颜色的变化
例如
8.出现如下警告
9.showSnackBar报错误
解决方案: Scaffold换为ScaffoldMessenger
10.textSelectionColor弃用
解决方案:
11.charts_flutter升级后属性报错
解决方案:
12.flutter 真机调试无法访问网络,dio报错
解决方案:
android:
ios:
问题12完整参考
问题描述:
Mac环境,安装了Android Studio,以及包括Dart插件在内的Flutter插件。在终端运行 flutter doctor ,显示全部配置完成。在Android Studio中创建一个Flutter的新项目,包括运行什么的都完全没问题。但是,我从Git上克隆自己的项目,用Android Studio打开以后,有个警告“dart sdk is not configured”,并且没有Flutter Device Selection按钮,项目无法继续进行。
解决方法:
在网上找到的方法,都是这个:
1、打开File =》Setting =》Language Frameworks = Dart
2、勾选 “enable Dart support for the project”,并且选择Dart SDK path,路径为 D:\install\android\flutter\bin\cache\dart-sdk ,其中D:\install\android\flutter是flutter SDK路径
其实是对的,这就是解决方法。但是我的Android Studio是3.4.2版本的,我打开File是找不到Setting选项的。。。快捷键(ctrl + alt + s)也没反应。
开头入口被堵死了,便想着更新一下Flutter (终端运行 flutter upgrade ), 以获取最新版本的Flutter和Dart SDK, 结果终端毫不留情的直接给了我一段error。于是,经过一番耐心的查找,终于找到了三个入口:
入口一:
入口二:
打开Tools =》Flutter =》Flutter Upgrade =》Language Frameworks = Dart
入口三:
Preferences =》Language Frameworks = Dart
然后操作即可:
Flutter中Widget分为StatefulWidget和StatelessWidget,分别为动态视图和静态视图,视图的更新需要调用StatefulWidget的setState方法,这会遍历调用子Widget的build方法。当一个主页面比较复杂时,会包含多个widget,如果直接调用setState,会遍历所有子Widget的build,这是非常不必要的性能开销,有没有单独刷新指定Widget的方式呢?这个时候就要用到GlobalKey了。
一个StatefulWidget包含一个Button,一个Text,通过点击Button调用主Widget的setState方法,刷新Text,示例如下:
同样一个StatefulWidget包含一个多个Text和Button,点击Button我们只需要刷新指定的Text,通过GlobalKey的方式,实现如下:
主Widget,包含一个需要更新的TextWidget和一个不需要更新的Text
需要单独更新的Widget
传递事件的Button
这样点击Button就只会更新指定的TextWidget了,效果如下:
这只是一个简单的例子,在实际开发中为了页面刷新的高效率,模块化封装非常重要。很多情况下都只需要局部刷新,而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握
Flutter有两个常用的状态类:
标记为dirty,执行的markNeedsBuild,定义在Element类中:
当前Element节点被标记为dirty,同时调用owner的scheduleBuildFor方法:
将element元素添加到全局的“脏”链表里。
BuildOwner用来管理哪些需要更新的Widget。这个owner最开始被初始化的地方在WidgetsBinding的initInstances方法中,随后初始化了onBuildScheduled方法,对应执行的是_handleBuildScheduled,定义在WidgetsBinding类中:
ensureVisualUpdate 方法定义在SchedulerBinding类中:
在提交下一帧绘制的时候会调用到scheduleFrame方法,提交给引擎绘制,看看scheduleFrame方法,也定义在SchedulerBinding类中:
提交给引擎绘制之后,会收到onDrawFrame的回调,最终执行到_handleDrawFrame方法中,对应的是handleDrawFrame方法,定义在SchedulerBinding类中:
在RendererBinding的initInstances方法中添加了一个回调到这个List中,对应的是RenderBinding的drawFrame方法,对应的节点进行绘制渲染操作。
WidgetsBinding中的drawFrame方法:
看看这里的buildScope方法,定义在BuildOwner方法中。在上面 scheduleBuildFor 方法介绍中有提到:"scheduleBuildFor 是把一个 element 添加到 _dirtyElements 链表,以便当[WidgetsBinding.drawFrame]中调用 buildScope 的时候能够重构 element。onBuildScheduled()是一个 BuildOwner 的回调"。在 drawFrame 中调用 buildOwner.buildScope(renderViewElement)更新 elements。
_dirtyElements列表在遍历的过程中执行rebuild方法,此时将所有标记为dirty的Element节点依次执行rebuild,preformRebuild,build,updateChild,update方法,执行界面更新。完成build,update操作完成之后,后续会将需要绘制的RenderObject添加到需要layout的列表中,等待绘制渲染。所有绘制完成之后将_dirtyElments列表清空,_inDirtyList标记位置为false。
提交给引擎绘制渲染
看看super.drawFrame(),这里就执行到了RendererBinding类中,定义如下:
这里就是将最终需要绘制渲染的画面提交给引擎的地方了,绘制完成之后就在界面显示更新后的视图了。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流