Question

我尝试使用InkWell小部件或RaisedButton，以便在轻按小部件时可以显示波纹效果。

将onTap参数设置为(){}时没有问题，如果我在类似print的函数中执行简单的(){print("hello");}，也没有问题，但是调用自定义函数后，墨水孔将不再显示。我已经尝试过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被调用并完成其工作，这里没有问题。为了使墨水正常工作，我唯一要做的就是删除对_onItemIndexChange的调用，并用(){}

替换它。

Answer 1

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

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

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

1 个答案: