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

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


当前回答

需要强制重建我的一个无状态小部件。不想使用有状态的。我想出了这个解决方案:

await Navigator.of(context).pushNamed(...);
ModalRoute.of(enclosingWidgetContext);

注意,context和enclosingWidgetContext可以是相同的上下文,也可以是不同的上下文。例如,如果你从StreamBuilder内部推送,它们将是不同的。

我们在这里没有用ModalRoute做任何事情。仅订阅行为就足以强制重新构建。

其他回答

这工作真的很好,我从一个医生那里得到的在颤振页面,颤振医生

我定义了从第一个页面控制导航的方法。

_navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AddDirectionPage()),
    );

    //below you can get your result and update the view with setState
    //changing the value if you want, i just wanted know if i have to  
    //update, and if is true, reload state

    if (result) {
      setState(() {});
    }
  }

所以,我调用它在一个动作方法从一个墨水瓶,但也可以调用从一个按钮:

onTap: () {
   _navigateAndDisplaySelection(context);
},

最后在第二页,返回一些东西(我返回了一个bool,你可以返回任何你想要的):

onTap: () {
  Navigator.pop(context, true);
}

简单的技巧就是使用导航器。pushReplacement方法

第1页

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page2(),
  ),
);

第二页

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page1(),
  ),
);

对我来说,这似乎奏效:

Navigator.of(context).pushNamed("/myRoute").then((value) => setState(() {}));

然后在子进程中调用Navigator.pop()。

您可以在弹出上下文时传递回一个动态结果,然后在值为true时调用setState((){}),否则就保持状态不变。

我粘贴了一些代码片段供您参考。

handleClear() async {
    try {
      var delete = await deleteLoanWarning(
        context,
        'Clear Notifications?',
        'Are you sure you want to clear notifications. This action cannot be undone',
      );
      if (delete.toString() == 'true') {
        //call setState here to rebuild your state.

      }
    } catch (error) {
      print('error clearing notifications' + error.toString());
             }
  }



Future<bool> deleteLoanWarning(BuildContext context, String title, String msg) async {

  return await showDialog<bool>(
        context: context,
        child: new AlertDialog(
          title: new Text(
            title,
            style: new TextStyle(fontWeight: fontWeight, color: CustomColors.continueButton),
            textAlign: TextAlign.center,
          ),
          content: new Text(
            msg,
            textAlign: TextAlign.justify,
          ),
          actions: <Widget>[
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('NO',),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
            ),
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('YES', ),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ),
          ],
        ),
      ) ??
      false;
}

问候, Mahi

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

我的方法是基于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();