Flutter路由导航实用教程

Flutter路由导航实用教程

3 回复

推荐官方文档和《Flutter极简教程：从入门到实战》，图文并茂，通俗易懂。

更多关于Flutter路由导航实用教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


推荐看 Flutter 官方文档的路由与导航部分，简单易懂。

在Flutter中，路由导航是管理页面跳转的核心机制。Flutter提供了多种方式来实现路由导航，包括基本的路由导航、命名路由导航以及更高级的路由管理。以下是一个实用的Flutter路由导航教程：

1. 基本路由导航

基本路由导航使用Navigator.push和Navigator.pop来实现页面的跳转和返回。

// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

// 返回上一页
Navigator.pop(context);

2. 命名路由导航

命名路由导航通过定义路由表来管理页面跳转，适合在大型应用中使用。

// 在MaterialApp中定义路由表
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/newPage': (context) => NewPage(),
  },
);

// 使用命名路由跳转
Navigator.pushNamed(context, '/newPage');

3. 传递参数

在路由导航时，可以通过构造函数或ModalRoute.of(context)来传递参数。

// 通过构造函数传递参数
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage(param: 'value')),
);

// 在目标页面接收参数
class NewPage extends StatelessWidget {
  final String param;
  NewPage({required this.param});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Page')),
      body: Center(child: Text(param)),
    );
  }
}

// 通过ModalRoute传递参数
Navigator.pushNamed(context, '/newPage', arguments: 'value');

// 在目标页面接收参数
class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String param = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: Text('New Page')),
      body: Center(child: Text(param)),
    );
  }
}

4. 返回数据

在页面跳转后，可以通过Navigator.pop返回数据。

// 跳转页面并等待返回数据
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

// 在目标页面返回数据
Navigator.pop(context, '返回的数据');

5. 路由拦截

可以通过onGenerateRoute实现路由拦截，用于权限控制或动态路由生成。

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/restricted') {
      return MaterialPageRoute(builder: (context) => RestrictedPage());
    }
    return null; // 默认路由
  },
);

6. 路由动画

可以通过PageRouteBuilder自定义路由动画。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

通过以上方法，你可以在Flutter中灵活地实现路由导航，满足不同场景的需求。

回到顶部