flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

3. 在 lib/main.dart 中, 引入 english_words, 如高亮顯示的行所示:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';//這行

在您輸入時(shí)，Android Studio會(huì)為您提供有關(guān)庫導(dǎo)入的建議。然后它將呈現(xiàn)灰色的導(dǎo)入字符串，讓您知道導(dǎo)入的庫尚未使用（到目前為止）

4. 使用 English words 包生成文本來替換字符串“Hello World”.

Tip: “駝峰命名法” (稱為 “upper camel case” 或 “Pascal case” ),
 表示字符串中的每個(gè)單詞（包括第一個(gè)單詞）都以大寫字母開頭。所以，“uppercamelcase” 變成 “UpperCamelCase”

進(jìn)行以下更改, 如高亮部分所示:

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('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),//這里
        ),
      ),
    );
  }
}

5. 如果應(yīng)用程序正在運(yùn)行，請(qǐng)使用熱重載按鈕 (
   lightning bolt icon

) 更新正在運(yùn)行的應(yīng)用程序。每次單擊熱重載或保存項(xiàng)目時(shí)，都會(huì)在正在運(yùn)行的應(yīng)用程序中隨機(jī)選擇不同的單詞對(duì)。 這是因?yàn)閱卧~對(duì)是在 build 方法內(nèi)部生成的。每次MaterialApp需要渲染時(shí)或者在Flutter Inspector中切換平臺(tái)時(shí) build 都會(huì)運(yùn)行.

示意圖

第3步: 添加一個(gè) 有狀態(tài)的部件（Stateful widget）

Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實(shí)現(xiàn)一個(gè) stateful widget 至少需要兩個(gè)類:

• 一個(gè) StatefulWidget類。
• 一個(gè) State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在.
  在這一步中，您將添加一個(gè)有狀態(tài)的widget-RandomWords，它創(chuàng)建其State類RandomWordsState。State類將最終為widget維護(hù)建議的和喜歡的單詞對(duì)。

1. 添加有狀態(tài)的 RandomWords widget 到 main.dart。 它也可以在MyApp之外的文件的任何位置使用，但是本示例將它放到了文件的底部。RandomWords widget除了創(chuàng)建State類之外幾乎沒有其他任何東西

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

2. 添加 RandomWordsState 類.該應(yīng)用程序的大部分代碼都在該類中， 該類持有RandomWords widget的狀態(tài)。這個(gè)類將保存隨著用戶滾動(dòng)而無限增長的生成的單詞對(duì)， 以及喜歡的單詞對(duì)，用戶通過重復(fù)點(diǎn)擊心形 ?? 圖標(biāo)來將它們從列表中添加或刪除。

你會(huì)一步一步地建立這個(gè)類。首先，通過添加高亮顯示的代碼創(chuàng)建一個(gè)最小類

class RandomWordsState extends State<RandomWords> {
}

3. 在添加狀態(tài)類后，IDE會(huì)提示該類缺少build方法。接下來，您將添加一個(gè)基本的build方法，該方法通過將生成單詞對(duì)的代碼從MyApp移動(dòng)到RandomWordsState來生成單詞對(duì)。

將build方法添加到RandomWordState中，如下面高亮代碼所示

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

4. 通過下面高亮顯示的代碼，將生成單詞對(duì)代的碼從MyApp移動(dòng)到RandomWordsState中

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('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWords(),//這里
        ),
      ),
    );
  }
}

重新啟動(dòng)應(yīng)用程序。如果您嘗試熱重載，則可能會(huì)看到一條警告：

Reloading...
Not all changed program elements ran during view reassembly; consider
restarting.

這可能是誤報(bào)，但考慮到重新啟動(dòng)可以確保您的更改在應(yīng)用界面中生效。

應(yīng)用程序應(yīng)該像之前一樣運(yùn)行，每次熱重載或保存應(yīng)用程序時(shí)都會(huì)顯示一個(gè)單詞對(duì)。

示意圖

第4步: 創(chuàng)建一個(gè)無限滾動(dòng)ListView

在這一步中，您將擴(kuò)展（繼承）RandomWordsState類，以生成并顯示單詞對(duì)列表。 當(dāng)用戶滾動(dòng)時(shí)，ListView中顯示的列表將無限增長。 ListView的builder工廠構(gòu)造函數(shù)允許您按需建立一個(gè)懶加載的列表視圖。

1. 向RandomWordsState類中添加一個(gè)suggestions列表以保存建議的單詞對(duì)。 該變量以下劃線（）開頭，在Dart語言中使用下劃線前綴標(biāo)識(shí)符，會(huì)強(qiáng)制其變成私有的。

