如何使用提供程序包代替 setState 来更改按钮颜色?
How can I use provider package inplace of setState to change button color?
我有一个小部件树,它有一个按钮,按下时会改变颜色并执行某些功能,但每次我按下它时,整个小部件都会重建(即重新加载地图),这对我来说很难,因为它与地图,我想使用提供程序包,希望它只会导致按钮改变颜色,而不是重新加载整个地图。我该如何使用它?我想试试看。
@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();
}
},
]}
我相信有很多方法可以使用 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
,它通知提供者,通知消费者,消费者重建。
我有一个小部件树,它有一个按钮,按下时会改变颜色并执行某些功能,但每次我按下它时,整个小部件都会重建(即重新加载地图),这对我来说很难,因为它与地图,我想使用提供程序包,希望它只会导致按钮改变颜色,而不是重新加载整个地图。我该如何使用它?我想试试看。
@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();
}
},
]}
我相信有很多方法可以使用 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
,它通知提供者,通知消费者,消费者重建。