Flutter项目开发经验总结

环境搭建和基本概念

  Flutter作为谷歌开发的一款跨平台语言越来越普遍的被运用在各种大型项目上，作为一名iOS开发人员也要实时关注这些。早期虽研究过语法方面的问题，但是由于没有具体的项目也就流于表面。近期新的项目采用Flutter语言进行开发，也算是一次实践，在开发的过程中也踩了不少坑，所以想写一篇文章进行记录和分享。

1. Flutter安装和环境配置

  博主是使用Mac开发，其它开发环境可参考对应文档。具体的安装和环境配置可参考Flutter中文官网 在macOS上搭建Flutter开发环境

2.关于Flutter语法

  Flutter采用Dart语言进行开发，Dart语言具体的语法可查询相关文档。本文章只介绍Flutter开发过程中一些基本概念

• 组件 Widget :Flutter中使用最多的概念是组件，在Flutter中一切皆是组件，以下我已对比的方式对一些常用的组件进行简单的说明，由于我是iOS开发，便已iOS控件为标准进行对比:

Flutter组件	iOS控件	说明
Container	View	一个拥有绘制、定位、调整大小的 widget。
StatelessWidget		StatelessWidget一般用于用于和Class类型结合使用，由StatelessWidget限定说明该类的属性在初始化时就是静态的
StatefulWidget		一个和StateLessWidget一样常用的组件，区别在与StatefulWidget可以保存一些状态信息，用于实现页面间的动态变化
Column		列，在列中的组件以从上到下的方式布局
Row		行,在行中的组件以从左到右的方式布局
ListView	ScrollView	滚动列表，ListView只是其中一种
Text	对应文本属性	文本属性设置
FlatButton	UIButton	按钮,Flutter中按钮组件很多，这里只列出一种常用的作为对比
Appbar	UINavigationBar	导航栏，注意不是导航控制器。可以设置文字，导航按钮等信息
Scaffold		Material Design布局结构的基本实现。可以在其中设置各种控制器，具体参考API。可以认为是最基本的一个容器组件
MaterialApp		MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget

需要注意的是Flutter组件中只有Container具有大小，定位等一些列属性，如果你想为其它组件设置固定的尺寸，那么在外面要包含一层Container

• 布局:Flutter中布局的构建和原生相比个人觉得有些复杂，由于Flutter中只有Container组件有尺寸和位置的概念，所以很多简单的布局相较于原生看起来有些怪异，官网提供了一个布局教程可以很方便的理解这些概念。
• 导航:一个完整的APP必定涉及到页面跳转，对于iOS原生来说我们用UINavigationController导航控制器来控制页面间的跳转，在Flutter中 Navigator起到界面导航的作用。
   flutter中跳转界面有两种方式，一种是通过路由的方式跳转，通过这种方式被称之为静态跳转。静态跳转一般不涉及到传递参数，静态跳转也可以传递参数，只是比较麻烦，这里就不介绍了。以下为创建静态路由的代码:

routes: {
        '/Login': (BuildContext context) => new LoginPage(),
        '/Home': (BuildContext context) => new MainPage(),
        '/a': (BuildContext context) => new MyPage(title: 'page A'),
        '/b': (BuildContext context) => new MyPage(title: 'page B'),
      },

routes是MaterialApp组件下的一个属性，用于设置整个路由表。严格来说静态路由是可以设置参数的，比如MyPage(title: 'page A')中指定了MyPage界面中导航的标题为page A，只是这些参数在设置完后就不能更改。以下是通过静态方式跳转页面的API和代码说明

 //跳转到某个界面
 Navigator.pushNamed(context, '/Login');
//跳转到某个界面
//用跳转的界面替换当前界面
Navigator.pushReplacementNamed(context, '/Login');
 //跳转到某个页面并移除
 //移除当前界面
 Navigator.pushNamedAndRemoveUntil(
        context, '/Login',
            (Route route) => route == null);
 //移除所有界面
 Navigator.pushNamedAndRemoveUntil(
        context, '/Login',
            (Route route) =>  false);

动态界面跳转

//跳转到某个界面
Navigator.push(
        context,
        MaterialPageRoute(builder: (_) => LoginPage()));
 //跳转到某个界面
 //用跳转的界面替换当前界面
 Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => LoginPage()));
//跳转到某个页面并移除
//移除当前界面
Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
            builder: (_) => LoginPage()),
            (Route route) => route == null);
//移除所有界面
Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
            builder: (_) => LoginPage()),
            (Route route) => false);

以上介绍的是由A界面跳转到B界面的方法和参数,下面是一些回退界面的方法和说明:

//返回上个界面
 Navigator.pop(context);
//先返回到上个界面，然后在跳转到指定界面
 Navigator.popAndPushNamed(context, pageName);
//返回到某个界面
Navigator.popUntil(context, ModalRoute.withName(pageName));

这里有一个注意的点在于回退到具体某个界面时需要指定界面的路由名称，然而通过动态跳转方式时是没有名称的，所以可以通过以下方式在跳转时为界面指定路由名称

Navigator.push(
                    context,
                    MaterialPageRoute(
                      settings: RouteSettings(name: "Foo"),
                        builder: (_) => HomePage(),
                    )
                );

上诉代码中settings中name属性就是HomePage界面的路由名称

• 底部导航栏:一个完整的App一般都是有多个模块组成，iOS原生采用TabBarController实现模块划分功能，而flutter则采用BottomNavigationBar实现同样的效果，对于该组件没有特别需要注意的点，只需要对照API即可

这篇文章只是简单介绍下flutter，后续还会对开发过程中踩过坑进行总结。由于本人也是刚接触不久，所以难免有错误和不足。有理解错误或者不足的地方希望大家谅解和指正