扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
flutter加载h5很卡的解决方法如下：
创新互联技术团队十载来致力于为客户提供网站建设、成都做网站、品牌网站制作、网络营销推广、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了数千家网站，包括各类中小企业、企事单位、高校等机构单位。
一种临时解决方案，在切换动画加载完毕后，再去构造 WebView，这样从用户角度上看，就不会有路由切换动画的卡顿了。class WebViewPage extends StatefulWidget {undefined
final String uri;
WebViewPage({undefined
@required this.uri,
}) : assert(uri != null);
@override
_WebViewPageState createState() = _WebViewPageState();
}
class _WebViewPageState extends State {undefined
WebViewController _controller;
bool _animationCompleted = false;
@override
Widget build(BuildContext context) {undefined
// 主要是下面的代码
var route = ModalRoute.of(context);
if (route != null !_animationCompleted) {undefined
void handler(status) {undefined
if (status == AnimationStatus.completed) {undefined
route.animation.removeStatusListener(handler);
setState(() {undefined
_animationCompleted = true;
});
}
}
route.animation.addStatusListener(handler);
}
return Scaffold(
title: widget.title,
backgroundColor: Colors.white,
body: _animationCompleted
? WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {undefined
_controller = webViewController;
_loadHtmlFromAssets();
},
)
: Container(),
);
}
_loadHtmlFromAssets() async {undefined
var uri = Uri.dataFromString(
await rootBundle.loadString(widget.uri),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString();
_controller.loadUrl(uri);
}
}
Fluent是目前国际上比较流行的商用CFD软件包，在美国的市场占有率为60%，凡是和流体、热传递和化学反应等有关的工业均可使用。
它具有丰富的物理模型、先进的数值方法和强大的前后处理功能，在航空航天、汽车设计、石油天然气和涡轮机设计等方面都有着广泛的应用。
FLUENT软件包含基于压力的分离求解器、基于密度的隐式求解器、基于密度的显式求解器，多求解器技术使FLUENT软件可以用来模拟从不可压缩到高超音速范围内的各种复杂流场。
FLUENT软件包含非常丰富、经过工程确认的物理模型，由于采用了多种求解方法和多重网格加速收敛技术，因而FLUENT能达到最佳的收敛速度和求解精度。
灵活的非结构化网格和基于解的自适应网格技术及成熟的物理模型，可以模拟高超音速流场、传热与相变、化学反应与燃烧、多相流、旋转机械、动/变形网格、噪声、材料加工等复杂机理的流动问题。
之前开发了一个纯Flutter的项目，结果接到个新的需求需要使用Flutter单独开一个模块集成到原有的android项目中
下面分享一下如何集成现有的项目和如何继承以及碰到的问题
1.首先第一步 修改gradle
因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库 所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃
2.新建一个FlutterModel的工程
2.使用aar文件 因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的
说以我们需要 打包aar并上传服务器
上传完成后在android中引用
在开发中遇到的问题
1.关于android和Ios中的跳转传参问题
这个问题在android端还是比较方便的 但是的在Ios端并不怎么好实现
最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作
flutter_boost github地址：
集成文档：
集成文档给出了 但是没有android的 尴尬
下满分享下android的集成
（1）在flutter的 pubspec.yaml工程中添加
（2）修改android工程
使用本地工程的时候需要在工程共添加
使用aar的时候不需要添加
（3）在android工程中添加对应的条状路由配置
（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况
所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画
（5）跳转并传参
//params 传多个参数可以使用json的形式
2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象
解决方式：1.服务换证书 （但是后台太忙暂时没有支持的人员）
2.ios使用原生的loading解决
3.在使用dio的时候出现ios部分手机 网络请求缓慢问题
解决方法：请求的时候使用http 2.0协议
插件地址：
这种方法最常见，但是有些地方引用的话，刷新的成本比较大，刷新的是整个页面，数据太多加载太慢的话，会有闪烁的现象
这种方法类似于iOS中的set方法，通过设置某个属性的时候，去刷新某个控件。在flutter中这种刷新方式，是对上面setState(){}方法的改进，根本的方法还是setState(){}，只不过是通过方法去刷新某个控件。如下：
首先在pubspec.yaml中添加provider依赖
下面通过provider来实现一个发送验证码的案例。
创建一个TimerModel文件
页面布局如下：
本文对比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加载速度，内存使用情况。
测试网页打开的速度，只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳，时间戳的差即为打开网页的时间
为了使差异更明显，我们选择较为复杂的 新浪首页 进行加载的对比，为了减小网络对加载速度的影响，我们让手机连接同一个网络，分别进行 10 次测试然后取平均值，另外，我们需要关闭 WebView 的缓存，防止缓存对加载速度产生影响
下面使笔者进行 10 次测试所得到的数据
结果让我有点惊讶，一直以为 WKWebView 会是个王者。结果看，速度上 WKWebView 略慢一点，不过总体差异不大（该结果仅仅是测试新浪的结果，仅供参考啦）
在这里，笔者又加了一个测试，尝试记录从 viewController 的 viewDidLoad 到 webview 的 didFinish 时间，测试了新浪的数据，如下：
UIWebViewA ： 4970、3808、3815、4250、3556 avg(4079.8) （加载完所有页面）
UIWebViewB ： 4103、3124、3070、3256、2835 avg(3277.6)（加载sina完毕）
WKWebView ： 3672、3032、2892、2912、2739 avg(3049.4)
flutter_webView ： 4532、3901、4310、3496、3378 avg(3923.4)
其中可以看到，webView 有两行，UIWebViewB 的数据就是加载 sina 主站的时间；UIWebViewA 的数据是因为在加载完 sina 主站之后，新浪又加载了一个 ，所以导致总时间延长，不过即使按照 UIWebViewB 的数据来比较，也是 wkWebView 略胜一筹。
此处可以看出 flutter_webView 使用的是 wkwebView，所以它吃亏的主要原因是 flutter 包了一层。
结论：
速度（didStart - didFinish） UIWebView flutter_webview WKWebView
速度（viewDidLoad - didFinish）WKWebView UIWebView flutter_webview
这里查看内存使用的是 xcode 的 debug session 中的 memory。
首先看之前测试时，连续打开十次新浪的内存情况
接着我们在看一下打开淘宝首页的内存情况
从图上可以看出，WKWebView 在内存方面有很大的优势啊，UIWebView 的内存是真的伤啊，然后 debug 看了一下 flutter_webView，他使用的就是原生的 webView 。
他相比较原生 WKWebView 的内存开销稍大一点，从测试表现来看，一般大个 30 MB 左右。
结论：内存 WKWebView flutter_webview UIWebView
可以在 html5test 中对浏览器的兼容性进行评分，通过测试发现得分分别如下
因为 flutter 里使用的就是 WK，所以和原生的 WKWebView 一样都是 444 分，比 UIWebView 的 437 略胜一筹
结论：兼容性 WKWebView = flutter_webview UIWebView
UIWebView : 速度相比较 WKWebView 稍快一点，但是内存是一大硬伤，所以只要条件允许，就不推荐使用了
WKWebView : 速度略慢一点，不过差别不大，总体可以接受。是比UIWebView更好的选择，推荐使用。
flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以总体和 native WKWebView 表现差不多。如果是混编项目中，因为它被包了一层，所以页面加载上存在一定的劣势，所以混编项目中仍然推荐使用 WKWebView。不过如果从多端考虑、以及项目可迁移等，那么使用也未尝不可，就是维护成本要增加一些，需要维护两套 webView。这个就需要根据自己的情况自己取舍了。
文章转自：
用Android Stduio创建Flutter项目的时候，会出现各种问题，踩了一个又一个，最后编译的时候可能会出现一直显示Running Gradle task 'assembleDebug'然后就不动了，或者会显示Could not resolve io.flutter等问题，归根结底是网络无法访问到Google服务引起的，两种解决方案：
1.具有比较良好的访问谷歌的网络环境
2.修改镜像源为国内的：
找到Flutte SDK目录下的Flutter打包配置文件flutter.gradle
路径为flutter\packages\flutter_tools\gradle\flutter.gradle
第一处配置：
buildscript {
repositories {
//注释
// google()
// jcenter()
//添加
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
}
}
第二处配置：
class FlutterPlugin implements PluginProject {
//注释
// private static final String MAVEN_REPO = " ";
//添加这行
private static final String MAVEN_REPO = " ";
第三处配置：
void addFlutterDependencies(buildType) {
String flutterBuildMode = buildModeFor(buildType)
if (!supportsBuildMode(flutterBuildMode)) {
return
}
String repository = useLocalEngine()
? project.property('local-engine-repo')
: MAVEN_REPO
最后一处，项目中的配置，修改Flutter项目下的android下的build.gradle：
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
修改完成后，再build，就可以正常构建了！！！
记录下坑
一开始我就使用Future、async、await去做异步操作，以为这样能解决问题，经过一天研究发现他们都还在同一个线程里面，也就是UI线程，导致卡顿，这明显不是我们想要的异步加载数据。
Dart真正的线程叫隔离（Isolate）
难受香菇
有点心累，记录下吧。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网