flutter - 如何在 flutter 中按下小部件时更改小部件的颜色？

Question

我有一个小部件，我想在用户按下它的时候改变它的背景颜色，当按下它时，它恢复到原来的颜色。

我尝试使用 GestureDetector，实现 onTapDown 和 onTapUp 函数，但它不起作用:改变颜色需要很长时间(~150 毫秒)，如果我以正常速度点击，颜色不会改变。

我是一名 Android 开发人员，我想做的是在 Android 中使用选择器完成，如下所示:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="..." android:state_pressed="true" />
  <item android:drawable="..." />
</selector>.

但我不知道如何用 flutter 做到这一点。我希望这段代码有助于理解我想要实现的目标。

Answer 1

这是我将如何做到的:

class MyWidget extends StatefulWidget {

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {

  AnimationController _controller;
  Color myColor = Colors.blue;

  @override
  void initState() {
    _controller = AnimationController(vsync: this,duration: Duration(milliseconds: 400));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUp: (_) {
        setState(() {     
        myColor = Colors.blue;
        });
      },
      onTapDown: (_) {
        setState(() {
        myColor = Colors.red;
        });
      },
       child: AnimatedBuilder(animation: _controller,
       builder: (context, child) => Container(
         height: 200,
         width: 200,
         color : myColor,
       )),
    );
  }
}

如果它太慢，您可以在 animationController 中更改持续时间。