Flutter—路由

2024-02-15 本文已影响0人 BlueSocks

路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android中通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

Flutter 中的路由用于管理页面之间的导航和跳转。在 Flutter 中，有两种类型的路由：命名路由和普通路由。

普通路由（Normal Routes）：

特性：

普通路由是一种直接指定要跳转的页面组件的方式，而不使用路由名称。
使用普通路由时，需要直接指定要跳转的页面组件，并使用 Navigator.push() 方法进行导航。

基本使用

//创建一个路由界面
class NewRoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("This is new route"),
      ),
    );
  }
}

//添加了一个打开新路由的按钮，点击该按钮后就会打开新的路由页面
 TextButton(
      child: Text("open new route"),
      onPressed: () {
        //导航到新路由   
        Navigator.push( 
          context,
          MaterialPageRoute(builder: (context) {
            return NewRoutePage();
          }),
        );
      },
   ）

MaterialPageRoute

MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是 Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

对于 Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于 iOS，当打开页面时，新的页面会从屏幕右侧边缘一直滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

构造方法

 MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })

参数说明：

builder 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为 false。
fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在 iOS 中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）

Navigator

Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈，在此我们只介绍其最常用的两个方法：

Future push(BuildContext context, Route route)

将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈，result 为页面关闭时返回给上一个页面的数据。

Navigator 还有很多其他方法，如Navigator.replace、Navigator.popUntil等，详情请参考API文档或SDK 源码注释，在此不再赘述。

命名路由（Named Routes）：

所谓“命名路由”（Named Route）即有名字的路由，我们可以先给路由起一个名字，然后就可以通过路由名字直接打开新的路由了，这为路由管理带来了一种直观、简单的方式。

特性：

命名路由是一种将路由和特定字符串名称关联起来的方式，可以通过这个名称来导航到相应的页面。
使用命名路由时，需要在应用程序的路由表中注册路由名称和对应的页面组件。
导航到命名路由时，可以使用 Navigator.pushNamed() 方法，并指定路由名称来进行导航。

路由表

要想使用命名路由，我们必须先提供并注册一个路由表（routing table），这样应用程序才知道哪个名字与哪个路由组件相对应。其实注册路由表就是给路由起名字，路由表的定义如下：

Map<String, WidgetBuilder> routes;

它是一个Map，key为路由的名字，是个字符串；value是个builder回调函数，用于生成相应的路由widget。我们在通过路由名字打开新路由时，应用会根据路由名字在路由表中查找到对应的WidgetBuilder回调函数，然后调用该回调函数生成路由widget并返回。

注册路由表

路由表的注册方式很简单，我们回到之前“计数器”的示例，然后在MyApp类的build方法中找到MaterialApp，添加routes属性，代码如下：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoutePage(),
    ... // 省略其他路由注册信息
  } ,
  home: MyHomePage(title: 'Flutter Demo Home Page'),
);

现在我们就完成了路由表的注册。上面的代码中home路由并没有使用命名路由，如果我们也想将home注册为命名路由应该怎么做呢？其实很简单，直接看代码：

MaterialApp(
  title: 'Flutter Demo',
  initialRoute:"/", //名为"/"的路由作为应用的home(首页)
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes:{
   "new_page":(context) => NewRoutePage(),
   "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
  } 
);

可以看到，我们只需在路由表中注册一下MyHomePage路由，然后将其名字作为MaterialApp的initialRoute属性值即可，该属性决定应用的初始路由页是哪一个命名路由。

通过路由名打开新路由页

要通过路由名称来打开新路由，可以使用Navigator 的pushNamed方法：

Future pushNamed(BuildContext context, String routeName,{Object arguments})
Navigator 除了pushNamed方法，还有pushReplacementNamed等其他管理命名路由的方法，读者可以自行查看API文档。接下来我们通过路由名来打开新的路由页，修改TextButton的onPressed回调代码，改为：

onPressed: () {
  Navigator.pushNamed(context, "new_page");
  //Navigator.push(context,
  //  MaterialPageRoute(builder: (context) {
  //  return NewRoutePage();
  //}));  
},

路由传值

普通路由传值

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用普通路由跳转到页面1，并传递数据
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Page1(data: 'Hello from Home'),
                  ),
                );
              },
              child: Text('Go to Page 1 (Pass Data)'),
            ),
          ],
        ),
      ),
    );
  }
}
class Page1 extends StatelessWidget {
  // 声明接收数据的变量
  final String data;

  // 构造函数，用于接收从上一个页面传递过来的数据
  Page1({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        // 使用传递过来的数据
        child: Text(data),
      ),
    );
  }
}

在这个示例中，我们在 Page1 页面的构造函数中添加了一个 data 参数，用于接收从上一个页面传递过来的数据。然后在使用普通路由导航时，将要传递的数据作为参数传递给 Page1 的构造函数。这样就实现了在 Flutter 中通过路由传递数据给目标页面的功能。

命名路由传值

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 定义应用程序的路由表
      routes: {
        // 注册命名路由，并指定页面组件
        '/page1': (context) => Page1(),
      },
      home: Home(),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用命名路由跳转到页面1，并传递数据
            Navigator.pushNamed(
              context,
              '/page1',
              arguments: 'Hello from Home',
            );
          },
          child: Text('Go to Page 1 (Named Route with Data)'),
        ),
      ),
    );
  }
}
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取从上一个页面传递过来的数据
    final String data = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        // 使用传递过来的数据
        child: Text(data),
      ),
    );
  }
}

在这个示例中，我们使用命名路由跳转到 Page1 页面，并通过 arguments 参数传递了数据。在 Page1 页面中，我们通过 ModalRoute.of(context)!.settings.arguments 来获取从上一个页面传递过来的数据。这样就实现了在 Flutter 中使用命名路由传递数据给目标页面的功能。

小结

在 Flutter 中，路由用于管理页面之间的导航和跳转。以下是关于 Flutter 路由的一些重要点小结：

普通路由（Normal Routes）：

普通路由是一种直接指定要跳转的页面组件的方式，而不使用路由名称。

命名路由（Named Routes）：

命名路由是一种将路由和特定字符串名称关联起来的方式，可以通过这个名称来导航到相应的页面。
使用命名路由时，需要在应用程序的路由表中注册路由名称和对应的页面组件。

通过构造函数传值：

可以通过路由传递数据给目标页面，其中一种简单的方式是通过构造函数传值。
在目标页面的构造函数中添加参数，用于接收从上一个页面传递过来的数据。

使用命名路由传值：

使用命名路由传递数据时，需要在导航时将数据作为参数传递给目标页面，并在目标页面中获取这些数据。
通过良好的路由管理，可以使应用程序的导航变得更加清晰和灵活，并实现页面之间的数据传递和交互。

Flutter—路由

普通路由（Normal Routes）：

特性：

基本使用

MaterialPageRoute

构造方法

参数说明：

Navigator

命名路由（Named Routes）：

特性：

路由表

注册路由表

通过路由名打开新路由页

路由传值

命名路由传值

小结

普通路由（Normal Routes）：

命名路由（Named Routes）：

通过构造函数传值：

使用命名路由传值：

猜你喜欢

热点阅读