Question

如何检测页面过渡是否已完成？

背景：弹出页面时，我想在页面转换完成后启动一个功能。

Answer 1

在push新路由中也可以注册一个回调，该新路由也可以包含来自弹出路由的数据，例如，如果您需要从中传递数据。

Navigator.of(context).push(/*Some route*/).then((data) {
 // You can call your function here. data will be null if nothing is passed from the popped route
});

如果您想从弹出的路线中通过data，只需这样做

Navigator.of(context).pop(someData);

已编辑

如果您想知道过渡实际何时结束，您也可以为其注册一个回调监听器

  Navigator.of(context).push(MaterialPageRoute(
          builder: (BuildContext context) => RouteWidget())
                   ..completed.then((_) {print('transition completed');},
          ),
  );

Answer 2

另一种解决方案

是在第二页等待动画完成（如果你想在动画过渡后更新页面，这很有用）

第一页：

...
Navigator.push(
        context,
        PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 3000), //optional but useful for testing
            pageBuilder: (_, animation, ___) => SecondPage(
                  pageBuilderAnimation: animation,
                )));
...

第二页：

class SecondPage extends StatefulWidget {
  const SecondPage ({Key? key, this.pageBuilderAnimation});

  final Animation<double>? pageBuilderAnimation;

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {

  bool isTransitioning = true;


  @override
  void initState() {
    super.initState();

    if (widget.pageBuilderAnimation != null)
      widget.pageBuilderAnimation!.addListener(() {
        if (widget.pageBuilderAnimation!.isCompleted)
          setState(() => isTransitioning = false);
      });
    else
      isTransitioning = false;
  }
  ...
}

Answer 3

如果您保留对路由的引用并使用didPush（）TickerFuture，也可以等待推送转换

MaterialPageRoute route = MaterialPageRoute(builder: (context) => MyPage());
Navigator.of(context).push(route);
await route.didPush(); // you could also use then instead of await


// ROUTE FINISHED TRANSITION HERE

如果您有多个堆叠的导航器，并且想要在它们之间进行更平滑的过渡，则可以使用此方法。就像等待导航器1完成推送，然后弹出当前活动的导航器2以显示导航器1的页面一样。

等待页面转换完成

3 个答案:

已编辑

另一种解决方案