VS Code開発Flutter App-無限スクロールListViewの作成

今回の共有では、RandomWordsStateを展開し、単語ペアのリストを生成して表示します.ユーザがスクロールすると、ListViewウィジェットに表示されるリストは無限に増加します.ListViewのコンストラクタファクトリコンストラクタでは、必要に応じてリストビューを怠惰に構築できます.

第一歩、将_suggestionsリストはRandomWordsStateクラスに追加され、推奨される単語ペアを保存します。また、biggerFont変数を追加してフォントを大きくします。

Tipsの下線接頭辞付き識別子は、Dart言語でプライバシー処理を強制されます.追加されたコードは次のとおりです.

class RandomWordsState extends State {
  final _suggestions = []; //  

  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が用意されています.2つのパラメータは、関数-BuildContextおよび行反復器iに渡されます.反復器は0から始まり、関数を呼び出すたびに増加し、推奨される単語ごとにペアを1回ずつ作成します.このモデルでは、推奨リストをユーザーがスクロールするときに無限に増加させることができます.

ステップ2、完全な_を追加buildSuggestions()メソッドをRandomwordsStateクラスに

コードは次のとおりです.

class RandomWordsState extends State {
  final _suggestions = [];
  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()関数は単語ペアごとに1回呼び出されます.buildRow().この関数は、ListTileに新しいペアが表示され、次のステップで行をより魅力的にすることができます.

ステップ3、追加_buildRow()からRandomWordsStateクラスへ

完全なコードは次のとおりです.

class RandomWordsState extends State {
  final _suggestions = [];
  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);
  }
}

ステップ4、RandomWordsStateの構築方法を更新して使用_単語生成ライブラリを直接呼び出すのではなく、buildSuggestions()です。(足場は基本的なMaterial Designビジュアルレイアウトを実現)

完全なコードは次のとおりです.

class RandomWordsState extends State {
  final _suggestions = [];
  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(),
    );
  }
}

ステップ5、MyAppの構築方法を更新し、タイトルを変更し、ホームをRandomWordsウィジェットに変更する

元のメソッドを置換するには、次のように強調表示されているコンストラクションメソッドを使用します.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '  - Gowhich',
      home: RandomWords(),
    );
  }
}

ステップ6、アプリケーションの再起動

どんなに遠くまでスクロールしても、単語のペアリングリストが表示されます.以下の図