如何使用列表生成器创建 flutter 小部件列表？

Question

我有一个 items 参数，我必须在其中分配列表小部件，如下所示

items: [
    CachedNetworkImage(
        imageUrl: "https://images.unsplash.com/photo-1534531173927-aeb928d54385?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870",
        height: double.infinity,
        fit: BoxFit.cover,
    ),
    CachedNetworkImage(
        imageUrl: "https://images.unsplash.com/photo-1489824904134-891ab64532f1?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031",
        height: double.infinity,
        fit: BoxFit.cover,
    )
],

我正在通过动态列表尝试同样的事情，我的数据看起来像

List <Carousel> carousels = [
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1534531173927-aeb928d54385?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1489824904134-891ab64532f1?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1628964178609-aec11c666040?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871"
    ),
    const Carousel(
        imageUrl: "https://images.unsplash.com/photo-1505705694340-019e1e335916?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032"
    ),
];

现在在项目中我已经使用列表生成器来获取项目中的列表小部件

items: [
            ListView.builder(
                itemCount: carousels.length,
                itemBuilder: (BuildContext context, int index) {
                return CachedNetworkImage(
                    imageUrl: carousels[index].imageUrl,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  );
                },
            ),
 ]

这里出现错误 Another exception was thrown: Null check operator used on a null value，如何在轮播列表中的项目中创建小部件列表？

Answer 1

试试这个示例代码：

List<Widget> _listItem = [];

for(var imageWidget in carousels){
   Widget newWidget = CachedNetworkImage(
                    imageUrl: imageWidget.imageUrl,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  );
  _listItem.add(newWidget);
}

items = _listItem;

Answer 2

items =  carousels.map( (Carousel c) => 
  CachedNetworkImage(
    imageUrl: c.imageUrl,
    height: double.infinity,
    fit: BoxFit.cover,
  )
);

如何使用列表生成器创建 flutter 小部件列表？

How to create flutter widget list using list builder?

dart

flutter