每次视图进入屏幕时如何在 flutter 中重建整个视图

Question

我希望我的页面在进入页面时始终能够访问 API。例如，我有 2 个屏幕，即 FirstScreen 和 SecondScreen。在 FirstScreen 中，我调用 API 来获取一些数据。因此，如果用户从 FirstScreen 导航到 SecondScreen，然后通过按后退按钮返回到 FirstScreen，则应该再次点击 FirstScreen 中的 API。

我想知道 flutter 中是否有任何内置函数，我应该在其中调用我的方法，以便它每次进入屏幕时都可以工作。我尝试过使用 didUpdateWidget()但它没有按我想要的方式工作。

initState() 也仅在小部件加载后才被调用..请解释一下

Answer 1

你可以用async await它。假设您有一个可以更改路线的按钮。

onPressed: () async {
  await Navigator.of(context).push(
    MaterialPageRoute(
        builder: (context) => SecondScreen(),
      ),
  );
  ApiCall();
},

ApiCall仅当用户在第二个屏幕上按后退时才会调用该函数。

Answer 2

我有一个可能有帮助的例子。但是，它可能无法涵盖所有​​场景，在这些场景中，FirstScreen每当来自不同页面/屏幕后显示页面时，或者专门恢复应用程序（来自后台 - 来自另一个屏幕时不要混淆），您总是会调用特定函数或弹出）。

然而，我的示例在您从特定屏幕返回时始终会调用一个函数，并且您可以将其重新实现到其他导航功能，以确保从其他屏幕返回时始终调用特定函数FirstScreen。

主程序.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

主页.dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: RaisedButton(
              onPressed: () => Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => SecondPage()))
                  .then((value) => _reload(value)),
              child: Text('Navigate to Next Page'),
            ),
          )
        ],
      ),
    );
  }

  Future<void> _reload(var value) async {
    print(
        'Home Page resumed after popping/closing SecondPage with value {$value}. Do something.');
  }
}

第二页.dart

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.pop(context, 'Passed Value');

        /// It's important that returned value (boolean) is false,
        /// otherwise, it will pop the navigator stack twice;
        /// since Navigator.pop is already called above ^
        return false;
      },
      child: Scaffold(
        appBar: AppBar(),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(child: Text('Second Page')),
          ],
        ),
      ),
    );
  }
}