Flutter中ListView和SingleChildScrollView+ListBody有什么区别?

3
我有一个关于比较ListView和包含ListBodySingleChildScrollView的问题。看起来,这两个结果看起来相同。但我想知道这两者在功能上是否有区别。我认为可能是效率或性能的一部分,但我不确定。提前感谢您的帮助。 SingleChildScrollView + ListBody
final items = List.generate(100, (index) => index).toList();

SingleChildScrollView(
  child: ListBody(
    children: items.map((e) => Text('$e')).toList(),
  )
)

列表视图

final items = List.generate(100, (index) => index).toList();

ListView(
  children: items.map((e) => Text('$e')).toList(),
)
2个回答

1

我知道一个区别:

  • ListView:是懒加载。
  • ListBody:是一次性加载。

今天,我修复了一个与ListView懒加载功能相关的bug,我改用ListBody进行修复。

我有一个应用程序,使用flutter-markdown,在ListView中呈现许多markdown片段,像这样:

ListView(
   children: <Markdown>[..._contents], 
)

我使用flutter_markdown.MarkdownElementBuilder来解析Markdown大纲(TOC目录),但是flutter_markdown ast逻辑只在Markdown.build()中运行,所以如果您不将ListView页面下拉到底部,您将无法获得完整的大纲,bug显示:bug image 我使用ListBody修复了这个bug。
SingleChildScrollView(
  child: ListBody(
       children: <Markdown>[..._contents], 
    )
)

修复 bug 后: bug 修复图片

此外,如果您正在浏览一个很长的页面,当向下滚动时可能会出现一些卡顿(使用 ListView),因为 ListView 在下拉期间会不时地进行计算加载。


感谢您的回答和额外提供的示例。我想确认一下我对您所说的理解是否正确:在ListView的情况下,如果高度更长且包含许多组件,则由于其惰性加载,可能会发生更多错误 - 这是正确的吗? - chunzhi23
看到这条评论的人,请告诉我它是否正确。 - chunzhi23
越高的组件数量和尺寸扩展,由于它的惰性加载,可能会出现更多的错误。 不是我的惰性加载。 - Chen Peng
@chunzhi23 不是ListView的问题。ListView的延迟加载机制非常好,但只是由于我的使用场景的限制:在flutter_markdown加载所有内容之前,我无法获取此Markdown的TOC。我只能选择放弃不使用ListView。 - Chen Peng

0

我必须说,我实际上从来没有听说过小部件ListBody,但是当你检查它的源代码时,你可以看到注释:

/// This widget is rarely used directly. Instead, consider using [ListView],
/// which combines a similar layout algorithm with scrolling behavior, or
/// [Column], which gives you more flexible control over the layout of a
/// vertical set of boxes.

所以Flutter开发人员本身并不推荐使用它。我也不知道确切的区别是什么,所以我想我并没有真正回答你的问题。也许其他人可以,但你也可以自己调查源代码,因为它是完全开源的。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接