如何在onPressed()中動態更改凸起按鈕的背景顏色

Question

我有一個凸起按鈕列表，我希望所選按鈕的背景顏色在其 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;
  }

這是我調用函數的地方

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();
                }
              }
            }));
  }

當我按下任何按鈕時，它的 isSelected 值會發生變化，但背景不會相應地發生變化

Answer 1

更新的答案（ ElevatedButton ）

由於RaisedButton現在已棄用，請使用ElevatedButton ：

代碼：

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ElevatedButton.styleFrom(
            primary: _flag ? Colors.red : Colors.teal, // This is what you need!
          ),
        ),
      ),
    );
  }
}

---

舊答案

由於未定義的類和變量，很難實現您的代碼，但是我創建了一個小示例，它將幫助您找到所需的內容。

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;
}

輸出：

Answer 2

除非我弄錯了，否則您嘗試做的事情已經被顫振處理了。 我認為你所要做的就是設置按鈕的hightlightColor ，當它被按下時它會變成那個顏色。 您可以將其設置為整個應用程序的主題，以便所有按鈕的行為都相同，而不是為每個單獨的按鈕設置它。

但是，您正在做的事情不起作用也是有原因的。 你沒有包含足夠多的代碼讓我告訴你，但我相信你正在做的事情不起作用的原因是你有一個數據列表，當按下按鈕時你正在改變（即zones[i].isSelected = false; )。 您在 setState 中執行此操作，但是 flutter 檢查某些內容是否需要重建的方式是對 State 的成員進行相等比較（即它會檢查是否區域 == 區域）。

因為 'zones' 只是一個列表，並且實際上是舊狀態和新狀態中的相同列表，所以 flutter 會假設沒有任何變化並且不會打擾重建。

有兩種簡單的方法可以解決這個問題。 一種方法是在每次修改列表時復制一份列表並將zones成員設置為該列表，以便在顫動時比較old.zones != new.zones 。 另一種方法是保留一個單獨的對象，每次修改列表時都會更改該對象（我傾向於使用一個名為 changeCounter 的整數，每次列表更改時我都會增加該整數），這樣您就可以“愚弄”重建。

Answer 3

這是一個非常簡單的方法。

bool isButtonPressed = false;

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

Answer 4

您可以做的是在 Zone 類中創建一個“顏色”屬性（不需要為其設置任何值）。 然后將RaisedButton的color屬性設置為zone.color ??= AppColors.primaryColor 。

現在，在onPressed函數中，您可以檢查是否!zone.isSelected然后設置zone.color = Colors.white 。

下面是創建 RaisedButton 的實現。 您還可以在此處查看完整實施

List<Widget> _createButton(BuildContext context, List<Zone> zones) {
    return zones.map((Zone zone) {
      return RaisedButton(
        onPressed: () {
          setState(() {
            if (!zone.isSelected) {
              zone.color = AppColors.white;
            }
          });
        },
        color: zone.color ??= Theme.of(context).primaryColor,
        child: Text(zone.text),
      );
    }).toList();
  }