Flutter——新技術進階之路（二）

Flutter——新技術進階之路（二）

Flutter基礎

Flutter一切皆組件

對於Flutter而言，萬物皆組件是該技術的核心，將面向對象發揮到及至。

• Flutter 裏的一切都是由組件組成的，包括頁面，佈局，屬性，以及View、
• 我們可以使用var來聲明一個對象，這個對象不是非指定類型的對象。
• 我們也可以指定類型來生命一個對象，eg. int a = 0;
• Flutter的所有組件都是繼承自Widget

FlutterApp入口

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

main函數便是App的入口方法，調用runApp方法把我們的入口組件放進來

Flutter頁面組件

其實Flutter本身不存在頁面這一說，因爲一切皆組件，頁面不過是一個全屏幕大小的組件

所以我們這裏介紹的頁面組件，其實是兩個基礎組件——StatelessWidget 和 StatefulWidget

這兩個組件的區別在於你是否要管理組件的狀態，如果需要管理組件的狀態，那麼我們使用StatefulWidget（動態組件）。如果不需要我們使用StatelessWidget（靜態組件）。

一個組件的主要工作，就是實現build函數，並在build函數中定義其他低層次的控件，build函數將依次構建直到底層渲染對象。

• StatelessWidget： 靜態組件，一般我們寫一些靜態頁面的時候使用，不涉及一切動態的操作，例如請求接口返回數據使頁面發生變化這種操作，使用Stateless組件是實現不了的。通常靜態組件把所需要的參數都放在構造方法中，一旦定義後就不許改變了，標誌性的靜態組件Text，Icon，RaisedButton等。
• StatefulWidget： 動態組件，一般我們寫關於網絡請求數據回顯或者組件狀態變更的時候會用到，隨着用戶的操作與輸入去更改內部的屬性，標誌性的動態組件有Image，Form，CheckBox等。

其實widget本身是擁有一個state屬性的，這個state有了解過React/React-Native的程序員門可能比較瞭解，我們可以通過改變state內部的值來改變組件的屬性並刷新改組件，stateless組件是不允許修改內部state的，所以繼承了StatelessWidget的組件只能在構造方法中初始化屬性，而繼承了StatefulWidget的組件可以通過調用setState()方法來改變內部屬性刷新組件。

頁面代碼Demo示例

這是一個靜態頁面

使用StatelessWidget創建一個靜態的頁面，返回一個Scaffold，中心放一個Text，展示Demo字符串

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DEMO"),
      ),
      body: Center(
        child: Text("Demo"),
      ),
    );
  }
}

以此爲例我們介紹一下使用Dart語言開發的Flutter的編碼方式
我們創建一個靜態組件，名字叫Demo，這個操作我們也可以稱之爲我們自定義一個Demo靜態組件

class Demo extends StatelessWidget{
}

這種寫法與java和React/RN的寫法類似

接下來我們實現一個組件必備的重載方法build：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

build方法會返回一個widget，如果Demo是一個頁面，這個widget就是我們這個組件的頁面佈局組件，如果這個Demo是一個自定義View，那麼這個widget就是我們自定義View的佈局。

接下來我們返回一個Scaffold組件，並且在中心放一個Text文本

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DEMO"),
      ),
      body: Center(
        child: Text("Demo"),
      ),
    );
  }
}

這裏面的Scaffold組件在以後的章節中我會詳細給大家講，我們這裏只要知道它是一個帶有返回按鈕和標題欄的一個組件，就OK了。Appbar就是標題欄組件，我們在他的title中放一個Text組件，也就是文本組件，裏面是大寫的DEMO字符串，body屬性中我們放一個Center組件，在這個組件的child屬性中放一個Text展示Demo字符串，Center組件中，chlid裏面的組件都會居中展示，這個組件我們後續也會細講。

我們新建對象的時候，可以使用new關鍵字，也可以不使用，在最新的文檔中官方已經不推薦使用new關鍵字了，但是我們new一個對象也不會報錯，即：Center() 與 new Center() 等同

所以以上代碼我們也可以寫成

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("DEMO"),
      ),
      body: new Center(
        child: new Text("Demo"),
      ),
    );
  }
}

雖然不報錯，以前寫js和Java的同學寫着也舒服，然而 可以但沒必要 ！
有簡單的方式我們自然要使用簡單的方式，偷懶是進步的明燈~~

這一章節我們就到這裏，學海無涯，學無止境，大家共勉