我在Flutter中有一个带有按钮的StatefulWidget,它使用Navigator.push()将我导航到另一个StatefulWidget。在第二个小部件上,我正在更改全局状态(一些用户首选项)。当我从第二个小部件回到第一个时,使用Navigator.pop(),第一个小部件处于旧状态,但我想强制它重新加载。知道怎么做吗?我有一个想法,但看起来很难看:

弹出以删除第二个小部件(当前小部件) 再次弹出以删除第一个小部件(前一个) 推送第一个小部件(它应该强制重绘)


当前回答

简短的回答:

在第一页使用这个:

Navigator.pushNamed(context, '/page2').then((_) => setState(() {}));

在第二页

Navigator.pop(context);

有两个东西,传递数据

第一页至第二页 在第一页使用这个 //从第一个发送“Foo 导航器。push(context, MaterialPageRoute(builder: (_) => Page2("Foo"))); 在第二页使用这个。 类Page2扩展StatelessWidget 字符串; 所以Page2 (this.string);//在第二帧接收“Foo” ... }


第二页至第一页 在第二页使用这个 //从第二发送“Bar” 导航器。流行(上下文,“酒吧”); 在第一页使用这个,它是相同的,但有一点修改。 //第1位接收“Bar” 字符串received = await Navigator。push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));

其他回答

简而言之,您应该让小部件监视状态。为此,您需要进行状态管理。

我的方法是基于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((value) {setState(() {});在导航器。按page1(),如下所示:

Navigator.push(context,MaterialPageRoute(builder: (context) => Page2())).then((value) { setState(() {});

现在当你使用Navigator.pop(context)从page2你的page1重建自己

我也遇到过类似的问题。

请试试这个:

第一页:

导航器。push(context, MaterialPageRoute(builder: (context) => SecondPage()),).then((value) => setState(() {}));

当你从SecondPage()弹出回FirstPage()后,“then”语句将运行并刷新页面。

// Push to second screen
 await Navigator.push(
   context,
   CupertinoPageRoute(
    builder: (context) => SecondScreen(),
   ),
 );

// Call build method to update any changes
setState(() {});

您可以使用pushReplacement并指定新的Route