Flutter路由监听与数据传输

2023-11-22 15:51:53

Flutter路由监听

在Flutter中，可以使用Navigator类来管理路由。Navigator类提供了许多方法来操作路由，其中之一就是push()方法。当使用push()方法跳转到一个新页面时，可以指定一个RouteSettings对象作为参数。RouteSettings对象包含了目标页面的名称、参数和路由配置。

Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/secondPage',
      arguments: {'data': 'Hello from first page!'},
    ),
    builder: (context) => SecondPage(),
  ),
);

在目标页面中，可以使用ModalRoute.of(context).settings.arguments来获取传递过来的参数。

final data = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
final message = data['data'];

当目标页面完成任务准备返回时，可以使用Navigator.pop()方法返回到上一个页面。同时，可以在Navigator.pop()方法中传递数据回上一个页面。

Navigator.pop(context, 'Hello from second page!');

在上一个页面中，可以使用Navigator.pop()方法的返回值来获取目标页面返回的数据。

final result = await Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/secondPage',
      arguments: {'data': 'Hello from first page!'},
    ),
    builder: (context) => SecondPage(),
  ),
);

常见场景

场景一：点击修改用户信息需要跳转页面，修改完成以后返回之前的页面我们需要重新获取新的数据刷新修改后的数据。

// 跳转到修改用户信息页面
Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/edit_user_page',
      arguments: {'user': user},
    ),
    builder: (context) => EditUserPage(),
  ),
);

// 在修改用户信息页面保存用户信息
Future<void> saveUser(User user) async {
  // 保存用户信息到数据库

  // 返回到上一个页面
  Navigator.pop(context);
}

// 在上一个页面接收修改后的用户信息并刷新数据
@override
void initState() {
  super.initState();

  // 监听路由变化
  Navigator.of(context).didPop(() {
    // 获取修改后的用户信息
    final user = ModalRoute.of(context).settings.arguments as User;

    // 刷新数据
    setState(() {
      this.user = user;
    });
  });
}

场景二：点击商品详情页面的购买按钮需要跳转到结算页面，结算完成以后返回到商品详情页面并刷新数据。

// 跳转到结算页面
Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/checkout_page',
      arguments: {'products': products},
    ),
    builder: (context) => CheckoutPage(),
  ),
);

// 在结算页面结算商品
Future<void> checkout(List<Product> products) async {
  // 结算商品

  // 返回到商品详情页面
  Navigator.pop(context);
}

// 在商品详情页面接收结算后的数据并刷新数据
@override
void initState() {
  super.initState();

  // 监听路由变化
  Navigator.of(context).didPop(() {
    // 获取结算后的数据
    final products = ModalRoute.of(context).settings.arguments as List<Product>;

    // 刷新数据
    setState(() {
      this.products = products;
    });
  });
}

场景三：点击购物车页面的结算按钮需要跳转到结算页面，结算完成以后返回到购物车页面并刷新数据。

// 跳转到结算页面
Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: '/checkout_page',
      arguments: {'products': products},
    ),
    builder: (context) => CheckoutPage(),
  ),
);

// 在结算页面结算商品
Future<void> checkout(List<Product> products) async {
  // 结算商品

  // 返回到购物车页面
  Navigator.pop(context);
}

// 在购物车页面接收结算后的数据并刷新数据
@override
void initState() {
  super.initState();

  // 监听路由变化
  Navigator.of(context).didPop(() {
    // 获取结算后的数据
    final products = ModalRoute.of(context).settings.arguments as List<Product>;

    // 刷新数据
    setState(() {
      this.products = products;
    });
  });
}