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

问题描述

我正在尝试使用 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被调用并完成其工作，这里没有问题。要使 Ink 正常工作，我唯一要做的就是删除对的调用_onItemIndexChange并将其替换为(){}

标签： flutterdartsetstate

onTap: customFunction, onTap: (){customFunction();}, 并且onTap: () => customFunction()都执行相同的操作。我最初的印象是，可能setState()会在渲染涟漪效果之前再次构建屏幕。但是，我在本地测试了您的再现，但是setState()在调用 from 的函数中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。如果没有完整的重现，将很难确定所报告行为的原因。如果删除里面的函数setState()会渲染波纹动画，我建议从那里开始检查可能导致问题的原因。

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

问题描述

解决方案

推荐阅读