第010例-ListView滚动-(学习Flutter第3天)

网页地址:网页演示
(网页比较慢)

参考:原文

一. 创建项目

flutter create example010_listview2

二. AS打开

三. 添加依赖、放入资源文件

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  english_words: ^3.1.5

四. 编写代码

main.dart

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

void main() {
    
    
  runApp(MyApp());
}



class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // final WordPair wordPair = new WordPair.random();  // 删掉本行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home:RandomWords()
      // new Scaffold(
      //   appBar: new AppBar(
      //     title: new Text('Welcome to Flutter'),
      //   ),
      //   body: new Center(
      //     //child: new Text(wordPair.asPascalCase), 
      //     child: new RandomWords(),                 
      //   ),
      // ),
    );
  }
}

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

class _RandomWordsState extends State<RandomWords> {
    
    

  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);

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

  Widget _buildSuggestions() {
    
    
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (BuildContext _context, int i) {
    
    
          if (i.isOdd) {
    
    
            return new Divider();
          }
          final int index = i ~/ 2;
          if (index >= _suggestions.length) {
    
    
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        }
    );
  }

  @override                                  
  Widget build(BuildContext context) {
    
    
    // final WordPair wordPair = new WordPair.random();
    // return new Text(wordPair.asPascalCase);

    return new Scaffold (                   
      appBar: new AppBar(
        title: new Text('名字生成'),
      ),
      body: _buildSuggestions(),
    );                                      

  }                                          
}

5. 调试运行

AS中先打开Android或者iOS模拟器，点运行按钮。
或在命令行中运行:

flutter run

6. 打包web

flutter build web

源码

https://gitee.com/ruik2080/example-flutter