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

2019年8月24日 264次阅读 来源: 燃烧的鱼丸

flutter环境和运转环境搭建好以后，能够最先撸码了，然则当你翻开VScode，在翻开项目文件夹后，摆在你眼前的是main.dart被翻开的模样，内里七七八八的已写好了一堆代码，是不是是很懵逼？

《flutter笔记3：基本语法、框架、控件》

没关系，人家官方文档上说了，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框架基本》，假如你悟性好，分分钟领悟也说不定。

写一个APP尝尝？

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

第一步

把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并保留：
《flutter笔记3：基本语法、框架、控件》

你会看到终端有行动：
《flutter笔记3：基本语法、框架、控件》

再回到*main.dart文件，加一句代码import 'package:english_words/english_words.dart';：
《flutter笔记3：基本语法、框架、控件》

这时候控制台的_题目_栏也会弹出一个提醒：
《flutter笔记3：基本语法、框架、控件》

这是flutter的一个撸码划定规矩，为了保证代码的高效和简约，防止引入无用的包形成顺序痴肥、运转效力低下，然后我们再修正一下代码并保留：
《flutter笔记3：基本语法、框架、控件》

这时候刻APP里的Hello World变成了下面这个模样：
《flutter笔记3：基本语法、框架、控件》

到终端中按 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>，<RandomWords>指明这个状况控件是RandomWords控件的
class RandomWordsState extends State<RandomWords> {
    @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）

    原文作者：燃烧的鱼丸
    原文地址: https://segmentfault.com/a/1190000013672501
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