另外，添加一個(gè)biggerFont變量來增大字體大小

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];//這里

  final _biggerFont = const TextStyle(fontSize: 18.0);//這里
  ...
}

2. 向RandomWordsState類添加一個(gè) _buildSuggestions() 函數(shù). 此方法構(gòu)建顯示建議單詞對(duì)的ListView。

ListView類提供了一個(gè)builder屬性，itemBuilder 值是一個(gè)匿名回調(diào)函數(shù)， 接受兩個(gè)參數(shù)- BuildContext和行迭代器i。迭代器從0開始， 每調(diào)用一次該函數(shù)，i就會(huì)自增1，對(duì)于每個(gè)建議的單詞對(duì)都會(huì)執(zhí)行一次。該模型允許建議的單詞對(duì)列表在用戶滾動(dòng)時(shí)無限增長。

添加如下高亮的行(...以下都高亮):

class RandomWordsState extends State<RandomWords> {
  ...//以下都高亮
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // 對(duì)于每個(gè)建議的單詞對(duì)都會(huì)調(diào)用一次itemBuilder，然后將單詞對(duì)添加到ListTile行中
      // 在偶數(shù)行，該函數(shù)會(huì)為單詞對(duì)添加一個(gè)ListTile row.
      // 在奇數(shù)行，該行書湖添加一個(gè)分割線widget，來分隔相鄰的詞對(duì)。
      // 注意，在小屏幕上，分割線看起來可能比較吃力。
      itemBuilder: (context, i) {
        // 在每一列之前，添加一個(gè)1像素高的分隔線widget
        if (i.isOdd) return new Divider();

        // 語法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i為：1, 2, 3, 4, 5
        // 時(shí)，結(jié)果為0, 1, 1, 2, 2， 這可以計(jì)算出ListView中減去分隔線后的實(shí)際單詞對(duì)數(shù)量
        final index = i ~/ 2;
        // 如果是建議列表中最后一個(gè)單詞對(duì)
        if (index >= _suggestions.length) {
          // ...接著再生成10個(gè)單詞對(duì)，然后添加到建議列表
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }
}

3. 對(duì)于每一個(gè)單詞對(duì)，_buildSuggestions函數(shù)都會(huì)調(diào)用一次_buildRow。 這個(gè)函數(shù)在ListTile中顯示每個(gè)新詞對(duì)，這使您在下一步中可以生成更漂亮的顯示行

在RandomWordsState中添加一個(gè)_buildRow函數(shù) :

class RandomWordsState extends State<RandomWords> {
  ...//以下

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

4. 更新RandomWordsState的build方法以使用_buildSuggestions()，而不是直接調(diào)用單詞生成庫。 更改后如下面高亮部分：

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // 刪除這兩行
    return new Text(wordPair.asPascalCase);//這里也刪除
//以下
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

5. 更新MyApp的build方法。從MyApp中刪除Scaffold和AppBar實(shí)例。 這些將由RandomWordsState管理，這使得用戶在下一步中從一個(gè)屏幕導(dǎo)航到另一個(gè)屏幕時(shí)， 可以更輕松地更改導(dǎo)航欄中的的路由名稱。

用下面高亮部分替換最初的build方法：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

重新啟動(dòng)應(yīng)用程序。你應(yīng)該看到一個(gè)單詞對(duì)列表。盡可能地向下滾動(dòng)，您將繼續(xù)看到新的單詞對(duì)。

示意圖

貼一下截至這里所有的代碼

import 'package:english_words/english_words.dart';
import 'package:flutter/material.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('Welcome to Flutter'),
//        ),
//        body: new Center(
////          child: new Text('Hello World'),
////          child: new Text(wordPair.asPascalCase),
//          child: new RandomWords(),
//        ),
//      ),
//    );
      return new MaterialApp(
        title: 'Startup Name Generator',
        home: new RandomWords(),
      );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final _suggestions = <WordPair>[];
    final _biggerFont = const TextStyle(fontSize: 18.0);

    Widget _buildRow(WordPair pair) {
      return new ListTile(
        title: new Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
      );
    }

