Flutter - 按下时更改 RaisedButton 的颜色答案

【问题标题】：Flutter - Changing color of RaisedButton on pressFlutter - 按下时更改 RaisedButton 的颜色
【发布时间】：2019-07-03 05:26:43
【问题描述】：

我所读到的所有内容都表明您可以使用 SetState 完成这项工作。这是我一直在使用的，它不会重绘。

class ServerSelectionState extends State<ServerSelection> {

  bool server1Selected, server2Selected, server3Selected = false;

  @override
  void initState() {
    setState(() {
      server1Selected= false;
      server2Selected= false;
      server3Selected= false;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    //Basically have an onTap method from a ListTile that opens a dialog, like this:  
    onTap: () {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            backgroundColor: greyTheme,
            content: Form(
              child: Container(
                children: <Widget>[
                  ButtonTheme(
                    child: RaisedButton(
                      onPressed: (){
                        if (!mounted) return;
                          setState(() {
                            server1Selected = true;
                            server2Selected = false;
                            server3Selected = false;
                          });
                        },
                        color: server1Selected == true ? Colors.pink : Colors.blue,
                        child: Text(
                          'Server 1',
                          style: TextStyle(
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          }
       );
     }

这将在热重载时很好地更新按钮颜色，但在此之前，重绘似乎并不愉快。 if (!mounted) 部分防止了我看到的关于在重绘或类似之前调用 dispose 的错误，并且打印输出这正在工作，它正在正确更改布尔值的状态，它实际上并没有更新颜色直到您强制小部件重绘。

【问题讨论】：

标签： button flutter colors setstate flutter-onpressed

【解决方案1】：

showDialog 不能直接更改值，但要这样做，您的对话框必须是有状态的小部件。

从您的代码中可以看出，您必须创建另一个有状态的小部件，该小部件返回整个警报对话框，类似于下面的代码。

您必须在新的有状态小部件中传递所有需要的变量。

import 'package:flutter/material.dart';

class Homestack extends StatefulWidget {
  @override
  _HomestackState createState() => _HomestackState();
}

class _HomestackState extends State<Homestack> {


  String dropdownValue ;

  @override
  Widget build(BuildContext context) {

    return new Container(
      color: Colors.blue,
        padding: const EdgeInsets.all(20),
        child: GestureDetector(
          child: new Text("Tap ME!"),
          onTap: (){
            return showDialog(
                context: context,
                builder: (context){
                  return xyz(
                    server3Selected: false,
                    greyTheme: Colors.blueAccent,
                    server1Selected: false,
                    server2Selected: false,
                  );
                }
            );
          },
        )
    );

  }
}



class xyz extends StatefulWidget {

    Color greyTheme ;
    bool server1Selected;
    bool server2Selected;
    bool server3Selected;

    xyz({Key key, this.greyTheme,this.server1Selected,this.server2Selected,this.server3Selected}): super(key: key);

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

  class _xyzState extends State<xyz> {
    @override
    Widget build(BuildContext context) {
      return AlertDialog(
        backgroundColor: widget.greyTheme,
        content: Form(
          child: Column(
            children: <Widget>[
              ButtonTheme(
                child: RaisedButton(
                  onPressed: (){
                    if (!mounted) return;
                    setState(() {
                      widget.server1Selected = true;
                      widget.server2Selected = false;
                      widget.server3Selected = false;
                    });
                  },
                  color: widget.server1Selected == true ? Colors.pink : Colors.blue,
                  child: Text(
                    'Server 1',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }

【讨论】：

这没有任何作用。我什至不知道如何称呼这个。 onTap: () { showDialog(); } ?什么都没有发生。
我用完整的代码演示更新了我的答案，希望对您有所帮助。
完美运行！这是一个优雅、完整的解决方案。非常感谢@Viren V Varasadiya

【解决方案2】：

来自 Flutter 文档：如果您尝试更改按钮的颜色并且它没有任何效果，请检查您是否传递了非空 onPressed 或 onLongPress 回调。

【讨论】：