Flutter學習（一）

目錄
Flutter學習（一）
Flutter學習（二）-FlutterGo學習

概念

參考：Flutter 開發文檔
在 Flutter 中，幾乎所有都是 widget，包括對齊 (alignment)、填充 (padding) 和佈局 (layout)。一個 widget 的主要工作是提供一個 build() 方法來描述如何根據其他較低級別的 widgets 來顯示自己。
在 Flutter 的響應式風格的框架中，調用 setState() 會爲 State 對象觸發 build() 方法，從而導致對 UI 的更新。
flutter一切皆組件，UI中用到的東西基本都是組件，所以對組件的熟悉是很重要的。

pubspec.yaml配置文件說明

參考：Flutter pubspec.yaml配置文件說明
類似android開發中的AndroidManifest.xml，Gradle配置文件，Flutter項目根目錄下的pubspec.yaml文件是Flutter的配置文件。
雖然都是移動開發中的配置文件，但差別還是挺大的。
在Flutter中，雖然在Flutter項目中的Android文件夾下有Gradle文件，但只有在添加平臺相關所需的依賴關係時才使用這些文件。 否則，應該使用pubspec.yaml聲明用於Flutter的外部依賴項。
完整配置文件

    #name很重要，如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改
    name: flutterdemo
    description: A new Flutter application.
     
    dependencies:
      flutter:
        sdk: flutter
     
     #添加依賴packages ^表示適配和當前大版本一致的版本，~表示適配和當前小版本一致的版本
      cupertino_icons: ^0.1.2
      english_words: ^3.1.0
     # image_picker: ^0.4.8
     
    dev_dependencies:
      flutter_test:
        sdk: flutter
     
      #啓用國際化
      flutter_localizations:
        sdk: flutter
     
    #定義常量
     
    #數組
    server:
        - aaaaaa
        - bbbbbb
    	- dddddd
    #常量
    age: 22         # int
    boolitem: true  #定義一個boolean值
    name: 'hello'   #定義一個string
     
     
    flutter:
     
      # The following line ensures that the Material Icons font is
      # included with your application, so that you can use the icons in
      # the material Icons class.
      uses-material-design: true
      # To add assets to your application, add an assets section, like this:
      #添加資源，不單單是圖片，images是個和pubspec.yaml配置文件同級的目錄，如果不同級，需要添加..
      assets:
            - images/park.jpg
            - images/lake.jpg
            - images/touxiang.jpg
      #  - images/a_dot_burr.jpeg
      #  - images/a_dot_ham.jpeg
       #字體設置
       fonts:
         - family: Schyler
           fonts:
           - asset: fonts/Schyler-Regular.ttf
            - asset: fonts/Schyler-Italic.ttf
               style: italic
         - family: Trajan Pro
           fonts:
          - asset: fonts/TrajanPro.ttf
          - asset: fonts/TrajanPro_Bold.ttf
            weight: 700

name:這裏應該叫包名。
如果修改了配置文件中的name（flutterdemo —flutterdemo111），下面對本地文件的引用前的包名都需要修改：import ‘package:flutterdemo/FourPage.dart’;

引入圖片資源：
assets: //引入圖片資源，識別應用程序所需的asset，可以任意文件夾，Flutter將asset放置到稱爲 asset bundle 的特殊存檔中，可以是圖片，文本等資源。

- images/park.jpg
- images/lake.jpg

不同尺寸圖片資源寫法：

…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png

讀取文本：

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
//讀取文件是的路徑，就是assets下配置的 
return await rootBundle.loadString('assets/config.json');
}

使用圖片：

//圖片路徑的配置
new AssetImage('graphics/background.png'),

加載依賴包中圖片：
//配置name的作用，需要讀取其他外部package下的資源時

new AssetImage('icons/heart.png', package: 'my_icons')

這裏順便說一下更新應用自身圖標，只需要按照android，Ios自己的規範進行更新：
fonts：支持字體的設置，可以使用自定義字體。
設置方式：

