颤振遍历带有地图的按钮列表

Question

我想遍历一个非常相似的按钮列表，但我不确定最好的方法是什么，因为每个按钮都需要一个传递单个参数的 onPressed 函数。

      Column(
        children: buttons
            .map(
              (item) => Row(
                children: <Widget>[
                  myButton(item[0], item[2]),
                  myButton(item[1], item[2]),
                ],
              ),
            )
            .toList(),
      ),

class MyButton extends StatelessWidget {
  MyButton(this.abool, this.onPressed);

  final bool abool;
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
      return RawMaterialButton(
        child:
            Image.asset('images/button.png'),
        onPressed: onPressed,
      );

当然，我在将不同的onPressed 函数存储在List 数组中时会遇到问题。在列中遍历类似按钮列表的最佳方法是什么？

Answer 1

从 Dart 2.3 开始，您可以使用列表解析（也称为 UI-as-code）在列表内动态生成按钮。

List<String> labels = ['apple', 'banana', 'pineapple', 'kiwi'];
List<VoidCallback> actions = [_buyApple, _doSomething, _downloadData, () => print('Hi')];

...

Column(
  children: [
    for (int i = 0; i < labels.length; i++)
      RaisedButton(
        label: Text(labels[i]),
        onPressed: actions[i],
      ),
  ],
)

Answer 2

如果按钮不具有相似的行为，您不应该创建 Mybutton 类。 你不能为注册按钮和登录按钮创建一个类，每个类都有不同的责任和行为。

当你有数据模型（shopItem）时应该使用这个类（从你的代码我认为是这种情况），并且你需要（添加到购物车）功能，这是你有的情况制作 addToCartButton 并成为这样的东西：

class AddToCartButton extends StatefulWidget {
  final ShoptItem item;
  AddToCartButton({Key key, this.item}) : super(key: key);
  @override
  _AddToCartButtonState createState() => _AddToCartButtonState();
}

class _AddToCartButtonState extends State<AddToCartButton> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Add to Cart'),
      onPressed: () {
        setState(() {
            cartList.add(item);
        });
      },
    );
  }
}

请注意，如果按钮本身存在任何类型的状态，例如

Text(inCart? 'already in cart':'add to cart'),'

除非你使用像 provider , bloc 等状态管理。

这里的第二个通知（最重要的）我使用了 cartList，它基本上是 ShopItem 的列表。

现在所有按钮都有类似的功能（将商品添加到购物车），但每个按钮都应该添加不同的商品，这可以在您正在使用的列或我更喜欢的 ListView 构建器中完成

列方法：

Column(
  children: <Widget>[
    for( item in itemsList)
      AddToCartButton(item : item);

  ],

ListViewBuilder 方法：

ListView.builder(
  itemCount: itemsList.length,
  itemBuilder: (context,index){
    return AddToCartButton(item : itemsList[index]);
  },
)

希望能帮到你