flutter笔记3：基础语法、框架、控件

摘要：是啥是谷歌推出的一套视觉设计语言。比如有的可以换皮肤，而每一套皮肤就是一种设计语言，有古典风呀炫酷风呀极简风呀神马的，而就是谷歌风，有兴趣的同学可以学习了解一下官方原版和中文翻译版，这是每一个产品经理的必修教材。

flutter环境和运行环境搭建好之后，可以开始撸码了，然而当你打开VScode，在打开项目文件夹后，摆在你面前的是main.dart被打开的样子，里面七七八八的已经写好了一堆代码，是不是很懵逼？

不要紧，人家官方文档上说了，flutter的玩家不需要Dart和移动端语言开发经验，只需要熟悉面向对象编程即可。
神马？面向对象也不懂？还是百度打打基础去吧。。。

简单了解下上图中的几个标记的编号：
A. main.dart
此文件是每一个flutter项目的默认入口文件，也就是说每个flutter项目启动的时候，默认先运行这个文件的代码，这个入口文件理论上应该是可以配置的，不过我还不知道在哪配，大神请留言，嘿嘿。注意看它所在的路径，在项目根目录的lib文件下，而文件的后缀名.dart是flutter文件的格式，是不是很容易联想到flutter使用的dart语言。

B.import "package:flutter/material.dart";
每一个.dart文件的第一行都会导入flutter/material.dart包，这个包是Flutter实现Material Design设计风格的基础包，里面有文本输入框(Text)、图标(Icon)、图片(Image)、行排列布局(Align)、列排列布局(Column)、Decoration(我也不知道是啥)、异步（%#￥@晕倒..）、动画等等等等控件，大家可以理解为网页中的按钮、标题、选项框呀等等控件库吧。

Material Design是啥？是谷歌推出的一套视觉设计语言。比如有的APP可以换皮肤，而每一套皮肤就是一种设计语言，有古典风呀炫酷风呀极简风呀神马的，而Material Design就是谷歌风，有兴趣的同学可以学习了解一下Material Design官方原版和Material Design中文翻译版，这是每一个产品经理的必修教材。

C.void main() => runApp(new MyApp());
有点像ES6语法的箭头函数是不是？对学习过前端开发的同学是不是很熟悉呀，意思等同于：

void main() {
   return runApp(Widget app);
}

这里的main()函数是Dart程序的入口，也就是说，Flutter程序在运行的时候，第一个执行的函数就是main()函数，结合A的入口文件，flutter项目默认执行的第一句代码，就是main.dart文件里的void main() => runApp(new MyApp());

D和E.StatelessWidget和StatefulWidget
这是flutter最基础的的两种控件类，分别叫无状态类和有状态类，两者的差别在于是否有状态，玩家创建的所有控件都继承自这两个控件。当你想展示的内容只需要改动控件本身的配置信息就可以实现时，例如文本、图片等，可以考虑使用无状态控件（StatelessWidget）。如果你想展示的内容是可以动态改变才能实现时，例如滚动列表、动画效果等，可以考虑使用有状态控件（StatefulWidget）。

其实我也不是很明白，StatefulWidget还有生命周期一说，具体怎么回事，大家可以参考何小有的《Flutter框架基础》，如果你悟性好，分分钟贯通也说不定。

前面写了一大堆废话，高手们已经不耐烦，萌新们看不懂我也不管了，撸一管官方萌新教程先~

把main.dart里的代码替换成这个：

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Welcome to Flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Welcome to Flutter"),
         ),
        body: new Center(
          child: new Text("Hello World"),
        ),
      ),
    );
  }
}

保存之后，到终端里输入这个：

flutter doctor
flutter run

看看你的测试机都发生了什么，好了，恭喜！你的flutter人生的第一个hallo world告成~！

牢记这一点，flutter中的一切都是控件（Widget，有的文章称呼组件，就当作一个意思吧），控件是可以嵌套的，嵌套后就会形成组件树。

上面的代码可以简单看看，能懂多少是多少吧，对熟悉面向对象的同学应该没有难度。

打开文件pubspec.yaml，在这里加一句代码english_words: ^3.1.0并保存：

你会看到终端有动作：

再回到*main.dart文件，加一句代码import "package:english_words/english_words.dart";：

这时控制台的_问题_栏也会弹出一个提示：

这是flutter的一个撸码规则，为了保证代码的高效和简洁，避免引入无用的包造成程序臃肿、运行效率低下，然后我们再修改一下代码并保存：

这时候APP里的Hello World变成了下面这个样子：

到终端中按 r 键，在APP中发现什么变化都没有，而按 R 键，APP重启，屏幕中央的字符串随机改变了，说明APP一旦启动后，玩家创建的无状态控件实例中的属性值定义后，刷新页面不会再更新，官方的说法是无状态控件实例中的属性值为final类型，意味着一旦定义将无法变更，只有APP重启后，重新执行代码，这时候重生了控件实例，所以屏幕中央的字符串改变了，但是用 r 还是不会变。

这次来点有难度的，用到了StatefulWidget控件，请将main.dart的代码替换为：

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: "Welcome to Flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter"),
        ),
        body: new Center(
          // child: new Text("Hello World"),
          // child: new Text(wordPair.asPascalCase), //asPascalCase 驼峰样式，字符串中的每个单词的首字母都会大写
              child: new RandomWords(),  //定义子控件为有状态控件RandomWords的实例
        ),
      ),
    );
  }
}
//定义了一个有状态控件，继承自StatefulWidget
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();  //为StatefulWidget控件RandomWords定义一个状态类
}
//定义了一个状态控件，继承自状态类State，指明这个状态控件是RandomWords控件的
class RandomWordsState extends State {
    @override
    Widget build(BuildContext context) {
      final wordPair = new WordPair.random();
      return new Text(wordPair.asPascalCase);
    }
}

保存代码后，再到终端，每按一次 r 键，APP中央的字符串就会随机改变，这就是StatefulWidget类的特性，其实例内的属性值可以在对象实例化后随意变更，一个StatefulWidget控件至少包含两个类，一个是用于实例化的StatefulWidget类，一个是它的State状态类。纯粹的StatefulWidget控件本身是不可变的，但是它的State类会在StatefulWidget控件的整个生命周期持续存在。

经过这么一折腾，我也对StatefulWidget和StatelessWidget的特性有个了一个简单的认识，不知道小伙伴们感觉如何呀，如果还有不明白的地方，请在留言中提问，flutter圈子说不定哪个大牛心情好会有解答哟。

本篇就介绍到这里，大家可以自行敲敲代码，多体验体验，从知道flutter到现在36小时，而我能写到这里，首先感谢技术达人狐神的大力支持，帮我拉来了flutter先驱何小有和一梭子前端大神，再者感谢何小有在flutter圈子的入门扫盲贴投稿，也感谢大家的支持，我也就不再废话什么自我激励了，总之 加油~！

再啰嗦一句广告，对flutter感兴趣的小伙伴可以关注我，欢迎大家到Flutter圈子中投稿，也可以联系管理员加入我们的flutter微信群嗨聊，谢谢捧场~！
flutter 中文社区（官方QQ群：338252156）