📜  Flutter – 命名路由

📅  最后修改于: 2021-09-23 06:22:01             🧑  作者: Mango

应用程序必须根据用户的需要显示多个屏幕。用户需要在多个屏幕之间来回切换到主屏幕。在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!'),
        ),
      ),
    );
  }
}


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


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!'),
        ),
      ),
    );
  }
}


使用 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!