Flutter 导航和路由

路由简介

在现代移动应用开发中，路由是实现页面间导航的关键。在 Flutter 中，路由是一个封装了页面导航逻辑的对象，负责管理页面的堆栈以及页面之间的跳转。通过路由，可以方便地在不同的页面之间进行切换，同时还能处理返回按钮的行为。

创建简单的路由

定义路由

在 Flutter 中，路由通常由 MaterialPageRoute 或其子类来表示。我们可以使用 MaterialPageRoute 来定义一个简单的路由，然后将其添加到 Navigator 中。

// www.javascriptcn.com code example
// 在 main.dart 中
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      routes: <String, WidgetBuilder>{
        '/second': (BuildContext context) => SecondScreen(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('跳转到第二页'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('返回'),
        ),
      ),
    );
  }
}

使用命名路由

在上面的例子中，我们使用了命名路由的方式。MaterialPageRoute 可以接收一个字符串参数作为路由名称，这样在需要跳转时，可以通过名称来指定目标页面。

模态对话框

除了基本的页面跳转外，Flutter 还支持模态对话框的显示。模态对话框会覆盖当前页面，使得用户必须先关闭对话框才能继续操作。

显示模态对话框

使用 showDialog 函数可以显示一个模态对话框。

// www.javascriptcn.com code example
ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("提示"),
          content: Text("这是模态对话框的内容"),
          actions: [
            TextButton(
              child: Text("确定"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  },
  child: Text('显示对话框'),
)

页面堆栈

Flutter 的 Navigator 类管理着一个页面堆栈。当我们通过 Navigator.push() 方法进入一个新的页面时，这个页面会被压入堆栈顶部；当用户点击返回按钮时，当前页面会被弹出堆栈，回到前一个页面。

管理页面堆栈

我们可以通过 Navigator.of(context) 获取当前的 Navigator 对象，然后调用其方法来控制堆栈的操作。

Navigator.of(context).push(MaterialPageRoute(builder: (context) => NextPage()));
Navigator.of(context).pop(); // 返回上一页
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => NextPage())); // 替换当前页

自定义路由动画

默认情况下，Flutter 提供了几种内置的路由动画效果。如果我们想自定义这些动画，可以通过继承 PageRoute 类来实现。

创建自定义动画

下面是一个简单的例子，展示了如何创建一个自定义的淡入淡出动画。

// www.javascriptcn.com code example
class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
        );

  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);
}

// 在需要的地方使用
Navigator.push(
  context,
  FadeRoute(page: SecondScreen()),
);

路由传值

在导航过程中，我们有时需要向目标页面传递数据。这可以通过构造函数或使用 ModalRoute 来实现。

通过构造函数传递

// www.javascriptcn.com code example
class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二页'),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

// 调用时
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen('来自首页的消息'),
  ),
);

使用 ModalRoute 获取

另一种方式是通过 ModalRoute.of(context)?.settings.arguments 获取参数。

// www.javascriptcn.com code example
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments as Map<String, String>;
    return Scaffold(
      appBar: AppBar(
        title: Text('第二页'),
      ),
      body: Center(
        child: Text(args['message'] ?? ''),
      ),
    );
  }
}

// 调用时
Navigator.pushNamed(
  context,
  '/second',
  arguments: {'message': '来自首页的消息'},
);

以上便是 Flutter 中关于导航和路由的基本概念及其实现方法。通过合理运用这些技术，我们可以构建出更加灵活、易用的应用界面。