颤动中MaterialButton上的条件highlightColor答案

【问题标题】：Conditional highlightColor on MaterialButton in flutter颤动中MaterialButton上的条件highlightColor
【发布时间】：2020-05-08 20:51:08
【问题描述】：

我正在尝试构建一个包含多个按钮的测验。当用户按下正确答案的按钮时，我希望按钮具有绿色的 highlightColor。如果按钮错误，则 highlightColor 为红色。我遇到的问题是，当我单击一个按钮时，会显示正确的 highlightColor，但您也会看到错误的颜色。如果我使用 splashColor 代替，那么您只会看到正确的颜色，这很好，但效果不一样。

这是代码的简化版本，只有一个按钮，但问题相同。


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);

    final String title;

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

class _MyHomePageState extends State {

    bool    _winner = false;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text(
                            'Press the button:',
                        ),

                        MaterialButton(
                            minWidth: MediaQuery.of(context).size.width * 0.90,
                            height: 60.0,
                            color: Colors.grey[800],
                            splashColor: Colors.transparent,
                            //splashColor: _winner ? Colors.green : Colors.red,
                            highlightColor: _winner ? Colors.green : Colors.red,

                            onPressed: () {

                                setState(() {
                                });
                                _winner ? _winner=false : _winner=true;

                            }
                        ),
                    ],
                ),
            ),
        );
    }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

highlight 淡入淡出动画持续 200 毫秒，setState 在动画结束前被调用，这就是为什么你会看到另一种颜色。

一种解决方案是在 200 毫秒延迟后 setState。

onPressed: () {
              Future.delayed(Duration(milliseconds: 200), () {
                setState(() {});
                _winner ? _winner = false : _winner = true;
              });
            }),

【讨论】：

【解决方案2】：

另一种解决方案是使用 GestureDetector 和 onTap 事件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State {
  bool _winner = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('widget.title'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Press the button:',
            ),
            GestureDetector(
              onTapDown: (_) {
                setState(() {});
                _winner ? _winner = false : _winner = true;
              },
              child: ColorButton(
                isWinner: _winner,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ColorButton extends StatefulWidget {
  const ColorButton({
    Key key,
    @required this.isWinner,
  }) : super(key: key);

  final bool isWinner;

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

class _ColorButtonState extends State<ColorButton> {
  bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) {
        setState(() {
          isPressed = true;
        });
      },
      onTapUp: (_) {
        setState(() {
          isPressed = false;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        height: 60.0,
        width: MediaQuery.of(context).size.width * 0.9,
        color: isPressed
            ? widget.isWinner ? Colors.green : Colors.red
            : Colors.grey[800],
      ),
    );
  }
}

【讨论】：