如何在颤动中按下小部件时更改其颜色？

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>.

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

Answer 1

您使用的方法是正确的GestureDetector，但使用了错误的方法，您使用的方法onLongPressStart如下onLongPressEnd：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _changeColor = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: GestureDetector(
        onLongPressStart: (_) => setState(() => _changeColor = !_changeColor),
        onLongPressEnd: (_) => setState(() => _changeColor = !_changeColor),
        child: Container(
          color: _changeColor ? Colors.red : Colors.yellow,
          child: Text('Change color'),
        ),
      ),
    );
  }
}

另一种方法是使用MaterialStateColor@pskink 建议的类

class MyApp extends StatelessWidget {
  Color getTextColor(Set<MaterialState> states) {
    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
    };
    if (states.any(interactiveStates.contains)) {
// the color to return when button is in pressed, hovered, focused state
      return Colors.red;
    }
// the color to return when button is in it's normal/unfocused state 
    return Colors.yellow;
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FlatButton(
        child: Text('FlatButton'),
        onPressed: () {},
        textColor: MaterialStateColor.resolveWith(getTextColor),
      ),
    );
  }
}