我在Flutter中有一个带有按钮的StatefulWidget,它使用Navigator.push()将我导航到另一个StatefulWidget。在第二个小部件上,我正在更改全局状态(一些用户首选项)。当我从第二个小部件回到第一个时,使用Navigator.pop(),第一个小部件处于旧状态,但我想强制它重新加载。知道怎么做吗?我有一个想法,但看起来很难看:
弹出以删除第二个小部件(当前小部件) 再次弹出以删除第一个小部件(前一个) 推送第一个小部件(它应该强制重绘)
我在Flutter中有一个带有按钮的StatefulWidget,它使用Navigator.push()将我导航到另一个StatefulWidget。在第二个小部件上,我正在更改全局状态(一些用户首选项)。当我从第二个小部件回到第一个时,使用Navigator.pop(),第一个小部件处于旧状态,但我想强制它重新加载。知道怎么做吗?我有一个想法,但看起来很难看:
弹出以删除第二个小部件(当前小部件) 再次弹出以删除第一个小部件(前一个) 推送第一个小部件(它应该强制重绘)
当前回答
简而言之,您应该让小部件监视状态。为此,您需要进行状态管理。
我的方法是基于Flutter架构示例和Flutter文档中解释的提供者。请参考他们更简洁的解释,但或多或少的步骤是:
用小部件需要观察的状态定义状态模型。
你可以有多个状态,比如data和isLoading,来等待一些API进程。模型本身扩展了ChangeNotifier。
用监控器类包装依赖于这些状态的小部件。
这可以是消费者或选择器。
当你需要“重新加载”时,你基本上需要更新这些状态并传播这些变化。
对于状态模型,类大致如下所示。注意notifyListeners,它广播更改。
class DataState extends ChangeNotifier{
bool isLoading;
Data data;
Future loadData(){
isLoading = true;
notifyListeners();
service.get().then((newData){
isLoading = false;
data = newData;
notifyListeners();
});
}
}
现在来看小部件。这将是一个非常基本的代码。
return ChangeNotifierProvider(
create: (_) => DataState()..loadData(),
child: ...{
Selector<DataState, bool>(
selector: (context, model) => model.isLoading,
builder: (context, isLoading, _) {
if (isLoading) {
return ProgressBar;
}
return Container(
child: Consumer<DataState>(builder: (context, dataState, child) {
return WidgetData(...);
}
));
},
),
}
);
状态模型的实例由ChangeNotifierProvider提供。选择器和消费者分别监视isLoading和data的状态。它们之间没有太大的区别,但就个人而言,如何使用它们取决于它们的构建者提供的内容。Consumer提供了对状态模型的访问,因此对于它下面的任何小部件来说,调用loadData更简单。
如果不是,那么可以使用Provider.of。如果我们想在从第二个屏幕返回时刷新页面,那么我们可以这样做:
await Navigator.push(context,
MaterialPageRoute(
builder: (_) {
return Screen2();
));
Provider.of<DataState>(context, listen: false).loadData();
其他回答
非常简单地使用"then"在你推送后,当导航器弹出时,它将触发setState,视图将刷新。
领航员...废话的push()。然后(价值)= > setState署(){})
对我来说奏效了:
...
onPressed: (){pushUpdate('/somePageName');}
...
pushUpdate (string pageName) async { //in the same class
await pushPage(context, pageName);
setState(() {});
}
//---------------------------------------------
//general sub
pushPage (context, namePage) async {
await Navigator.pushNamed(context, namePage);
}
在这种情况下,不管你如何弹出(与按钮在UI或“返回”在android)更新将完成。
只需添加.then((value) {setState(() {});在导航器。按page1(),如下所示:
Navigator.push(context,MaterialPageRoute(builder: (context) => Page2())).then((value) { setState(() {});
现在当你使用Navigator.pop(context)从page2你的page1重建自己
我的解决方案是在SecondPage上添加一个函数参数,然后接收从FirstPage执行的重新加载函数,然后在Navigator.pop(context)行之前执行该函数。
珍宝
refresh() {
setState(() {
//all the reload processes
});
}
然后翻到下一页……
Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage(refresh)),);
SecondPage
final Function refresh;
SecondPage(this.refresh); //constructor
然后在导航器弹出行之前,
widget.refresh(); // just refresh() if its statelesswidget
Navigator.pop(context);
所有需要从前一页重新加载的内容都应该在弹出窗口后更新。
// Push to second screen
await Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => SecondScreen(),
),
);
// Call build method to update any changes
setState(() {});