Flutter中Cupertino“堆叠式”全对话转场效果怎么做？

Question

我想在导航到某些页面时复制与本机 iOS 相同的行为，例如时钟应用程序中的this example。

我找到的最接近的东西是 CupertinoFullscreenDialogTransition 类，但没有复制 iOS 所做的堆叠效果。

是否有任何小部件已经这样做了？如果没有，我如何在 Flutter 中复制相同的效果？

Answer 1

在Flutter中实现Cupertino“堆叠式”全对话框过渡效果，可以使用CupertinoPageRoute类定义一个路由，使用Navigator.push方法将路由推送到导航栈中。

下面是如何使用CupertinoPageRoute创建堆叠式全对话过渡效果的示例：

import 'package:flutter/cupertino.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoButton(
      child: Text('Open dialog'),
      onPressed: () {
        Navigator.push(
          context,
          CupertinoPageRoute(
            fullscreenDialog: true,
            builder: (context) => MyDialog(),
          ),
        );
      },
    );
  }
}

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('My Dialog'),
      ),
      child: Center(
        child: Text('This is my dialog.'),
      ),
    );
  }
}

在此示例中，MyPage 包含一个 CupertinoButton，当按下该按钮时，使用 CupertinoPageRoute 将 MyDialog 推送到导航堆栈。 fullscreenDialog 设置为 true 以启用堆叠的全对话框过渡效果。

MyDialog 是使用 CupertinoPageScaffold 构建的，它为 iOS 风格的应用程序提供标准的导航栏。