flutter 之踩坑的日子 (2)



上次说到，本次将从实际项目入手，讲解flutter开发过程中遇到的那些坑，以及flutter相关组件的使用。

那么，就从flutter的模板项目开始吧。

在VSCODE中，可以通过从命令面板输入指令的方法，使用flutter默认模板，创建一个新的项目。

与其他官方示例项目一样，这个项目中，包含了flutter中最典型以及最重要的内容。

首先要记住一件事，flutter中，一切都是widget。

这个词一般被翻译成组件，或者组装件，构造件。在这里采用组件的说法。组件分为有状态组件和无状态组件两种，它们构成flutter程序的界面，并且根据程序运行情况，实时更新。

无状态组件( StatelessWidget )构建界面。

有状态组件( StatefulWidget )处理内容更新。

官方项目的入口，是main.dart ，这个文件的主函数是main() ，使用runApp来处理程序逻辑，

void main() {
runApp(MyApp());
}

MyApp是主页面的实例化对象，同时也是一个无状态组件。

在flutter开发时，似乎不需要new ，就可以创建新的对象。在常见的高级语言里，new这个环节通常是不能省略，而且要和释放成对使用的。这里是DART语言和其他语言不同的地方。

class MyApp extends StatelessWidget

这行代码声明了一个名为MyApp的类，继承自 StatelessWidget。

@override

Widget build(BuildContext context)

接下来，这个类重载了build方法，这个方法用于构造MyApp本身，以及隶属于MyApp的所有下级组件。

return MaterialApp(

build方法返回了一个MaterialApp组件。这里可以看出，flutter描述组件的时候，是将组件某个具体参数的值包含在代码中的。因为组件的参数，也是其他组件，或者最直接的资源如文本，图片等。

项目中的MaterialApp的构造方法，使用了3个参数：title ,theme和home 。这其中最重要的是home，因为它是真正返回页面的组件，同时也是一个有状态组件。

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

// This is the theme of your application.

primarySwatch: Colors.blue,

visualDensity: VisualDensity.adaptivePlatformDensity,),

home: MyHomePage(title: 'Flutter Demo Home Page'),

);

}

另外需要注意的一点就是，这三个参数并非MaterialApp的全部构造参数，由于大部分的构造参数都具有默认值，所以我们在这里只选用了三个。

class MyHomePage extends StatefulWidget

MyHomePage才是真正处理了页面内容的组件，它继承自StatefulWidget，要求传递一个名为title的构造参数。最重要的是，它重载了createState方法，返回了一个类型为_MyHomePageState的状态类。

组件数据的变化，属于组件的状态，要在状态类中处理。

这里涉及到一个日常不太会考虑的小细节，对于手机平台来说，页面有可能被休眠，销毁，释放。所以调用页面类方法或者变量的时候，通常仅限于在本页面类内部。否则可能会尝试调用已经被销毁的页面方法，从而产生不必要的异常。

如果需要在页面之间传递参数或者值的话，有其他的方法。

下面来看MyHomePageState这个状态类的构造方法。这个类继承自State模板类.

class _MyHomePageState extends State<MyHomePage>

注意，一个有状态组件包括组件类和状态类两个类。其中状态类在组件类重载的createState方法中被实例化。

同时，状态类返回用于展示的组件。在这个项目里是Scaffold组件。这个组件是脚手架组件，用于构造基础的flutter软件页面。这个页面可以包括顶部标题区、组件区、底部导航区。

OK，下面将在这套模板项目的基础上，开发我们自己的项目。