Android程序员的Flutter学习笔记

时间:2022-06-19 06:59:48

作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧.

Google自2017年第一次提出Flutter, 到2018年Beta, 再加之RN的各种风波与问题, 使得Flutter的热度不断上升, 国内不少公司都公布Flutter在其产品中的应用, 如美团, 闲鱼等.

前言

Flutter作为跨平台框架, 常常被人拿出来与React Native, 以及Xamarin进行对比, 除了大家都是跨平台框架之外且能达到近乎Native的体验之外, Flutter与这两者的原理大不相同.

让我们来看看这三者的结构图吧.

Android程序员的Flutter学习笔记

Android程序员的Flutter学习笔记

Android程序员的Flutter学习笔记

可能有一些复杂, 咱大致解释一下.

React Native跟Xamarin都是基于mapping native代码来实现所谓的Native体验的框架, 只是RN基于JS引擎 + Bridge与native打交道, 并且在运行时进行绑定, 而Xamarin是基于微软的基于Linux的C#虚拟机mono + JNI与native进行通信.

这里Android与iOS还是有差别的, 如RN在iOS上JS引擎不支持JIT, 会一定程度影响效率, Xamarin在iOS上可以直接编译成iOS平台可以执行的程序, 所以在实际运行起来的性能是一样的, 唯一的差别就是微软得更快的支持API同步.

对于Flutter来说, 由于他的渲染引擎使用了Skia直绘, 加上基于C++的Dart引擎, 所以在不同平台上没有差别, 加之其实现了Android Material Design与iOS Cupertino两套UI组件, 所以即便是自绘组件, 看起来还是跟原生的一个样子.

通过对三种跨平台引擎的大致了解, 我们可以看出来, 他们都达到了一定程度的Native体验, 然则各自都有一定的性能损耗, 比如RN的JS引擎加载JS, 以及Bridge通信的损耗, Xamarin Mono虚拟机与Java通信的损耗, 以及Flutter Skia渲染与Native Android渲染的差异等.

Flutter笔记

如何启动一个app

Android需要在Manfest里面指定带有MAIN action与LAUNCHER category的Activity声明, 而Flutter只需要一行.

void main() => runApp(MyApp());

其中MyApp就是一个普通的Widgets(View).

View vs Widgets

Flutter没有View, 与之对应的是Widget, 并且分为StatelessWidgets与StatefulWidgets, 前者是个静态View, 后者是动态通过Data来更新的View.

  • Stateless
Text(
'I like Flutter!',
);
  • Stateful
class StatefulText extends StatefulWidget {
@override
State<StatefulWidget> createState() => _TextState();
} class _TextState extends State<StatefulText> {
// Default placeholder text
String textToShow = "I Like Flutter"; void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is Awesome!";
});
}
@override
Widget build(BuildContext context) {
...invoke _updateText
}
}

实际上是因为StatefulWidgets通过调用StatesetState方法来触发整个Widgets树的重绘, 并且在重绘之前会调用传进去的(){ ... }block.

怎么写Layout, XML到哪里去了.

实际上Flutter没有xml了, 并且是通过Widgets的嵌套来实现一个布局的.

如:

  • Center是一个可以把子View放置在*的容器.
  • Row对应的就是LinearLayout + Horizontal, Column对应的就是LinearLayout + Vertical, 他们都具备一个属性叫做crossAxisAlignment, 有点类似gravity, 来控制子View相对于父View的位置.
  • Expanded支持一个类似weight的属性, 叫flex.
  • Container是一个具有decoration属性的容器, 可以用来控制背景色, border, margin等等.
  • Stack有点像是一个特殊的RelatetiveLayout或者ConstraintLayout, children属性指定了它的子View, 第一个是Base View, alignment属性指定了后面的子View相对于BaseView的位置, 如alignment: const Alignment(0.6, 0.6)指定了位于BaseView右下角的位置.
  • ListTile是一个特殊的ListItem, 有三个属性, 分别是左边的Icon (leading), 文字 (title), 以及右边的Icon (trailing).
  • 还有诸如ListView, GridView, Card等等比较熟悉的Widgets.

