在 Flutter 中动态创建一列行的好方法是啥

Posted 2023-02-23

【中文标题】在 Flutter 中动态创建一列行的好方法是啥

【英文标题】：What is a good approach to dynamically create a column of rows in Flutter在 Flutter 中动态创建一列行的好方法是什么

【发布时间】：2020-05-28 05:22:43

【问题描述】：

理想情况下，我想让用户在按下按钮时从我的列中动态添加或删除一行。就像按下 + 按钮时一样，当按下 X 时，会在列中添加一行，反之亦然。但是，当我尝试使用相应的 X 按钮删除一行时，问题就来了。似乎我的方法只能在 x 被击中时删除随机行，而不是预期的行。如果用户已经在某行中放入数据然后只想删除该行，那么这种行为可能对用户来说已经足够好了。

r0..... +

r1.....X（当X在这里被点击时，r2或其他一些行可能会被删除，其他X按钮也是如此）

r2.....X

到目前为止，我采用了两种方法来实现我想要的功能。第一个是使用简单的 valuenotifier 和 for 循环。比如

final number = new ValueNotifier(0);

new IconButton(
  icon: Icon(Icons.add),
  onPressed: () 
    number.value++;
    print(number.value);
    setState(() );
  )

new Column(
  children: buildPartsWidget(number.value),
)

List<Widget> buildPartsWidget(int counts)
    List<Widget> ret = [];
    for(int i = 0; i < counts; i++)
      var temp = buildPartsRow();
      ret = List.from(ret)..add(temp);
    
    return ret;
  

Row buildPartsRow(int key) 
    return new Row(children: <Widget>[

      new IconButton(
        icon: Icon(Icons.clear), 
        onPressed: () 
          number.value--;
          setState(() );
        )
    ]);
  

第二种是用map来将一行和一个数字配对，这两个都不行，比如：

Map<int, Row> rowMap = new Map();
int rowIndex;

List<Widget> rowList()
    List<Widget> ret = [];
    rowMap.forEach((k, v) => ret.add(v));
    return ret;
   

new IconButton(
  icon: Icon(Icons.add),
  onPressed: () 
    rowMap[rowIndex] = buildPartsRow(rowIndex);
    rowIndex++;
    setState(() );
  )

new Column(
  children: rowList
)


Row buildPartsRow(int key) 
    return new Row(children: <Widget>[

      new IconButton(
        icon: Icon(Icons.clear), 
        onPressed: () 
          rowMap.remove(key);
          setState(() );
        )
    ]);
  

我觉得我理解这两种方法的根本问题。据我了解，之所以会出现这种行为，是因为在这两种方法中，颤振都会重建条目列，并且没有办法也不会“关心”行中的输入数据。我应该如何解决我的方法？还是有更好的方法来实现我的预期功能？

我也尝试过使用 listView，但它对我不起作用。由于我正在使用的所有这些小部件都已经在列表视图中，因此在列表视图中使用列表视图似乎需要我通过使用容器或尺寸框来限制内部列表视图的大小，这将在我的表单上给我一个框。我不想要表格上的方框。有没有办法使用列表视图但不需要一个框来限制它的大小？

【参考方案1】：

小部件动态列的好方法是改用ListView.builder。在此处查找文档：https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

ListView.builder(
  itemCount: rowMap.length,
  itemBuilder: (context, index) 
    return buildPartsRow(rowMap[index]);
  
)

【讨论】：

对不起，我忘了提一件事。我已经尝试过这种方法，但它对我不起作用。由于我正在使用的所有这些小部件都已经在列表视图中，因此在列表视图中使用列表视图似乎需要我通过使用容器或尺寸框来限制内部列表视图的大小，这将在我的表单上给我一个框。我不想要表格上的方框。有没有办法使用列表视图但不需要一个框来限制它的大小？

我认为列表视图中的列表视图问题可能是大小/约束问题？如果是这样，请尝试将它们放在 Expanded 小部件中。约束的问题是，如果你试图将没有约束的东西放入没有约束的东西中，它就会变成溢出错误。 （例如，列中的列、行中的行或行中的文本字段，举几个例子）但是将它们包装在扩展的小部件中是可行的。

@ArthurEKing 我也试过了。我将列表视图包裹在一个展开的包裹在一个列中。但它不会编译，除非列被容器包裹或扩展被 sizedbox 包裹