Flutter学习之路（二）

在Flutter学习之路（一）对Flutter有基本了解之后，接下来是对Flutter的深入学习。

本文参考：https://flutterchina.club/get-started/codelab/

三，第一个Flutter App

1.开始

我发现我忘了一点东西，没有介绍Flutter，现在介绍也不晚。

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。简单来说，Flutter是一款移动应用程序SDK，包含框架、控件和一些工具，可以用一套代码同时构建Android和iOS应用，并且性能可以达到原生应用一样的性能。

React-Native、Weex核心是通过Javascript开发，执行时需要Javascript解释器，UI是通过原生控件渲染。Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。相反，Flutter使用自己的高性能渲染引擎来绘制widget。Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建。在IOS上，Flutter引擎的C/C ++代码使用LLVM编译，任何Dart代码都是AOT编译为本地代码的，Flutter应用程序使用本机指令集运行（不涉及解释器）。而在Android下，Flutter引擎的C/C ++代码是用Android的NDK编译的，任何Dart代码都是AOT编译成本地代码的，Flutter应用程序依然使用本机指令集运行（不涉及解释器）。因此，Flutter能达到原生应用一样的性能。

同时，Flutter提供了一组自己的widget，由Flutter的framework和引擎管理和渲染。您可以浏览Flutter widget的目录。之所以不适用原生控件，是因为Flutter希望最终结果是更高质量的，如果Flutter使用原生系统widget，Flutter应用的质量和性能将受到这些widget本身质量的限制。例如，在Android中，有一组硬编码的手势和固定的规则来对它们进行手势冲突消歧。在Flutter中，您可以编写自己的手势识别器，该手势识别器是手势系统中的一级参与者。此外，由不同人撰写的两个小工具可协调手势冲突消歧。

Flutter 用Dart作为开发框架和widget的语言，为什么[Flutter使用Dart语言]。(https://flutterchina.club/faq/#为什么flutter选择使用dart语言)

看完这些，你就会明白，Flutter是全新的东西，比Kotlin还要新，所以拿出第一次学习Android的好奇心来学习Flutter。详细的介绍请看这里，Flutter的框架总览点击这里。

现在开始编写第一个Flutter App。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'My First Flutter AAp',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('First Flutter App'),
        ),
        body: new Center(
          child: new Text('Hello Flutter'),
        ),
      ),
    );
  }
}

看着很难，自己写一遍会发现这个很简单。一个main函数，调用了runApp()方法，启动一个App，因为是单行函数，所以使用了=>，这在许多脚本语言中很常见。然后我们自己写了一个MyApp类，继承StatelessWidget。因为在Flutter，万物即Widget，你一个App是Widget不过分吧，重写完方法后，开始绘制界面。这一块陌生又熟悉，陌生的是代码和我们经常使用的xml不一样，熟悉的是title，appBar，有你的哪里都有你。如果不理解或是没记住的，删了多写几遍，书读百遍其意自见。

2.导入外部包

Flutter管理依赖的文件是pubspec.yaml文件，如果要导入外部包，是在这个文件中进行修改。我们先导入english_words包，这个包包含了5000多个常用的英文单词。

在pubspec.xml文件中添加如下代码即可。

english_words: ^3.1.0

位置如下图所示：
在这里插入图片描述
添加完后点击右上角的Packages get添加包，或者直接在命令行输入flutter packages get，这两个是相同的。

导入包之后将代码改成下面这样：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final wordPair = new WordPair.random();

    return new MaterialApp(
      title: 'My First Flutter App',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('First Flutter App'),
        ),
        body: new Center(
          child: new Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

可以看到，只是新建了wordPair变量，然后在显示时使用驼峰命名法，很简单的代码，每次ctrl+s保存时都会热重载，在界面显示的单词就会不一样，因为这里的单词是随机生成的，不得不说，Flutter选用的这个作为教程真是优雅，即学习了外部库的使用，又展现了热重载的高效性。

3.有状态的Widget(StatefulWidget）

Flutter学习之路（二）

猜你喜欢