另外有一个类似于我们Activity的Widgets:

  • 叫做MaterialApp, 可以指定theme, title, 以及子View home, 还有更重要的页面跳转routes.
MaterialApp(
title: 'Welcome to Flutter',
home: ...,
routes: <String, WidgetBuilder> ...,
theme: ThemeData(
primaryColor: Colors.white
),
)

还有一个类似于Fragment的:

  • 叫做Scaffold, 中文意思是脚手架, 它包含一个appBar (ActionBar)与一个body, appBar可以指定title与actions (类似于action button的点击事件).
Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[...],
),
body: ...,
)

如何从父View中Remove一个元素

答案是没有... 因为在Flutter看来, Widgets的树结构是不可以被更改的, 但是如果想更改, 则是通过StatefulWidgets的方法, 通过setState来更改Data, 触发Widgets重绘, 从而替换掉之前的Widgets.

喜欢画Canvas的同学怎么办?

Flutter同样支持, CustomPaint作为一个 Widgets就支持传入一个实现CustomPainter抽象类的参数, 而CustomPainter的抽象方法也类似于Android View的onDraw.

void paint(Canvas canvas, Size size)

bool shouldRepaint(CustomPainter oldDelegate)

如何自定义View

不用继承, 而使用类似Android ViewGroup的办法, 通过组合(composing)与封装的方法来实现, 通过小Widgets组合成需要的新Widgets.

页面跳转怎么办, 四大组件之一的Intent跑哪里去了

貌似在讲类似于Activity的MaterialApp的时候剧透了...

就是使用NavigatorRoutes来实现界面跳转, 实际上是整个Widgets的替换.

routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => MyPage(title: 'page A'),
'/b': (BuildContext context) => MyPage(title: 'page B'),
'/c': (BuildContext context) => MyPage(title: 'page C'),
} Navigator.of(context).pushNamed('/b');

如何处理外部的Intent

实际上还是需要在Flutter App的Android壳子中注册这个filter, 然后在FlutterActivity中拿到存下来,

FlutterView初始化后再通过Bridge, 官方叫MethodChannel从Java里获取,进行下一步逻辑.

可以看个简单的例子.

new MethodChannel(getFlutterView(), "app.channel.shared.data").setMethodCallHandler(
new MethodCallHandler() {
@Override
public void onMethodCall(MethodCall call, MethodChannel.Result result) {
if (call.method.contentEquals("getSharedText")) {
result.success(sharedText);
sharedText = null;
}
}
}); getSharedText() async {
var sharedData = await platform.invokeMethod("getSharedText");
if (sharedData != null) {
setState(() {
dataShared = sharedData;
});
}
}

常用的startActivityForResult怎么办.

这个Flutter有完全对应的办法, 而且用起来很方便, 结合之前说的页面跳转:

Map xxx = await Navigator.of(context).pushNamed('/xxx');

Navigator.of(context).pop({xxx});

异步怎么办, runOnUiThread()哪里去了

Flutter有点像JS, 是一个单线程模式, 所以只是通过模拟来构建简单的异步, 关键字就是类似于kotlin coroutines一样, 通过await+async来处理.

如:

loadData() async {
response = await http.get(xxx);
setState(() {xxx});
}

但是由于它的单线程, 所以无法做很长的阻塞操作, 像http请求的延迟正常情况可能都是毫秒级的, 但是数据的处理等, 可能就得秒级了.

这也是RN在线程方面的做android程序的一个痛点, Flutter采用了比较容易想到的曲线救国的办法, 提供了一个叫Isolate的对象, 它实际是一个基于socket的数据通道, 相当于把数据放在一个独立的进程进行处理, 然后再通过socket发送回程序进程, 还记得进程间通信办法之一的管道吗...

具体API可以参考文档1...,2....

Flutter 替代OkHttp的网络库

自带了http库, 直接http.get(url), 在线程部分的代码实例里也有涉及.

通过类似gradle的文件pubspec.yaml引入.

dependencies:
...
http: ^0.12

^表示不升大版本, 并取最新版本, 比gradle的+要范围更小.

