一位Android程序员入坑Flutter后整理出一份超详细的学习笔记(1)

Scaffold(

appBar: AppBar(

title: Text(widget.title),

actions: […],

),

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的时候剧透了…

就是使用Navigator与Routes来实现界面跳转，实际上是整个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的支持也是同样的道理。

最后分享一份字节跳动厂内部超高质量Flutter+Kotlin笔记！技术与实战篇：

1.为什么 Flutter 是跨平台开发的终极之选？

2.在 Windows 上搭建Flutter 开发环境

3.编写您的第一个 Flutter App

4.Flutter 开发环境搭建和调试

5.Dart 语法篇之基础语法(一)

6.Dart 语法篇之集合的使用与源码解析(二)

7.Dart 语法篇之集合操作符函数与源码分析(三)

新的开始

改变人生，没有什么捷径可言，这条路需要自己亲自去走一走，只有深入思考，不断反思总结，保持学习的热情，一步一步构建自己完整的知识体系，才是最终的制胜之道，也是程序员应该承担的使命。

《系列学习视频》

《系列学习文档》

《我的大厂面试之旅》

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
.在 Windows 上搭建Flutter 开发环境

3.编写您的第一个 Flutter App

4.Flutter 开发环境搭建和调试

5.Dart 语法篇之基础语法(一)

6.Dart 语法篇之集合的使用与源码解析(二)

7.Dart 语法篇之集合操作符函数与源码分析(三)

新的开始

改变人生，没有什么捷径可言，这条路需要自己亲自去走一走，只有深入思考，不断反思总结，保持学习的热情，一步一步构建自己完整的知识体系，才是最终的制胜之道，也是程序员应该承担的使命。

《系列学习视频》
[外链图片转存中…(img-9uK4mS60-1714982855879)]

《系列学习文档》

[外链图片转存中…(img-ZnSGYYog-1714982855880)]

《我的大厂面试之旅》

[外链图片转存中…(img-PvFB1IK3-1714982855881)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！