前端开发进阶篇——Flutter起步

1. Flutter简介

        Flutter是谷歌的移动应用UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter可以与现有的代码一起工作。Flutter是完全免费、开源的。

2. Flutter入门

        使用dart语言写一个HelloWorld程序：

import 'package:flutter/material.dart';//主函数（入口函数），下面我会简单说说Dart的函数
  void main() =>runApp(MyApp());// 声明MyApp类
  
  class MyApp extends StatelessWidget{  //重写build方法
  @override
  Widget build(BuildContext context){    //返回一个Material风格的组件
   return MaterialApp(
      title:'Welcome to Flutteraa',
      home:Scaffold(        //创建一个Bar，并添加文本
        appBar:AppBar(
          title:Text('Welcome to Flutter'),
        ),        //在主体的中间区域，添加一个hello world 的文本
        body:Center(
          child:Text('Hello World'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

       导入了Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言， Flutter默认提供了一套丰富的Material风格的UI组件。      

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

• 应用入口函数。Flutter 应用中main函数为应用程序的入口。main函数中调用了runApp 方法，它的功能是启动Flutter应用。runApp它接受一个Widget参数，在本示例中它是一个MyApp对象，MyApp()是Flutter应用的根组件。Dart是面向对象的语言，即使是函数也是对象，并且属于Function类型的对象。这意味着函数可以分配给变量或作为参数传递给其他函数。函数体里只有一行代码，所以可以直接使用=>来省略{}，只有函数体里只有一行时，才可以使用，否则请使用大括号。

• MyApp类代表Flutter应用，它继承了 StatelessWidget类，在Flutter中，大多数东西都是widget（后同“组件”或“部件”），包括对齐(alignment)、填充(padding)和布局(layout)等，它们都是以widget的形式提供。Flutter在构建页面时，会调用组件的build方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面。

•  StatefulWidget和StatelessWidget区别

    StatefulWidget： 具有可变状态的窗口部件，可以随时变化，比如我们常见的进度条，随着进度不断变化。

    StatelessWidget：不可变状态窗口部件，使用时不可以改变，比如固定的文字。

• Scaffold 是 Material 库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕widget树（后同“组件树”或“部件树”）的body属性，组件树可以很复杂。

• body的组件树中包含了一个Center 组件，Center 可以将其子组件树对齐到屏幕中心。

• home 为Flutter应用的首页，它也是一个widget。

3. 路由管理

        路由(Route)在移动开发中通常指页面（Page）所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

        MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库提供的组件。

        MaterialPageRoute 构造函数的各个参数的意义：

MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

• builder 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。

• settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。

• maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。

• fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

    Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。

• Future push(BuildContext context, Route route)

                将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

• bool pop(BuildContext context, [ result ])

                将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

4. 资源管理

        Flutter APP安装包中会包含代码和 assets（资源）两部分。Assets是会打包到程序安装包中的，可在运行时访问。常见类型的assets包括静态数据、配置文件、图标和图片等。

        assets指定应包含在应用程序中的文件， 每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径

    1）加载 assets

• 加载文本

              通过rootBundle 对象加载：每个Flutter应用程序都有一个rootBundle对象， 通过它可以轻松访问主资源包，直接使用package:flutter/services.dart中全局静态的rootBundle对象来加载asset即可。

             通过 DefaultAssetBundle 加载：建议使用 DefaultAssetBundle 来获取当前BuildContext的AssetBundle。 这种方法不是使用应用程序构建的默认asset bundle，而是使父级widget在运行时动态替换的不同的AssetBundle，这对于本地化或测试场景很有用。

rootBundlepackage:flutter/services.dartrootBundle

import 'package:flutter/services.dart' show rootBundle;Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
  }

• 加载图片

            要加载图片，可以使用 AssetImage类。加载依赖包中的图像，必须给AssetImage提供package参数。

    2）加载特定assets

• 设置APP图标

   iOS：在Flutter项目的根目录中，导航到.../ios/Runner。目录中Assets.xcassets/AppIcon.appiconset包含占位符图片，只需将它们替换为适当大小的图片，保留原始文件名称。

       Android：在Flutter项目的根目录中，导航到.../android/app/src/main/res目录，里面包含了各种资源文件夹。将其替换为所需的资源，并遵守每种屏  幕密度（dpi ）的建议图标大小标准。

5. Widget简介

        在Flutter中几乎所有的对象都是一个Widget。它不仅可以表示UI元素，也可以表示一些功能性的组件

• Widget与Element

        在Flutter中，Widget的功能是“描述一个UI元素的配置数据”，它就是说，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而它只是描述显示元素的一个配置数据。

        实际上，Flutter中真正代表屏幕上显示元素的类是Element，也就是说Widget只是描述Element的配置数据！

    Widget只是UI元素的一个配置数据，并且一个Widget可以对应多个Element。

• StatelessWidget或StatefulWidget

    在Flutter开发中，我们一般都不用直接继承Widget类来实现一个新组件，相反，我们通常会通过继承StatelessWidget或StatefulWidget来间接继承Widget类来实现。StatelessWidget和StatefulWidget都是直接继承自Widget类，而这两个类也正是Flutter中非常重要的两个抽象类。如果Widget需要接收子Widget，那么child或children参数通常应被放在参数列表的最后。同样是按照惯例，Widget的属性应尽可能的被声明为final，防止被意外变。           

        1）StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。

        2 ）StatefulWidget也是继承自Widget类，并重写了createElement()方法，不同的是返回的Element 对象并不相同；另外StatefulWidget类中添加了一个新的接口createState()。

        StatefulElement 间接继承自Element类，与StatefulWidget相对应（作为其配置数据）。StatefulElement中可能会多次调用createState()来创建状态(State)对象。createState() 用于创建和Stateful widget相关的状态，它在Stateful widget的生命周期中可能会被多次调用。

        StatefulWidget生命周期如图所示：