Flutter Widget 之ListView

你是否曾想过将一组项目显示在可滚动列表中？

ListView正式能如此操作的widget

简单来说，你给它一个项目列表，让其自动添加其余的操作。

ListView(
    children: [item1, item2, item3],
);

你也许会问：“其余的动作是什么？” 那都是可自定义的。

不喜欢它纵向滚动,可将滚动的方向换成横向或者维持纵向滚动

ListView(
    children: [item1, item2, item3],
    scrollDirection: Axis.horizontal,
);

ListView(
    children: [item1, item2, item3],
    scrollDirection: Axis.vertical,
);

喜欢由下往上的滚动？那就吧reverse设置为true

ListView(
    children: [item1, item2, item3],
    reverse: true,
);

希望列表永远不能滚动, 那就使用NeverScrollableScrollPhysics

ListView(
    children: [item1, item2, item3],
    physics: NeverScrollableScrollPhysics(),
);

你是否希望在关屏时对这些项目进行垃圾收集,那么停用AutomaticKeepAlive

• 特性默认是 true，意思是在列表元素不可见后可以保持元素的状态，从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法，会造成一定程度的内存开销。可以设置为 false 关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏（实际会很少发生）。

ListView(
    children: [item1, item2, item3],
    addAutomaticKeepAlives: false,
);

如果你想进一步控制关屏的含义，使用cacheExtent

ListView(
    children: [item1, item2, item3],
    cacheExtent: 100.0,
);

有着很长并很容易生成，或者需要动态创建项目列表，使用ListView.builder

ListView.builder(
    itemBuilder: (_, index) =>
        Text('Item $index'),
);

不确定是否喜欢某个项目与下一个项目贴紧？通过separatorBuilder使用分割的ListView，不要忘了表明列表中有多少个项目，如果你用该构造函数。

ListView.separated(
    itemBuilder: (_, index) => 
        Text('Item $index'),
    separatorBuilder: (_, _) => Divider(),
);

如果以上的都不管用，你可以随时通过SliverChildDelegate构建自己的自定义ListView

ListView.custom(
    childrenDelegate: mySliverChildDelegate,
);

如果想了解有关ListView的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址