Flutter 中如何使用 CupertinoPageRoute？

推荐答案

在 Flutter 中，CupertinoPageRoute 是用于实现 iOS 风格页面导航的路由类。以下是一个简单的示例，展示如何使用 CupertinoPageRoute 进行页面导航：

// www.javascriptcn.com code example
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('First Page'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.push(
              context,
              CupertinoPageRoute(
                builder: (context) => SecondPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Second Page'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(CupertinoApp(
    home: FirstPage(),
  ));
}

本题详细解读

1. CupertinoPageRoute 的作用

CupertinoPageRoute 是 Flutter 中用于实现 iOS 风格页面导航的路由类。它提供了类似于 iOS 的页面切换动画和导航栏样式。

2. 使用 CupertinoPageRoute 进行导航

在示例中，FirstPage 是一个包含按钮的页面，点击按钮后会使用 Navigator.push 方法导航到 SecondPage。CupertinoPageRoute 的 builder 方法用于构建目标页面（即 SecondPage）。

3. 页面返回

在 SecondPage 中，点击按钮后会使用 Navigator.pop 方法返回到上一个页面（即 FirstPage）。

4. CupertinoApp 的使用

为了确保整个应用具有 iOS 风格的外观和行为，示例中使用 CupertinoApp 作为应用的根组件。CupertinoApp 会自动应用 iOS 风格的导航栏、按钮等 UI 元素。

5. 总结

通过 CupertinoPageRoute，开发者可以轻松实现 iOS 风格的页面导航，并且可以自定义页面的内容和导航栏。