- family: Schyler
fonts:
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
style: italic

使用方式：

style: new TextStyle( fontFamily: 'Schyler', fontSize: 24.0, ),

啓用國際化，materialDesign：

 flutter_localizations:
sdk: flutter

flutter:
uses-material-design: true

生命週期

參考：flutter生命週期
Flutter跟安卓的Activity、iOS的ViewController一樣擁有自己的生命週期， Flutter中一切都是Widget，渲染方式有點像H5的DOM樹。

lutter生命週期可以分爲3個階段：
1、實例化組件並添加到樹， 即Navigator.push；
2、狀態變化，即打開新的widget或者依賴的上級widget發生變化；
3、從樹中移除, 即Navigator.pop。

在Flutter中Widget都是不可變的， 但實際上需要根據對應的狀態刷新Widget。 從而產生了StatelessWidget和StatefulWdiget, StatefulWidget是由2個對象Widget和State組成的。
爲什麼將State和Widget分開呢？
答案是性能， State管理狀態（可以理解爲Controller），Widget是UI（即View)。 根據狀態變化每次生成Widget(即View）可以節省內存，即不必每次創建狀態對象State。

• 構造函數：
  同其它高級語言， 只執行一次；
• initState：
  插入到渲染樹時調用，只執行一次。（類似Android Fragment的onCreateView函數）
• didChangeDependencies：
  1、在初始化initState後執行； 2、顯示/關閉其它widget。 3、可執行多次；
• didUpdateWidget：
  上級節點rebuild widget時， 即上級組件狀態發生變化時會觸發子widget執行didUpdateWidget;
• deative:
  有點像Android的onStop函數， 在打開新的Widget或回到這個widget時會執行； 可執行多次；
• dispose：
  類似於Android的onDestroy， 在執行Navigator.pop後會調用該辦法， 表示組件已銷燬；
• reassemble：
  點擊閃電會執行，只用於調試時的hot reload。 release版本不會執行該函數。

常見業務場景：

• Widget A打開Widget B： Navigator.push(B)
  B構造函數—>B initState—>B didChangeDependencies—>B build—>A deactive—>A didChangeDependencies.
• Widget B退出： Navigator.pop
  A deactive—>A didChangeDependencies—>A build—>B deactive—>B dispose
  可以看出， Flutter打開、關閉Widget時跟安卓、iOS的時序一樣， 都是先處理即將顯示的界面。

activity生命週期和Flutter對應關係：
Flutter提供了WidgetsBindingObserver來監聽AppLifecycleState， 而AppLifecycleState有4種狀態：
1、 resumed 界面可見， 同安卓的onResume。
2、inactive界面退到後臺或彈出對話框情況下， 即失去了焦點但仍可以執行drawframe回調；同安卓的onPause；
3、paused應用掛起，比如退到後臺，失去了焦點且不會收到drawframe回調；同安卓的onStop；
4、suspending， iOS中沒用，安卓裏就是掛起，不會再執行drawframe回調；

下面是生命週期：
1、初次打開widget時，不執行AppLifecycleState的回調；
2、按home鍵或Power鍵， AppLifecycleState inactive---->AppLifecycleState pause
3、從後臺到前臺：AppLifecycleState inactive—>ApplifecycleState resumed
4、back鍵退出應用： AppLifecycleState inactive—>AppLifecycleState paused

資源文件

在根目錄下新建images包專門用來存放圖片資源，然後在pubspec.yaml文件下增加如下語句：

  assets:
    - images/

申明瞭存放圖片資源的包路徑，然後使用，比如：

currentAccountPicture: CircleAvatar(backgroundImage: AssetImage('images/header.png'),),

注意如果路徑不對，就會出現“Unable to load asset”的異常，如果images包放在assets包下面的話，所有路徑簽名都要加上assets路徑，assets路徑是不能省略的。

所以爲了方便使用，我新建的images包路徑直接在根目錄下。