Flutter组件基础——ListView

ListView是滚动列表,类似于iOS中ScrollView,可横向、纵向滚动,内容不限。

ListView的使用

ListView的使用很简单,但是需要多多练习;

ListView的使用,通过设置children来实现,children中的Item为Widget对象。

纵向滚动

代码如下:

  1. class MyApp extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return MaterialApp(
  5. title: 'ListView Learn',
  6. home: Scaffold(
  7. appBar: new AppBar(
  8. title: new Text('ListView Widget')
  9. ),
  10. body: new ListView(
  11. children: <Widget>[
  12. Container(
  13. height: 50,
  14. color: Colors.orangeAccent,
  15. child: const Center(
  16. child: Text('Entry A'),
  17. ),
  18. ),
  19. Container(
  20. height: 50,
  21. color: Colors.lightGreenAccent,
  22. child: const Center(
  23. child: Text('Entry B'),
  24. ),
  25. ),
  26. new ListTile(
  27. leading: new Icon(Icons.access_time),
  28. title: new Text('access_time'),
  29. ),
  30. new Image.network(
  31. 'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg')
  32. ],
  33. )
  34. )
  35. );
  36. }
  37. }

效果如下:

Flutter组件基础——ListView - 图1

横向滚动

ListViewscrollDirection控制滑动方向

代码如下

  1. class MyList extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return ListView(scrollDirection: Axis.horizontal, children: [
  5. new Container(
  6. width: 180.0,
  7. color: Colors.lightBlue,
  8. ),
  9. new Container(
  10. width: 180.0,
  11. color: Colors.lightGreen,
  12. ),
  13. new Container(
  14. width: 180.0,
  15. color: Colors.orange,
  16. ),
  17. new Container(
  18. width: 180.0,
  19. color: Colors.orangeAccent,
  20. )
  21. ]);
  22. }
  23. }
  24. class MyApp extends StatelessWidget {
  25. @override
  26. Widget build(BuildContext context) {
  27. return MaterialApp(
  28. title: 'Text Widget',
  29. home: Scaffold(
  30. body: Center(
  31. child: Container(
  32. height: 200.0,
  33. child: MyList(),
  34. ),
  35. ),
  36. ));
  37. }
  38. }

效果如下:

Flutter组件基础——ListView - 图2
注意写法的不同,在这里自定义了一个MyList的Widget,然后在MyApp中使用MyList,就避免了在父视图嵌套太多的问题。

动态列表 ListView.builder()

使用动态列表需要先来看一下List类型,

List类型

List是集合类型,声明有几种方式,使用方式可以参考Swift中的Array

  • var myList = List(): 非固定长度的数组
  • var myList = List(2): 长度为2的数组
  • var myList = List<String>(): 创建一个String类型的数组
  • var myList = [1, 2, 3]: 创建一个1、2、3的数组

也可以使用generate方法来生成List元素,比如

  1. new List<String>.generate(1000,, (i) => "Item $i");

动态列表

代码如下:

  1. class MyList extends StatelessWidget {
  2. final List<String> entries = <String>['A', 'B', 'C'];
  3. final List colors = [
  4. Colors.orangeAccent,
  5. Colors.lightBlueAccent,
  6. Colors.cyanAccent
  7. ];
  8. @override
  9. Widget build(BuildContext context) {
  10. return ListView.builder(
  11. padding: const EdgeInsets.all(8),
  12. itemCount: entries.length,
  13. itemBuilder: (BuildContext context, int index) {
  14. return Container(
  15. height: 50,
  16. color: colors[index],
  17. child: Center(
  18. child: Text('Entry ${entries[index]}'),
  19. ),
  20. );
  21. },
  22. );
  23. }
  24. }
  25. class MyApp extends StatelessWidget {
  26. @override
  27. Widget build(BuildContext context) {
  28. return MaterialApp(
  29. title: 'List Build Learn',
  30. home: Scaffold(
  31. appBar: new AppBar(
  32. title: new Text('List Build Learn'),
  33. ),
  34. body: Center(
  35. child: Container(
  36. child: MyList(),
  37. ),
  38. ),
  39. ));
  40. }
  41. }

效果如下:

Flutter组件基础——ListView - 图3

参考

ListView Dev Doc
Flutter免费视频第二季-常用组件