ListView.builder 和使用 map 函数有什么区别

what are the differences between ListView.builder and use map function

ListView.builder和创建小部件列表时的地图功能有什么区别?我们什么时候应该使用一个而不是另一个?

如果您有一长串项目,请使用ListView.builder()。它只构建屏幕上可见的项目。每次用户滚动列表时,它都会构建下一个可见项目。

如果你使用

Column(
    children: items.map((items){
        return ...
    }).toList()
)

它的构建成本很高。

所以,我认为最好的做法是使用 ListView.builder() 。 你可以使用 map 如果您确定物品不超过几件。

它们是具有不同目的的方法。您可以使用列表的 map 方法将其转换为不同的可迭代对象。另一方面,ListView.builder 是一个带有 itemBuilder 方法的小部件。我假设您是在询问 ListView() 和 ListView.builder() 构造函数之间的区别。

ListView() 构造函数采用子参数,您可以在其中使用列表的 map 方法创建小部件列表。当调用构建方法时,这些小部件会立即呈现。

另一方面,

ListView.builder() 采用 itemBuilder 和 itemCount 参数。不同之处在于它不会立即渲染对象,而是仅在需要在屏幕上显示它们时才渲染。所以如果你有一个大列表,那么只有那些应该因滚动而可见的项目才会被渲染,其他的则不会。当您向下滚动时,将呈现新项目,而不再呈现以前的项目。如果您有 1000 个项目但只有 10 个适合页面,则呈现 10 个。所以这样它可以有效地使用内存。

只要您有需要转换为小部件列表的数据列表,请使用 ListView.builder()。仅在手动创建小部件或使用小型列表时使用 ListView()。

两者的示例:

 final list = ['this', 'is', 'my', 'list'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index) => Text(list[index]),
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: const [
          Text('Some Text'),
          Text('Some different text'),
          Text('Another'),
          Text('Some Text'),
        ],
      ),
    );
  }