VS Code開發Flutter App - 建立無限滾動ListView

本次分享將展開RandomWordsState以生成並顯示單詞對的列表。當用戶滾動時，ListView小部件中顯示的列表會無限增加。ListView的構建器工廠構造函數容許您根據須要懶惰地構建列表視圖。

第一步、將_suggestions列表添加到RandomWordsState類以保存建議的單詞對。另外，添加一個biggerFont變量來使字體更大。

Tips 帶有下劃線前綴的標識符在Dart語言中會被強制進行隱私處理。添加的代碼以下

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

  final _biggerFont = const TextStyle(fontSize: 18.0); // 新加

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asCamelCase);
  }
}

下一步添加一個_buildSuggestions()方法到RandomwordsState類中，這個方法建立ListView，用來顯示建議單詞對.

ListView類提供了一個構建器屬性itemBuilder，它是一個工廠構建器和指定爲匿名函數的回調函數。
兩個參數傳遞給函數 - BuildContext和行迭代器i。
迭代器從0開始，每次調用函數時遞增，對於每一個建議的單詞配對一次。
此模型容許建議的列表在用戶滾動時無限增加。

第二步、添加完整的_buildSuggestions()方法到RandomwordsState類中

代碼以下

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

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

        final index = i ~/ 2;

        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }

        return _buildRow(_suggestions[index]);
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asCamelCase);
  }
}

_buildSuggestions()函數每一個單詞對調用一次_buildRow()。此函數在ListTile中顯示每一個新對，能夠在下一步中使行更具吸引力。

第三步、添加_buildRow() 到RandomWordsState類中

完整代碼以下

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

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

        final index = i ~/ 2;

        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }

        return _buildRow(_suggestions[index]);
      }
    );
  }

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

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asCamelCase);
  }
}

第四步、更新RandomWordsState的構建方法以使用_buildSuggestions()，而不是直接調用單詞生成庫。（腳手架實現了基本的Material Design視覺佈局）

完整代碼以下：

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

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

        final index = i ~/ 2;

        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }

        return _buildRow(_suggestions[index]);
      }
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('啓動一個生成器')
      ),
      body: _buildSuggestions(),
    );
  }
}

第五步、更新MyApp的構建方法，更改標題，並將home更改成RandomWords小部件

使用下面突出顯示的構建方法替換原始方法：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '啓動一個生成器 - Gowhich',
      home: RandomWords(),
    );
  }
}

第六步、重啓應用

不管你滾動多遠，你都應該看到一個單詞配對列表。以下圖