Flutter – 命名路由

应用程序必须根据用户的需要显示多个屏幕。用户需要在多个屏幕之间来回切换到主屏幕。在Flutter，这是在 Navigator 的帮助下完成的。

注意：在Flutter，屏幕和页面被称为路由。

在本文中，我们将探讨在两条命名路线中导航的过程。为此，请执行以下步骤：

1. 创建两条路线。
2. 使用 Navigator.push() 导航到第二条路线。
3. 使用 Navigator.pop() 返回第一条路线

让我们详细探讨它们。

创建两条路线：

在这里，我们将创建两条路线，第一条路线将有一个按钮，点击后可通向第二条路线，类似地，第二条路线将有一个按钮，可将用户带回第一条路线。为此，请遵循以下代码：

Dart

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigation to second route
          },
        ),
      ),
    );
  }
}
 
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigation to first route
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

使用 Navigator.push() 导航。到第二条路线：

要切换到新路线，请使用Navigator.push()方法。 push() 方法将一个 Route 添加到由 Navigator 管理的路由堆栈中。在第一个 Route 小部件的build() 方法中，更新 onPressed() 回调以引导到第二个路由，如下所示：

Dart

// onPressed action
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

使用 Navigator.pop() 返回第一条路线：

要实现返回原始路由，请更新第二个路由中的onPressed()回调，如下所示：

Dart

// onPressed action in second route
onPressed: () {
  Navigator.pop(context);
}

完整的源代码：

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    title: 'Named Routes',
    initialRoute: '/',
    routes: {
      '/': (context) => First_route(),
      '/second': (context) => Second_route(),
    },
  ));
}
 
class First_route extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}
 
class Second_route extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！