使用预先填充的 List 中的 List<Widgets> 函数填充小部件 - Flutter

Posted 2023-02-23

【中文标题】使用预先填充的 List 中的 List<Widgets> 函数填充小部件 - Flutter

【英文标题】：Populate a widget with a List<Widgets> function from a pre-populated List - Flutter

【发布时间】：2020-06-29 06:51:50

【问题描述】：

我的代码背后的想法是使用从对象列表中获得的动态数据填充 Column 小部件 我使用 List>>，它本质上只是一个对象列表。

我的清单：

List<List<Map<String, String>>> listCardsAll = [
  [
    
      "cardCate": "AMEX",
      "cardDesc": "American Platinum 6",
      "cardImg":
          "images/AMEX/American-Express®-Green-Card-Earn-Rewards-Points.png"
    
  ],
  [
    
      "cardCate": "AMEX",
      "cardDesc": "American Platinum 5",
      "cardImg":
          "images/AMEX/American-Express®-Green-Card-Earn-Rewards-Points.png"
    
  ],
];

然后我在返回 Widget 的列中调用一个函数（我想返回一个 List 但它给出了错误）

小部件：

  Column(
      children: <Widget>[
        Row(
          children: <Widget>[generateCardsALL()],
        )
      ],
    )

我使用 for 循环，然后在函数中使用该动态数据创建一个小部件，但它只返回一个小部件，而不是我希望的 Collection。

我的功能：

Widget generateCardsALL() 
  var count = 0;
  for (var item in listCardsAll) 
    count++;
    if (count <= 2) 
      return ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: count,
      );
     else 
      count = 0;
      return ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: 3,
      );
    
  

（cardRowNum只是看它的3张卡在什么时候相邻才可以生成新的一行）

这是可重复使用的卡片

可重复使用的卡片：

class ReusableCards extends StatelessWidget 
  final String cardLink;
  final int cardRowNum;
  final String cardName;
  ReusableCards(
      @required this.cardLink,
      @required this.cardRowNum,
      @required this.cardName);

  @override
  Widget build(BuildContext context) 
    // addToListcards(cardLink);
    print("Inserted");
    return (cardRowNum == 1 || cardRowNum == 2
        ? GestureDetector(
            onDoubleTap: () ,
            child: Padding(
              padding: EdgeInsets.fromLTRB(0, 15, 15, 20),
              child: Container(
                width: MediaQuery.of(context).size.width * 0.24,
                child: SizedBox(
                  child: Column(
                    children: <Widget>[
                      Image.asset(cardLink, fit: BoxFit.fill),
                      Text(cardName)
                    ],
                  ),
                ),
              ),
            ),
          )
        : cardRowNum == 3
            ? Padding(
                padding: EdgeInsets.fromLTRB(0, 15, 0, 20),
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.24,
                  child: SizedBox(
                    child: Column(
                      children: <Widget>[
                        Image.asset(cardLink, fit: BoxFit.fill),
                        Text("" + cardRowNum.toString())
                      ],
                    ),
                  ),
                ),
              )
            : SizedBox());
  

如果我想让它成为一个列表而不是一个小部件，它就会中断。有人可以帮我解决这个难题

【参考方案1】：

尝试使用map 遍历列表并获取widgets 的列表，

例子：

Column(
      children: listCardsAll.map((oneCard) 
                      return Container(
                                child: Text(oneCard.cardDesc)
                       );
                 ).toList(),
)

【讨论】：

谢谢，它有效。我不敢相信它这么容易。感谢您的反馈

【参考方案2】：

我认为问题在于函数generateCardsALL 的内部。你没有返回一个 Widgets 数组，你应该改成这个。

List<Widget> generateCardsALL() 
  var count = 0;
  List<Widget> widgets;
  for (var item in listCardsAll) 
    count++;
    if (count <= 2) 
      widgets.add(ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: count,
      ));
     else 
      count = 0;
      widgets.add(ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: 3,
      ));
    
  
  return widgets;