番外篇-Flutter初识三问

Posted 2021-04-29 IT烂笔头

番外篇-Flutter初识三问

问题

• StatefulWidget与StatelessWidget使用时机？

• Flutter如何加载图片（网络或者本地）？

• Scaffold是什么？

讲讲State

在android中，您可以通过直接对view进行改变来更新视图。然而，在Flutter中Widget是不可变的，不会直接更新，而必须使用Widget的状态。

这是Stateful和Stateless widget的概念来源。一个Stateless Widget就像它的名字，是一个没有状态信息的widget。
例如：在Android中，如果您只想将一个logo使用ImageView展示出来。logo在运行时不会发生改变，在Flutter中可以通过StatelessWidget实现。

但是，如果您希望通过网络请求数据后来更新您的的界面，则需要使用StatefulWidget，并通知Flutter框架(setState)需要更新该widget。

记住官方的一个规则：如果一个widget发生了变化（用户与它交互），它就是有状态的。但是，如果一个子widget对变化做出反应，而其父widget对变化没有反应，那么包含的父widget仍然可以是无状态的widget

加载图片

支持格式：JPEG、WebP、GIF、PNG、BMP、WBMP
主要是通过：

• 网络

1new Image.network(
2          imgUrl,
3          scale:1.0)

• 本地

1// 注意path需要包含图片的后缀的
2new Image.asset(path, width:24.0, height: 24.0);

另外在加载资源图片是需要在pubspec.yaml中声明(以上一节的项目为例)：

 1flutter:
 2  uses-material-design: true
 3  assets:
 4    - images/tab_association_grey.png
 5    - images/tab_association_yellow.png
 6    - images/tab_discovery_grey.png
 7    - images/tab_discovery_yellow.png
 8    - images/tab_me_grey.png
 9    - images/tab_me_yellow.png
10    - images/tab_sport_grey.png
11    - images/tab_sport_yellow.png
12    - images/tab_training_yellow.png
13    - images/tab_training_grey.png

就上面这些方式吗？答案是否定的。肯定还有别的方式，本期不做介绍，后面用到的时候再补充。

Scaffold是什么

Scaffold实现了Materia design（材料设计）风格的布局结构。Scaffold widget提供了实现：appBar、floatingActionBar等材料设计风格控件的API。所以当我们想要使用MateriaDesign的一些布局方式就会选择Scaffoldwidget。

预告

下一节我们将继续围绕实际项目，通过Flutter来实现效果。主要围绕SliverAppBar的实现效果来讲解。

---