Flutter分享
发展历史
- Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会上亮相的，其目的是能够以每秒120帧的速度持续渲染。
- Beta1版本于2018年2月27日在2018 世界移动大会公布。
- Beta2版本2018年3月6日发布。
- 1.0版本于2018年12月5日(北京时间)发布。
- 目前最新版本是1.7.10
简介
-
跨平台
Flutter 不使用 WebView 也不使用操作系统的原生控件，而是自己有用一个 高性能 的渲染引擎，可以非常高效的进行组件绘制UI渲染。这样 Flutter 可以保证在 IOS 与 Android 上的UI表现一致性 ，开发者无需过多关注平台差异性上的问题。对比ReactNative、Weex
-
高性能
Flutter 是基于最底层 Skia 的图形库去渲染(我觉得有点类似于 DOM 中的 canvas , 从平台上得到一个画布，自己在画布上去渲染)，所有的渲染都有 Skia 来完成，不需要与原生平台之间频繁通信。
-
HotReload
在debug下的Flutter工程可以快速热重载到真机上
Flutter结构图
Flutter结构
工程目录简介
-
android目录
这里存放的是Flutter与android原生交互的一些代码，这个路径的文件和创建单独的Android项目的基本一样的。不过里面的代码配置跟单独创建Android项目有些不一样。
-
ios目录
这里存放的是Flutter与ios原生交互的一些代码。
-
lib目录
这里存放的是Dart语言编写的代码，这里是核心代码。
-
pubspec.yaml文件
配置flutter的资源依赖、库依赖
配置依赖库
dependencies:
cupertino_icons: ^0.1.2
dio: 2.1.3
package_info: ^0.4.0+2 #获取应用信息
配置资源文件
flutter:
assets:
- assets/image.jpg
- assets/ic_women.png
- assets/ic_man.png
- assets/ic_order_list_cash_icon.png
用法
new Image(image: new AssetImage('assets/image.jpg'));
Flutter实践
构建一个简单的Flutter页面
组件结构
-
Widget
一切即Widget。在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上
-
StatelessWidget 和 StatefulWidget
两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件，比如标题栏中的标题；而StatefulWidget则是面向可能会改变UI状态的控件，比如有点击反馈的按钮。
- 布局组件
- Container
- Row
- Column
- Stack
- Flex
Flutter的生命周期
- initState:插入渲染树的时候调用，这个函数在生命周期中只调用一次
- didChangeDependencies:函数会紧跟在initState之后调用；当依赖的InheritedWidget rebuild,会触发此接口被调用
- didUpdateWidget:当组件的状态改变的时候就会调用didUpdateWidget,比如调用了setState.
- deactivate: 在组件可见状态变化的时候会调用。在dispose之前，会调用这个函数。
-
dispose: 组件要被销毁了
1768723716-5b188ca549250_articlex.png
Flutter与原生的交互
- 原生跳Flutter页面路由传参 ui.window.defaultRouteName
# java
flutterView.setInitialRoute("{\"id\":112233}");
#dart
var params = json.decode(ui.window.defaultRouteName);
params["id"]=112233
- flutter调用原生方法
#java
private static final String CHANNEL = "samples.flutter.io/battery";
new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
new MethodCallHandler() {
@Override
public void onMethodCall(MethodCall call, Result result) {
// TODO
if (call.method.equals("getBatteryLevel")) {
result.success(100)
} else {
result.notImplemented();
}
}
});
#flutter
const platform = const MethodChannel('samples.flutter.io/battery');
int result = await platform.invokeMethod('getBatteryLevel');
调研存在的问题
- 其官方编程语言为Dart，是一门全新的语言。所以说，上手成本比较高，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始
编译后的包体积较大 - 第三方工具库，目前还比较欠缺，需要自己造轮子
- 错误提示信息不够友好，难以定位到具体代码行
- 遇到问题的寂寞，目前应用的人群还较少，有时候遇到问题在社区里面搜不到解决方案
网友评论