码迷,mamicode.com
首页 > 其他好文 > 详细

通过 flutter 实现一个列表功能

时间:2020-01-17 11:37:19      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:random   builder   create   word   over   case   ase   item   imp   

使用 english_words 包实现生成列表的功能:

官方参考文档

import ‘package:english_words/english_words.dart‘;
import ‘package:flutter/material.dart‘;

void main() => runApp(MyApp());

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

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘Startup Name Generator‘),
      ),
      body: _buildSuggestions(),
    );
  }
  
  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 pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

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

通过 flutter 实现一个列表功能

标签:random   builder   create   word   over   case   ase   item   imp   

原文地址:https://www.cnblogs.com/GetcharZp/p/12204815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!