[Flutter] 寫第一個 Flutter app，part1 要點

時間 2019-11-06

標籤 flutter 第一個 app part1 要點简体版

原文原文鏈接

模擬器中調試元素的佈局：html

　　Android Studio 右側邊欄 Flutter Inspector，選擇 Toggle Debug Paint 打開。app

格式化代碼：less

　　編輯器中右鍵 Reformat Code with dartfmt。dom

使用外部功能包（https://pub.dartlang.org/flutter）：編輯器

　　把外部包名加到 pubspec.yaml 的 dependencies 依賴中，運行 flutter packages get 安裝，代碼中 import 進來使用。ide

例子內容解讀（https://flutter.io/docs/get-started/codelab）：函數

　　StatelessWidget 子 Widget 實現 build 方法，Stateless widget 是不變的，意思是它們的屬性不能變 - 全部的值都是 final。佈局

　　StatefulWidget 子 Widget 實現 createState 方法；Stateful widget 維護着 widget 生命週期內可能改變的狀態。優化

　　　　實現一個 stateful widget 須要至少兩個 class：ui

　　　　1）一個建立了 State 類實例的 StatefulWidget 類。

　　　　2）一個 State 類。

// 咱們使用了一個 RandomWords 的 State 類，RandomWordsState 依賴 RandomWords 類。
class RandomWordsState extends State<RandomWords> {
    // TODO 實現 build() 方法，返回 Scaffold
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Startup Name Generator'),
            ),
            body: _buildSuggestions(),
        );
    }

    // 實現 Scaffold 裏使用的私有 widget 功能，好比構建 ListView，ListView 構造方法容許咱們構建一個按需加載的 list
    // ListView 提供一個 builder 屬性和 itemBuilder 方法，itemBuilder 是一個匿名函數形式的回調方法，傳入 BuildContext 和 行索引號。
    Widget _buildSuggestions() {
      return ListView.builder(
         padding: const EdgeInsets.all(16.0),
         itemBuilder: /*1*/ (context, i) {
            if (i.isOdd) return Divider(); /*2*/

            final index = i ~/ 2; /*3*/
            if (index >= _suggestions.length) {
                _suggestions.addAll(generateWordPairs().take(10)); /*4*/
            }
            return _buildRow(_suggestions[index]);
         });
      }
　　　/*1*/ itemBuilder回調在生成每一個單詞時調用一次，並替換 ListTile 行。偶數行爲單詞添加 ListTile，奇數行添加 Divider widget 垂直分隔實體。
　　　/*2*/ 在 ListView 每行以前添加一個一像素高的 divider
　　　/*3*/ 表達式 i ~/ 2，i 整除 2，返回整數的結果。如 1,2,3,4,5 變成 0,1,1,2,2。這計算 ListView 中真實的單詞數，減去 divider widget 數。
　　　/*4*/ 若是到達了可用單詞的結尾，接着生成 10個到建議列表中。調用 _buildRow 展現每行的 title。
 
    Widget _buildRow(WordPair pair) {
        return ListTile(
            title: Text(
                pair.asPascalCase,
                style: _biggerFont,
             ),
        );
    }
}

// 有狀態的類除了建立 State 類的實例，什麼都不作。
class RandomWords extends StatefulWidget {
    @override
    RandomWordsState createState() => new RandomWordsState();
}