如何在map.toList()中设置itemCount以限制列表项数量？

针对你用list.map.toList()生成Row子组件的场景，要限制显示的列表项数量，有两种实用的实现方式：

方法一：直接截取前N个元素（最简单） #

利用Dart集合的take(N)方法，直接从数据源中提取前N个元素，再转成Widget列表，效果等同于ListView.builder里设置itemCount：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: data
      .take(3) // 替换成你需要限制的数量，比如3
      .map<Widget>(
        (e) => card(e),
      )
      .toList(),
)

如果data的长度本身小于你设置的数量，take()会自动取全部元素，不会出现异常。

方法二：自定义超过数量的显示逻辑 #

要是你需要在列表末尾添加“更多”按钮这类扩展操作，可以先截取元素，再额外判断添加：

// 定义要显示的最大数量
final int maxCount = 3;

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    // 添加前maxCount个元素对应的卡片
    ...data
        .take(maxCount)
        .map<Widget>((e) => card(e))
        .toList(),
    // 数据源长度超过限制时，添加“更多”按钮
    if (data.length > maxCount)
      TextButton(
        onPressed: () {
          // 这里写点击展开全部的逻辑
        },
        child: Text("+${data.length - maxCount}"),
      ),
  ],
)

内容的提问来源于stack exchange，提问作者CCP