    Widget _buildSuggestions() {
      return new ListView.builder(
          padding: const EdgeInsets.all(16.0),
          // 對(duì)于每個(gè)建議的單詞對(duì)都會(huì)調(diào)用一次itemBuilder，然后將單詞對(duì)添加到ListTile行中
          // 在偶數(shù)行，該函數(shù)會(huì)為單詞對(duì)添加一個(gè)ListTile row.
          // 在奇數(shù)行，該行書湖添加一個(gè)分割線widget，來分隔相鄰的詞對(duì)。
          // 注意，在小屏幕上，分割線看起來可能比較吃力。
          itemBuilder: (context, i) {
            // 在每一列之前，添加一個(gè)1像素高的分隔線widget
            if (i.isOdd) return new Divider();

            // 語法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i為：1, 2, 3, 4, 5
            // 時(shí)，結(jié)果為0, 1, 1, 2, 2， 這可以計(jì)算出ListView中減去分隔線后的實(shí)際單詞對(duì)數(shù)量
            final index = i ~/ 2;
            // 如果是建議列表中最后一個(gè)單詞對(duì)
            if (index >= _suggestions.length) {
              // ...接著再生成10個(gè)單詞對(duì)，然后添加到建議列表
              _suggestions.addAll(generateWordPairs().take(10));
            }
            return _buildRow(_suggestions[index]);
          }
      );
    }



//    final wordPair = new WordPair.random();
//    return new Text(wordPair.asPascalCase);
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );

  }


}

第5步: 添加交互

在這一步中，您將為每一行添加一個(gè)可點(diǎn)擊的心形 ?? 圖標(biāo)。當(dāng)用戶點(diǎn)擊列表中的條目，切換其“收藏”狀態(tài)時(shí)，將該詞對(duì)添加到或移除出“收藏夾”。

1. 添加一個(gè) _saved Set(集合) 到RandomWordsState。這個(gè)集合存儲(chǔ)用戶喜歡（收藏）的單詞對(duì)。 在這里，Set比List更合適，因?yàn)镾et中不允許重復(fù)的值。

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();//this

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

2. 在 _buildRow 方法中添加 alreadySaved來檢查確保單詞對(duì)還沒有添加到收藏夾中。

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);//this
  ...
}

3. 同時(shí)在 _buildRow()中， 添加一個(gè)心形 ?? 圖標(biāo)到 ListTiles以啟用收藏功能。接下來，你就可以給心形 ?? 圖標(biāo)添加交互能力了。

添加下面高亮的行:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),

    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
  );
}

4. 重新啟動(dòng)應(yīng)用。你現(xiàn)在可以在每一行看到心形??圖標(biāo)?，但它們還沒有交互。
5. 在 _buildRow中讓心形??圖標(biāo)變得可以點(diǎn)擊。如果單詞條目已經(jīng)添加到收藏夾中， 再次點(diǎn)擊它將其從收藏夾中刪除。當(dāng)心形??圖標(biāo)被點(diǎn)擊時(shí)，函數(shù)調(diào)用setState()通知框架狀態(tài)已經(jīng)改變。

添加如下高亮的行:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
//以下
    onTap: () {
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },
  );
}

提示: 在Flutter的響應(yīng)式風(fēng)格的框架中，調(diào)用setState() 會(huì)為State對(duì)象觸發(fā)build()方法，從而導(dǎo)致對(duì)UI的更新

熱重載你的應(yīng)用。你就可以點(diǎn)擊任何一行收藏或移除。請(qǐng)注意，點(diǎn)擊一行時(shí)會(huì)生成從心形 ?? 圖標(biāo)發(fā)出的水波動(dòng)畫

示意圖

這里我的代碼跑得有問題，下面貼以下官方給的代碼

// Step 5: Add a lazily loading infinite scrolling ListView.
// Also, add a heart icon so users can favorite word pairings.
// Save the word pairings in the State class.
// Make the hearts tappable and save the favorites list in the
// State class.

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) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();

        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(
          () {
            if (alreadySaved) {
              _saved.remove(pair);
            } else {
              _saved.add(pair);
            }
          },
        );
      },
    );
  }
}

第6步: 導(dǎo)航到新頁面

在這一步中，您將添加一個(gè)顯示收藏夾內(nèi)容的新頁面（在Flutter中稱為路由(route)）。您將學(xué)習(xí)如何在主路由和新路由之間導(dǎo)航（切換頁面）。

在Flutter中，導(dǎo)航器管理應(yīng)用程序的路由棧。將路由推入（push）到導(dǎo)航器的棧中，將會(huì)顯示更新為該路由頁面。 從導(dǎo)航器的棧中彈出（pop）路由，將顯示返回到前一個(gè)路由。

1. 在RandomWordsState的build方法中為AppBar添加一個(gè)列表圖標(biāo)。當(dāng)用戶點(diǎn)擊列表圖標(biāo)時(shí)，包含收藏夾的新路由頁面入棧顯示。

