Flutter 如何在onPressed（）中动态更改凸起按钮的背景色

我有一个凸起按钮的列表，我希望所选按钮的背景色在其onPressed（）中更改

我尝试在setState中更改颜色，但没有任何效果

这是生成按钮列表的函数

List<Widget> _makeZoneList(List<Zone> zones) {
    List<Widget>Buttons = new List();
    for (int i = 0; i < zones.length; i++) {
      Buttons.add(RaisedButton(
        color: zones[i].isSelected ? AppColors.primaryColor : AppColors.white,
        onPressed: () {
          setState(() {
            if (zones[i].isSelected){
              zones[i].isSelected = false;
            }
            else{
              zones[i].isSelected = true;
            }
            print(zones[i].isSelected.toString());
          });
        },
        child: Text(zones.elementAt(i).text)
      ));
    }
    return Buttons;
  }

List\u makeZoneList（列表区域）{
ListButtons=新列表（）；
对于（int i=0；i

这就是我调用函数的地方

Widget _zoneBody() {
    return Padding(
        padding: EdgeInsets.all(32),
        child: StreamBuilder<List<Zone>>(
            stream: GetterBloc.zonesStream,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return new Container();
              } else {
                if (snapshot.hasData) {
                     return Wrap(
                          spacing: 6.0, // gap between adjacent chips
                          children: _makeZoneList(snapshot.data));

                } else {
                  return new Container();
                }
              }
            }));
  }

Widget\u zoneBody（）{
返回填充(
填充：边缘设置。全部（32），
孩子：StreamBuilder(
流：GetterBloc.zonesStream，
生成器：（上下文，快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回新容器（）；
}否则{
if（snapshot.hasData）{
回程包装(
间距：6.0，//相邻芯片之间的间隙
子项：_makeZoneList（snapshot.data））；
}否则{
返回新容器（）；
}
}
}));
}

---

当我按下任何按钮时，它的isSelected值都会改变，但是背景不会相应地改变，除非我弄错了，否则你要做的事情已经被flift处理了。我想你所要做的就是设置按钮的颜色，当它被按下时，它会变成那种颜色。您可以将其设置为整个应用程序的主题，这样所有按钮的行为都相同，而不是为每个单独的按钮设置

然而，你所做的事情不起作用也是有原因的。您没有包含足够的代码供我讲述，但我相信您所做的工作不起作用的原因是，您有一个数据列表，当按下按钮时，这些数据会发生变化（即，

zones[I].isSelected=false；

）。您在setState中执行此操作，但flift检查是否需要重建的方式是对状态成员进行相等比较（即，它将检查zones==zones）

因为“区域”只是一个列表，并且对于旧状态和新状态实际上是相同的列表，所以Flatter将假定没有任何更改，并且不会费心重建

---

有两种简单的方法可以解决这个问题。一种方法是每次修改列表时复制一份列表，并将

zones

成员设置为该副本，以便在颤振时比较

old.zones！=新建。区域

。另一种方法是保留一个单独的对象，每次修改列表时都会更改它（我倾向于使用一个称为changeconter的整数，每次列表更改时都会递增），因为这样可以“愚弄”flatter进行重建。

您可以做的是在Zone类中创建一个“color”属性（不需要为其设置任何值）。然后将

RaisedButton

的

color

属性设置为

zone.color？？？=AppColors.primaryColor

现在，在按下的

函数中，您可以检查
！选择zone.i
然后设置
zone.color=Colors.white

下面是创建RaisedButton的实现。您还可以检查完整的实现

List\u createButton（BuildContext上下文，列表区域）{
返回区域。地图（（区域）{
返回上升按钮(
已按下：（）{
设置状态（）{
如果（！zone.isSelected）{
zone.color=AppColors.white；
}
});
},
颜色：zone.color？？？=Theme.of（context）.primaryColor，
子项：文本（zone.Text），
);
}).toList（）；
}
更新答案（
提升按钮
）
由于
RaisedButton
现在已不推荐使用，请使用
levatedbutton
：


代码：

class\u MyState扩展状态{
bool_标志=真；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
儿童：升降按钮(
按下：（）=>setState（（）=>U标志=！\U标志），
子项：文本（_标志？'Red'：'Green'），
样式：ElevatedButton.styleFrom(
primary:_flag？Colors.red:Colors.teal，//这是您需要的！
),
),
),
);
}
}


旧答案
由于未定义的类和变量，很难实现您的代码，但是我创建了一个小示例，它将帮助您找到所需的内容

List<bool> _list = [true, false, true, false];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Title")),
    body: ListView(children: _buildButtons()),
  );
}

List<Widget> _buildButtons() {
  List<Widget> listButtons = List.generate(_list.length, (i) {
    return RaisedButton(
      color: _list[i] ? Colors.green : Colors.red,
      onPressed: () {
        setState(() {
          _list[i] = !_list[i];
        });
      },
      child: Text("Button #${i}"),
    );
  });
  return listButtons;
}

List _List=[true，false，true，false]；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“标题”）），
正文：ListView（子项：_buildButtons（）），
);
}
列表_buildButtons（）{
List listButtons=List.generate（_List.length，（i）{
返回上升按钮(
颜色：_列表[i]？颜色。绿色：颜色。红色，
已按下：（）{
设置状态（）{
_列表[i]=！\u列表[i]；
});
},
子项：文本（“按钮#${i}”），
);
});
返回列表按钮；
}

输出：

这里有一个非常简单的方法

bool isButtonPressed = false;

RaisedButton(
            color: isButtonPressed ? Colors.green : Colors.red,
            onPressed: () {
              setState(() {
                isButtonPressed =!isButtonPressed;
              });
            },
          ),

谢谢你的快速回复。。不幸的是，它现在仍在工作。。我想问题是我的小部件在一个列表中。你可以使用这个解决方案：记住设置
onPressed
属性。
bool isButtonPressed = false;

RaisedButton(
            color: isButtonPressed ? Colors.green : Colors.red,
            onPressed: () {
              setState(() {
                isButtonPressed =!isButtonPressed;
              });
            },
          ),