【Flutter】viewList 实现

image.png

依赖

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

创建 StatelessWidget 并且加载到runApp

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
        title: 'ysfhj',
        home: new RandomWords()
    );
  }
}

创建动态 StatefulWidget

class RandomWords extends StatefulWidget{
  @override
  createState() =>new RandomColorState();
}
class RandomColorState extends State<RandomWords>{
  final _lists =<WordPair>[];
  final _biggerFont =const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
//    final wordPair = new WordPair.random();
//    return new Text(wordPair.asPascalCase);
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('iam header'),
    ),
    body: _buildLists(),
  );
  }

  Widget _buildRow(WordPair pair){
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
  Widget _buildLists() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();
        final index = i ~/ 2;
        if (index >= _lists.length) {
          _lists.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_lists[index]);
      },
    );
  }
}