显示数据列表是移动应用程序常见的需求。Flutter包含的ListView Widget,使列表变得轻而易举!

创建一个ListView

使用标准ListView构造函数非常适合仅包含少量条目的列表。我们使用内置的ListTile Widget来作为列表项。

  1. new ListView(
  2. children: <Widget>[
  3. new ListTile(
  4. leading: new Icon(Icons.map),
  5. title: new Text('Maps'),
  6. ),
  7. new ListTile(
  8. leading: new Icon(Icons.photo_album),
  9. title: new Text('Album'),
  10. ),
  11. new ListTile(
  12. leading: new Icon(Icons.phone),
  13. title: new Text('Phone'),
  14. ),
  15. ],
  16. );

完整的例子

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(new MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. final title = 'Basic List';
  7. return new MaterialApp(
  8. title: title,
  9. home: new Scaffold(
  10. appBar: new AppBar(
  11. title: new Text(title),
  12. ),
  13. body: new ListView(
  14. children: <Widget>[
  15. new ListTile(
  16. leading: new Icon(Icons.map),
  17. title: new Text('Map'),
  18. ),
  19. new ListTile(
  20. leading: new Icon(Icons.photo),
  21. title: new Text('Album'),
  22. ),
  23. new ListTile(
  24. leading: new Icon(Icons.phone),
  25. title: new Text('Phone'),
  26. ),
  27. ],
  28. ),
  29. ),
  30. );
  31. }
  32. }