用列表展示数据是移动应用开发中较为常用的方式,Flutter 自带的 ListView Widget 可以帮助你轻松的实现一个列表。

创建一个 ListView

使用标准的 ListView 构造方法非常适合只有少量数据的列表。我们还将使用内置的 ListTile Widget 来给我们的条目提供可视化结构。

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

完整示例

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

Basic List Demo