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

发布时间:2019-06-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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(),
    );
  }
}
@H_396_360@第六步、重启应用

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的VS Code开发Flutter App - 创建无限滚动ListView全部内容,希望文章能够帮你解决VS Code开发Flutter App - 创建无限滚动ListView所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。