Flutter中如何按snapshot.data.length在Widget内循环迭代生成组件

你可以通过数组遍历的方式批量生成listBerita组件，Flutter中常用以下两种实现方案： #

方案1：使用map遍历（最推荐） #

直接对返回的数据列表调用map方法，逐个生成对应的组件，再通过扩展运算符...插入到Column的子组件数组中即可，修改后代码如下：

Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text("Daftar Berita"),
      ),
      body: FutureBuilder(
        // 建议指定FutureBuilder的泛型，比如你返回的数据是List<Berita>就写FutureBuilder<List<Berita>>
        future: getBeritaDataAll("1"),
        builder: (context, snapshot) {
          if (snapshot.error != null) {
            return Column(
              children: [
                Text("tidak ada koneksi, mohon periksa koneksi internet anda")
              ],
            );
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else {
            // 先把数据转成列表备用
            final dataList = snapshot.data as List;
            return SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 15,
                  ),
                  // 遍历生成所有listBerita组件
                  ...dataList.map((item) => listBerita(title: item.title)).toList(),
                ],
              ),
            );
          }
        },
      ));
}

方案2：使用List.generate生成 #

如果你需要用到索引值做额外逻辑，可以用List.generate方法根据数组长度生成对应数量的组件：

...List.generate(dataList.length, (index) {
  // 这里可以拿到index做自定义逻辑，比如给奇偶项加不同样式
  return listBerita(title: dataList[index].title);
}),

优化建议 #

如果你的新闻列表数量较多，建议直接用ListView.builder替代SingleChildScrollView+Column的组合，它会懒加载可视区域内的组件，大幅提升长列表的滚动性能：

// 替换else块里的SingleChildScrollView部分
return ListView.builder(
  padding: const EdgeInsets.only(top: 15),
  itemCount: dataList.length,
  itemBuilder: (context, index) => listBerita(title: dataList[index].title),
);

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