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框架基礎》，若是你悟性好，分分鐘貫通也說不定。

寫一個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並保存：

你會看到終端有動做：

再回到*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>，<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）