时间戳

首页 > 解决方案 > 颤动中MaterialButton上的条件highlightColor

flutter - 颤动中MaterialButton上的条件highlightColor

问题描述

我正在尝试用多个按钮构建一个测验。当用户按下正确答案的按钮时，我希望按钮具有绿色的 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;

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

标签： flutterdart

解决方案

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

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

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

推荐阅读