常见的LCE(Loading Content Error)里面的Loading怎么show

Flutter有一个widget叫做ProgressIndicator, 比如我们期望有一个转圈圈的Loading界面在数据加载出来之前.

我们就可以通过StatefulWidgets, 根据数据, 或者List Widgets的个数 (如果是显示一个List的话)来判断是否显示Loading, 使用子类CircularProgressIndicator, 来替换页面的Widgets.

当然也是通过setState(() {...})来触发界面刷新的, 可以在initState()内触发加载数据的异步操作.

不同分辨率的图片资源怎么放

这个有点像iOS了, 即有1x,2x,3x:

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png // 2.0x image
images/3.0x/my_icon.png // 3.0x image

不一样的一点还需要添加到类似gradle的文件pubspec.yaml里.

assets:
- images/my_icon.jpeg

字符串怎么存储

Flutter没有像Android的string.xml的东西, 目前来说最好的就就是存成静态字符串.

class Strings {
static String welcomeMessage = "Welcome To Flutter";
} Text(Strings.welcomeMessage)

Gradle变成什么了

前面说网络库, 图片资源的时候提到过, 提供了一个叫pubspec.yaml的文件, 具体支持的规则可以查看这个文档.

Fragment与Activity呢?

之前做过类比, 如MaterialApp有点类似于Activity, 而Scaffold都点类似Fragment, 实际上他们两个都是Flutter的Widgets, 也就是说其实只有View的概念了.

还有生命周期吗?

Flutter有一个叫做WidgetsBinding的可以提供类似生命周期的回调.

四种状态inactive (iOS专用), paused(相当于onPause, 退后台), resumed(相当于onPostResume, 到前台), suspending(android专用, 相当于onStop).

一般在StatefulWidgets的State中注册与反注册.

 @override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
} @override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}

ScrollView vs ListView

Flutter没有ScrollView, 合并到了ListView, 通过ListView.builder创建的ListView提供了View复用的逻辑.

ListView.builder(
itemCount: widgets.length,
itemBuilder: (BuildContext context, int position) {
return Text(xxx);
}))

其中itemBuilder有点像Android ListView的getView, 官方文档说它会自动回收Element给你, 但是事实上每次你都需要根据position生成新的Widgets, 所以呢应该是Flutter在内部回收了之前的Widgets并在你重新创建的时候又用上了.

BTW, 通过ListView构造来显示就不具备这种特性, 所以大量数据需要用Builder.

Flutter横竖屏怎么玩.

因为它实际上还是借助了Android程序的壳子, 所以如果AndroidManifect定义了android:configChanges="orientation|screenSize", 则Flutter会自己hanlde.

怎么处理Gesture

Flutter提供了GestureDetector, 它相当于一个Container, 将我们期望接收手势的Widgets放进去, 再实现事件回调就行了.

GestureDetector(
child: FlutterLogo(
size: 200.0,
),
onTap: () {
print("tap");
},
)

它同样支持其他的手势, 如onDoubleTap等等等.

字体怎么弄

首先需要在pubspec.yaml里面配置需要的字体库:

fonts:
- family: MyCustomFont
fonts:
- asset: fonts/MyCustomFont.ttf
- style: italic

然后在Text的style属性进行配置.

Text(
'This is a custom font text',
style: TextStyle(fontFamily: 'MyCustomFont'),
)

Hint哪里去了, 错误信息怎么输出

对于输入框的Hint基本一致, 可能就是换了个名字, 一看便知.

TextField(
decoration: InputDecoration(hintText: "This is a hint", errorText: _getErrorText()),
)

总结

Flutter在视图渲染上另辟蹊径, 性能优势凸显, 在跨平台框架属于一匹黑马, 又有Google撑腰, 值得在Mobile勤耕多年的同学入手.

由于作者曾经从事过2年的Webkit开发工作, 拜读了Flutter的渲染模式, 很像是Webkit/Chrome/Blink的思路, 通过查证, 起草者确实有大批同样的人, 如果你还没有入坑RN, 或许Flutter可以作为跨平台方案学习的首选哦.

