VS Code开发Flutter App - 创建无限滚动ListView

{app.params.name}}{app.params.name}}{app.params.name}}

本次分享将展开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(),
    );
  }
}

第六步、重启应用

无论你滚动多远,你都应该看到一个单词配对列表。如下图

版权声明

durban创作并维护的 小绒毛的足迹博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 博客( https://www.xiaorongmao.com ),版权所有,侵权必究。

本文永久链接: https://www.xiaorongmao.com/blog/74


版权声明

durban创作并维护的 小绒毛的足迹博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 小绒毛的足迹博客( https://www.xiaorongmao.com ),版权所有,侵权必究。

本文永久链接: https://www.xiaorongmao.com/blog/74