使用提供程序在 flutter 中按下時更改顏色

Question

如何使用 Provider State Management 而不是setState()更改顏色

我有一個按鈕，默認顏色為黑色 - 第一次點擊顏色為藍色，第二次點擊顏色為紅色，第三次點擊顏色為綠色第四次點擊顏色為黑色（默認）或紫色我如何使用 Provider

Model：

class DriverStatusState extends ChangeNotifier {
  var numberOfClicks = 0;
  Color buttonColor = Colors.red;

  void changeColor() {
    numberOfClicks++;
    mapNumerOfClicksToColor(numberOfClicks);
    notifyListeners();
  }

  mapNumerOfClicksToColor(int num) {
    switch (num) {
      case 1:
        {
          buttonColor = Colors.orange;
        }
        break;
      case 2:
        {
          buttonColor = Colors.green;
        }
        break;
      default:
        {
          buttonColor = Colors.red;
        }
        break;
    }
    notifyListeners();
  }
}

小部件：

Consumer<DriverStatusState>(
            builder: (context, state, _) => ElevatedButton(
              child: Text('press me'),
              onPressed: () {
                state.mapNumerOfClicksToColor(0);
                     },
              style: ElevatedButton.styleFrom(primary: state.buttonColor),
            ),
          ),

Answer 1

您需要將點擊次數保存在一個變量中，每次單擊按鈕時，您都會增加變量，並根據新值更改顏色。

假設您熟悉 Provider，您將在 model 中執行以下操作：

var numberOfClicks = 0;
Color buttonColor = Colors.white;


void changeColor(){
   numberOfClicks++;
   mapNumerOfClicksToColor(numberOfClicks);
   notifyListeners();
}

mapNumerOfClicksToColor(int num){
  switch(num){
    case 1:
       buttonColor = Colors.Blue;
    case 2:
        ....
    case 3:
        ....
  }
 notifyListeners();
}