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

【问题标题】：Flutter - InkWell not working when changing 'onTap' methodFlutter - InkWell 在更改“onTap”方法时不起作用
【发布时间】：2019-08-20 16:40:01
【问题描述】：

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

当我将onTap 参数设置为(){} 时我没有问题，如果我在像这样(){print("hello");} 这样的函数内执行一个简单的print 也没有问题，但是只要我调用我的自定义函数，墨井不再出现。我尝试过onTap: customFunction, 甚至onTap: (){customFunction();},，但它并没有改变任何东西。

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

void customFunction([dynamic parameter]){
}

所以我尝试像这样onTap: (){customFunction(null);} 调用它，甚至创建一个其他函数只是为了使用 null 参数调用它，但没有任何效果，最后，我删除了可选性并将值强制为 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 正常工作，我唯一要做的就是删除对 _onItemIndexChange 的调用，并将其替换为 (){}

【问题讨论】：

将“onPressed: (){_onItemIndexChanged(null);}”改为“onPressed: _onItemIndexChanged(null),”
如果我这样做，我会遇到一连串错误：E/flutter (27746): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: This ticker was canceled: Ticker(created by _DonutPieChartCardState#b7d94(lifecycle state: created)) E/flutter (27746): null
没有意义，一个和另一个没有区别。很难验证您的代码，因为它有很多未列出的依赖关系。但是你会看到，如果你评论它的功能并且只在上面打印一个，它就会被调用。
ontap 工作正常，问题出在函数中
我认为有区别。我第一次给出一个函数而不调用它，第二次我给出一个函数并调用它。所以该函数被执行了多次（我认为每次重建树时）

标签： flutter dart setstate

【解决方案1】：

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

我在 Flutter 演示应用中添加了这个 sn-p

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() 中的函数会呈现波纹动画，我建议从那里开始检查可能导致问题的原因。

【讨论】：