如何使用提供程序包代替 setState 来更改按钮颜色？

Question

我有一个小部件树，它有一个按钮，按下时会改变颜色并执行某些功能，但每次我按下它时，整个小部件都会重建（即重新加载地图），这对我来说很难，因为它与地图，我想使用提供程序包，希望它只会导致按钮改变颜色，而不是重新加载整个地图。我该如何使用它？我想试试看。


  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      children: [
        CustomMap()
          Positioned(
          top: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: RaisedButton(
                  color: driverStatusColor,
                  onPressed: () {
                    if (isDriverAvailable != true) {
                      makeDriverOnlineNow();
                      getLocationLiveUpdates();

                      setState(() { //need to replace this with provider package
                        driverStatusColor = Colors.green;
                        driverStatusText = "You are Online Now";
                        isDriverAvailable = true;
                      });
                      displayToastMessage("You are Online now", context);
                    } else {
                      setState(() {
                        driverStatusColor = Colors.black;
                        driverStatusText = "Your are Offline";
                        isDriverAvailable = false;
                        displayToastMessage("You are Offline now", context);
                      });

                      driverOffline();
                    }
                  },
                  ]}

Answer 1

我相信有很多方法可以使用 provider 包来管理状态，但我会向您展示我知道的一种，很遗憾，这意味着我不知道它是否是您需要的：

首先，您必须声明一个状态 class，在您的情况下，我相信这个 class 应该只包含您按钮的颜色：

class DriverStatusState {
  Color driverStatusColor = Colors.black;
}

我们需要这个class的原因是我们需要它来实现ChangeNotifier，我们需要它在每次它的值改变时调用notifyListeners，所以我会做class

的一些变化

class DriverStatusState extends ChangeNotifier {
  Color _driverStatusColor = Colors.black;
  Color get driverStatusColor => _driverStatusColor;
  set driverStatusColor(Color color) {
    _driverStatusColor = color;
    notifyListeners();
  }
}

现在，在您的应用程序中的某个位置，在您将使用该值的位置之上，您需要声明一个 ChangeNorifierProvider，您可以将其放在任意低的位置，但它必须是 在你的按钮上方

ChangeNotifierProvider<DriverStatusState>(
  create: (_) => DriverStatusState(),
  child: ...
)

我们使用 create 方法创建我们状态的一个实例，并在子参数上继续我们的小部件树。

现在需要使用该值，就在您的按钮上方，您应该添加一个消费者小部件：

Consumer<DriverStatusState>(
  builder: (context, state, _) => ElevatedButton(
    child: Text('press me'),
    onPressed: () {
      if (!isDriverAvailable) {
        ...
        state.driverStatusColor = Colors.green;
      } else {
        ...
        state.driverStatusColor = Colors.black;
      }
    }
    style: ElevatedButton.styleFrom(primary: state.driverStatusColor),
  ),
)

消费者的构建器方法为您提供上下文、您提供的值的值以及指定的子小部件。

因此，当您分配 state.driverStatusColor 时，class 运行 notifyListeners，它通知提供者，通知消费者，消费者重建。

如何使用提供程序包代替 setState 来更改按钮颜色？

How can I use provider package inplace of setState to change button color?

flutter

flutter-provider