提示: 某些widget屬性需要單個(gè)widget（child），而其它一些屬性，如action，需要一組widgets(children），用方括號(hào)[]表示。

將該圖標(biāo)及其相應(yīng)的操作添加到build方法中：

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      //action 這段
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

2. 向RandomWordsState類添加一個(gè) _pushSaved() 方法.

class RandomWordsState extends State<RandomWords> {
  ...
  void _pushSaved() {
  }
}

熱重載應(yīng)用，列表圖標(biāo)將會(huì)出現(xiàn)在導(dǎo)航欄中?，F(xiàn)在點(diǎn)擊它不會(huì)有任何反應(yīng)，因?yàn)?_pushSaved 函數(shù)還是空的。

3. 當(dāng)用戶點(diǎn)擊導(dǎo)航欄中的列表圖標(biāo)時(shí)，建立一個(gè)路由并將其推入到導(dǎo)航管理器棧中。此操作會(huì)切換頁面以顯示新路由。

新頁面的內(nèi)容在在MaterialPageRoute的builder屬性中構(gòu)建，builder是一個(gè)匿名函數(shù)。

添加Navigator.push調(diào)用，這會(huì)使路由入棧（以后路由入棧均指推入到導(dǎo)航管理器的棧）

void _pushSaved() {
  Navigator.of(context).push(
  );
}

4. 添加MaterialPageRoute及其builder。 現(xiàn)在，添加生成ListTile行的代碼。ListTile的divideTiles()方法在每個(gè)ListTile之間添加1像素的分割線。 該 divided 變量持有最終的列表項(xiàng)。

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (context) {
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();
      },
    ),
  );
}

5. builder返回一個(gè)Scaffold，其中包含名為“Saved Suggestions”的新路由的應(yīng)用欄。 新路由的body由包含ListTiles行的ListView組成; 每行之間通過一個(gè)分隔線分隔。

添加如下高亮的代碼:

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (context) {
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();
//這里以下
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Saved Suggestions'),
          ),
          body: new ListView(children: divided),
        );
      },
    ),
  );
}

6. 熱重載應(yīng)用程序。收藏一些選項(xiàng)，并點(diǎn)擊應(yīng)用欄中的列表圖標(biāo)，在新路由頁面中顯示收藏的內(nèi)容。 請(qǐng)注意，導(dǎo)航器會(huì)在應(yīng)用欄中添加一個(gè)“返回”按鈕。你不必顯式實(shí)現(xiàn)Navigator.pop。點(diǎn)擊后退按鈕返回到主頁路由。

   
   
   示意圖
   
   
   示意圖

第7步：使用主題更改UI

在這最后一步中，您將會(huì)使用主題。主題控制您應(yīng)用程序的外觀和風(fēng)格。您可以使用默認(rèn)主題，該主題取決于物理設(shè)備或模擬器，也可以自定義主題以適應(yīng)您的品牌。

1. 您可以通過配置ThemeData類輕松更改應(yīng)用程序的主題。 您的應(yīng)用程序目前使用默認(rèn)主題，下面將更改primary color顏色為白色。

通過如下高亮部分代碼，將應(yīng)用程序的主題更改為白色：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
//theme 這里
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

2. 熱重載應(yīng)用。 請(qǐng)注意，整個(gè)背景將會(huì)變?yōu)榘咨?，包括?yīng)用欄。
3. 作為讀者的一個(gè)練習(xí)，使用 ThemeData 來改變UI的其他方面。 Material library中的 Colors類提供了許多可以使用的顏色常量， 你可以使用熱重載來快速簡單地嘗試、實(shí)驗(yàn)。

示意圖

做的好!

你已經(jīng)編寫了一個(gè)可以在iOS和Android上運(yùn)行的交互式Flutter應(yīng)用程序。在這個(gè)例子中，你已經(jīng)做了下面這些事：

從頭開始創(chuàng)建一個(gè)Flutter應(yīng)用程序.
編寫 Dart 代碼.
利用外部的第三方庫.
使用熱重載加快開發(fā)周期.
實(shí)現(xiàn)一個(gè)有狀態(tài)的widget，為你的應(yīng)用增加交互.
用ListView和ListTiles創(chuàng)建一個(gè)延遲加載的無限滾動(dòng)列表.
創(chuàng)建了一個(gè)路由并添加了在主路由和新路由之間跳轉(zhuǎn)邏輯
了解如何使用主題更改應(yīng)用UI的外觀.

到這里就跟著教程做了一部分，想要知道更多還是要去看教程的好