flutter - 如何在 Flutter 回调中使用可变参数？

Question

我有一个简化的 flutter 控件，想想一排“单选”按钮或一个菜单栏。父级为每个按钮和回调传递一个“字幕”列表。然后控件点击回调，传递所点击按钮的索引。问题是，“按钮”是动态创建的，数量可能因父级而异。当我在 GestureDetector 中设置 onTap 函数的回调时，它总是会在循环中使用参数 (idx) 的最后一个值命中回调。因此，如果有 4 个按钮，则无论点击哪个按钮，doCallback 总是使用 4 调用。调用 doCallback 时似乎引用了 idx，而不是 idx 的值。有没有办法让每个按钮将它自己的索引发送到回调？

class CtrlRadioSelector extends StatelessWidget {
  CtrlRadioSelector({Key? key, required this.captions, required this.onTapItem})
      : super(key: key);
  final List<String> captions;
  final ValueSetter<int> onTapItem;

  @override
  Widget build(BuildContext context) {
    List<Widget> selectorItems = [];
    int idx = 0;
    for (var caption in captions) {
      selectorItems.add(Expanded(
          flex: 10,
          child: GestureDetector(
              onTap: () => doCallback(idx),
              child: Text(caption,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18)))));
      idx++;
    }
    return Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: selectorItems);
  }

  void doCallback(int idx) {
    onTapItem(idx);
  }
}

Answer 1

一个修复方法是使用一个 for 循环来迭代一个索引，无论如何你都需要它:

    for (var idx = 0; idx < captions.length; i += 1) {
      selectorItems.add(Expanded(
          flex: 10,
          child: GestureDetector(
              onTap: () => doCallback(idx),
              child: Text(captions[idx],
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18)))));
    }

这是因为 Dart 专门让闭包捕获 for 循环的索引(而不是所有 范围内变量的值)。根据 Dart Language Tour :

Closures inside of Dart’s for loops capture the value of the index, avoiding a common pitfall found in JavaScript. For example, consider:

var callbacks = [];
for (var i = 0; i < 2; i++) {
  callbacks.add(() => print(i));
}
callbacks.forEach((c) => c());

The output is 0 and then 1, as expected. In contrast, the example would print 2 and then 2 in JavaScript.

更一般地说，您还可以确保您的闭包引用一个循环主体的局部变量，这将避免在每次迭代时重新分配引用的变量。例如，以下内容也可以使用(尽管在您的特定情况下它会不必要地冗长):

    int idx = 0;
    for (var caption in captions) {
      var currentIndex = idx;

      selectorItems.add(Expanded(
          flex: 10,
          child: GestureDetector(
              onTap: () => doCallback(currentIndex),
              child: Text(caption,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18)))));
      idx++;
    }