Flutter - 更改“onTap”方法时 InkWell 不起作用

Question

我正在尝试使用 InkWell 小部件或 RaisedButton，以便在点击小部件时显示涟漪效果。

当我将onTap参数设置为(){}时我没有问题，如果我在像这样的函数内部进行简单的print也没有问题(){print("hello");} ，但是一旦我打电话给我自定义功能，墨水井不再出现。 我已经尝试过onTap: customFunction,甚至onTap: (){customFunction();},但它并没有改变任何东西。

我的第一个想法是问题出在我的函数有一个可选参数的事实：

void customFunction([dynamic parameter]){
}

所以我试图像这样调用它onTap: (){customFunction(null);}甚至创建一个其他函数只是为了用空参数调用它，但没有任何效果，最后，我删除了可选性并强制value 为 null 但同样，没有任何改变。

我的函数正在调用setState但我不明白为什么它会改变任何东西。

这是我与 InkWell 一起使用的小部件：

Center(
  child: Ink(
    height: 120,
    width: 120,
    decoration: BoxDecoration(shape: BoxShape.circle),
    child: InkWell(
      borderRadius: BorderRadius.circular(60),
      onTap: (){_onItemIndexChanged(null);},
      splashColor: Colors.red,
      child: Center(
        child: Text(_totalAmountToString(widget.totalAmount),
          style: Theme.of(context).textTheme.headline),
        ),
      ),
    ),
  ),
)

我也对 RaisedButton 进行了同样的尝试：

Center(
  child: Container(
    height: 120,
    width: 120,
    decoration: BoxDecoration(shape: BoxShape.circle),
    child: RaisedButton(
      shape: CircleBorder(),
      onPressed: (){_onItemIndexChanged(null);},
      elevation: 0,
      color: Colors.transparent,
      splashColor: Colors.red,
      child: Center(
      child: Text(_totalAmountToString(widget.totalAmount),
        style: Theme.of(context).textTheme.headline),
      ),
    ),
  ),
)

最后这是我的功能：

_onItemIndexChanged(charts.SelectionModel model) {
    double newAngle;
    int index;
    double p = 0;
    if (model != null) {
      if (model.selectedDatum.isNotEmpty) {
        index = model.selectedDatum.first.series.data
            .indexOf(model.selectedDatum.first.datum);
        if (index == _selectedItemIndex) index = -1;
      } else {
        index = -1;
      }
    } else {
      index = _selectedItemIndex + 1 == widget.data.first.data.length
          ? -1
          : _selectedItemIndex + 1;
    }

    if (index != -1) {
      for (int i = 0; i < index; i++) {
        p += widget.data.first.data.elementAt(i).price;
      }
      p += widget.data.first.data.elementAt(index).price / 2;
      newAngle = -2 * pi * (p / widget.totalAmount) + pi / 2;
    } else {
      newAngle = _defaultAngle;
    }

    double originAngle =
        _startAngle != null ? _startAngle.value : _defaultAngle;
    _startAngle = null;

    setState(() {
      _selectedItemIndex = index;
      _animationController.reset();
      _startAngle = Tween(begin: originAngle, end: newAngle).animate(
          CurvedAnimation(
              parent: _animationController, curve: Curves.fastOutSlowIn));
    });

    _animationController.forward().orCancel;
  }

函数_onItemIndexChange被调用并完成它的工作，这里没有问题。 为了使 Ink Well 工作，我唯一要做的就是删除对_onItemIndexChange的调用并将其替换为(){}

Answer 1

onTap: customFunction 、 onTap: (){customFunction();}和onTap: () => customFunction()都执行相同的操作。 我最初的印象是setState()可能会在呈现涟漪效果之前再次构建屏幕。 但是，我在本地测试了您的再现，但是在从onTap调用的函数中使用setState()仍然呈现波纹动画。

我在 Flutter 演示应用程序中添加了这个片段

Center(
  child: Ink(
    height: 120,
    width: 120,
    decoration: BoxDecoration(shape: BoxShape.circle),
    child: InkWell(
      borderRadius: BorderRadius.circular(60),
      onTap: () => _incrementCounter(),
      splashColor: Colors.red,
      child: Center(
        child: Text('Count: $_counter'),
      ),
    ),
  ),
),

我无法运行的唯一部分是_onItemIndexChanged中的函数。 如果没有完整的repro ，将很难确定报告行为的原因。 如果删除setState()的函数会呈现波纹动画，我建议从那里开始检查可能导致问题的原因。