同样Google自己也有很多Plugin去支持更多扩展功能, 如GPS, Camera, SharePreference, Database. 还例如Firebase这种亲儿子级的服务也是全面支持Flutter. 这些都可以通过Dartlang来查询.

当然也可以自己去开发需要的Plugin来适配需要的功能, 基于的技术就是上面有提的MethodChannel, NDK的支持也是同样的道理.

Reference

https://flutter.io/docs/get-started/flutter-for/android-devs

Android程序员的Flutter学习笔记

Android程序员的Flutter学习笔记的更多相关文章

  1. 程序员带你学习安卓开发系列-Android文件存储

    这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:.Net程序员快速学习安卓开发-布局和点击事件的写法 主要讲解了布局和点击事件的写法. 上篇文章补充 ...

  2. Flutter学习笔记(30)--Android原生与Flutter混编

    如需转载,请注明出处:Flutter学习笔记(30)--Android原生与Flutter混编 这篇文章旨在学习如何在现有的Android原生项目上集成Flutter,实现Android与Flutte ...

  3. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  4. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  5. Android程序员接下来的路该如何走?

    随着“5G”(第五代移动通信技术)商用进程越来越快,各个芯片和终端厂商们都已经开始布局准备,想必智能手机会是消费者最先能够接触到5G的重要终端,而和其相辅相生的移动互联网也势必会有新的发展. 但是和行 ...

  6. Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序

    如需转载,请注明出处:Flutter学习笔记(26)--返回拦截WillPopScope,实现1秒内点击两次返回按钮退出程序 在实际开发中,为了防止用户误触返回按钮导致程序退出,通常会设置为在1秒内连 ...

  7. Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗

    如需转载,请注明出处:Flutter学习笔记(41)--自定义Dialog实现版本更新弹窗 功能点: 1.更新弹窗UI 2.强更与非强更且别控制 3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消 ...

  8. 给Android程序员的六个建议

    给Android程序员的六个建议 分类: 安卓相关2015-07-14 23:58 177人阅读 评论(0) 收藏 举报 android程序员 如果你一年前写的代码 , 在现在看来你还感觉写的很不错 ...

  9. 程序员带你学习安卓开发-XML文档的创建与解析

    这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:程序员带你学习安卓开发系列-Android文件存储 因知识连贯性推荐关注头条号:做全栈攻城狮.从头开 ...

随机推荐

  1. JS数字计算精度误差的解决方法

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...

  2. 用原生js写碰撞变色效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Apache Spark源码走读之17 -- 如何进行代码跟读

    欢迎转载,转载请注明出处,徽沪一郎 概要 今天不谈Spark中什么复杂的技术实现,只稍为聊聊如何进行代码跟读.众所周知,Spark使用scala进行开发,由于scala有众多的语法糖,很多时候代码跟着 ...

  4. shell script 基本语法

    几个符号的意义$#:代表后接的参数『个数』,以上表为例这裡显示为『 4 』:$@:代表『 "$1" "$2" "$3" "$4&q ...

  5. javascript 学习随笔6

    改变html内容 document.getElementById("p1").innerHTML="New text!"; var element=docume ...

  6. 老李谈HTTP1&period;1的长连接

    老李谈HTTP1.1的长连接   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  7. 详解Google Chrome浏览器(操作篇)(下)

    开篇概述 由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容.对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即 ...

  8. JSON基础&lpar;JavaScript&rpar;

    1.在JS中使用JSON,先将字符转换为JOSN格式然后就可以直接使用: var obj = JSON.parse(cInfoObj) $('#staffName').val(obj.candidat ...

  9. js中检测数据类型的几种方式

    1.typeof 一元运算符,用来检测数据类型.只可以检测number,string,boolean,object,function,undefined. 对于基本数据类型是没有问题的,但是遇到引用数 ...

  10. Dijkstra 算法,用于对有权图进行搜索,找出图中两点的最短距离

    Dijkstra 算法,用于对有权图进行搜索,找出图中两点的最短距离,既不是DFS搜索,也不是BFS搜索. 把Dijkstra 算法应用于无权图,或者所有边的权都相等的图,Dijkstra 算法等同于 ...