[Flutter] 写第一个 Flutter app，part1 要点

模拟器中调试元素的布局：

　　Android Studio 右侧边栏 Flutter Inspector，选择 Toggle Debug Paint 打开。

格式化代码：

　　编辑器中右键 Reformat Code with dartfmt。

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

　　把外部包名加到 pubspec.yaml 的 dependencies 依赖中，运行 flutter packages get 安装，代码中 import 进来使用。

例子内容解读（https://flutter.io/docs/get-started/codelab）：

　　StatelessWidget 子 Widget 实现 build 方法，Stateless widget 是不变的，意思是它们的属性不能变 - 所有的值都是 final。

　　StatefulWidget 子 Widget 实现 createState 方法；Stateful widget 维护着 widget 生命周期内可能改变的状态。

　　　　实现一个 stateful widget 需要至少两个 class：

　　　　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();
}