初识flutter 原 荐

关注flutter已经好久，因为没有发正式版，所以一直也不想过早的躺浑水，但是最近无意中看到几篇文章，再加上美团和咸鱼等app也一直在做灰度测试，所以上周开始看了一下官方文档，地址： https://flutter.io/docs/get-started/install ，然后在此做一下总结。

flutter是Google开发的一套全新的跨平台开源框架。目前flutter已经发布很多很多版本，正在逐步的完善，它的目标其实是和react native一样的，就是同一份代码可以同时运行在Android和iOS两个系统上。如果你同时有react native和flutter开发经验，你就会发现flutter的很多设计理念和react native是一样的，react native基于组件开发页面，flutter则是widget，他们都有自己的生命周期，他们都是自己的属性或者状态，所以对于react native开发者来说，flutter开发只不过换了一种Dart语言，换了一批API，当然这些都是表面的理解。因为react native和flutter有本质的不同，react native渲染的是系统原生控件，flutter则是从头到尾重写了一套UI框架，渲染引擎则依靠Skia图形库实现。下面就具体说一下H5、react native、flutter这些跨平台UI框架的方案。

H5、react native、flutter

最开始的跨平台开发的方案就是H5开发，然后基于Android和iOS的webView完全继承web开发的所有成果，但是由于webview的渲染效率和js的执行性能问题，很难与原生相提并论。然后就到了react native、weex的时代，为了解决webview性能差的问题，这类框架将最终的渲染工作交还给了系统，抛开react native和weex自身对系统版本的bug，性能问题依然没有完美的解决，比如加载react native生成的bundle.js的size过大、bundle.js的加载时间过长导致白屏、页面内手势滑动导致大量的丢帧问题等等，所以我们在适用reactnative时还是需要大量的优化和维护。这个时候flutter借鉴react native孕育而生，为什么是借鉴呢，上面也有提到，其实react native在开发时有很多思想都是相同的。

flutter所使用的语言是Dart，这种语言既支持动态编译又支持静态编译，这也就意味着在JIT模式下我们可以实现热刷新，就像开发js一样，编辑完代码之后，只要保存或者点击 Hot Reload按钮，就可以立即更新到设备上，不用重新编译app。在Flutter中，所有功能都可以通过组合多个Widget来实现，包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类，StatelessWidget和StatefulWidget，StatelessWidget用来展示静态的文本或者图片，如果控件需要根据外部数据或者用户操作来改变的话，就需要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架React，React风格的框架中使用控件树和各自的状态来构建界面，当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。

flutter应用

flutter的安装很简单，我们只需要一个flutter的sdk就可以，这里类似于Android里的sdk，开发flutter的编辑器也有很多选择，Android studio、intellij、VS code，这里我选择的是最轻量的vs code。关于这些配置环境我们可以参考官网，说的很清晰。

当我们用vs code生成一个项目后，项目目录如下：

其中lib文件夹下的main.dart文件就是我们要开发的dart文件，pubspec.yaml就是项目的配置文件，ios文件夹和android文件夹分别是iOS和Android两个项目工程

然后我们看一下dart文件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

可以看到两个类MyApp和MyHomePage，从名字我们就可以看出，一个是App的入口，一个是首页，前者继承StatelessWidget，后者继承StatefulWidget，说明MyApp是不需要状态的，而MyHomePage是需要的，所以它实现了createState方法来生成一个State（不管是StatelessWidget还是StatefulWidget，本身都是不可变的），_MyHomePageState继承了State<MyHomePage>，重写了build方法，返回Scaffold，其实Scaffold中的代码就是展示在页面中的内容。

最后附上flutter的架构图：