前面有介绍过，数据的传递可以通过共享，但是只能单向传递，这里介绍一个可以双项传递数据的第三方工具Provide链接

使用前的准备

首先在pubspec.yaml中配置，然后pub get,等待安装完成
image.png
我们首先创建两个比较简单的控制器，测试页面跳转之间的数据传递。

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(const MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   const MyApp({Key? key}) : super(key: key);
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return MaterialApp(
  13.       title: 'Flutter Demo',
  14.       theme: ThemeData(
  15.         primarySwatch: Colors.blue,
  16.       ),
  17.       home: const FirstPage(),
  18.     );
  19.   }
  20. }
  22. class FirstPage extends StatelessWidget {
  23.   const FirstPage({Key? key}) : super(key: key);
  25.   @override
  26.   Widget build(BuildContext context) {
  27.     return Scaffold(
  28.       appBar: AppBar(title: Text('first page')),
  29.       body: Center(
  30.         child: Text('first page count='),
  31.       ),
  32.       floatingActionButton: FloatingActionButton(
  33.         child: const Icon(Icons.polymer),
  34.         onPressed: () => Navigator.of(context)
  35.             .push(MaterialPageRoute(builder: (context) => SecondPage())),
  36.       ),
  37.     );
  38.   }
  39. }
  41. class SecondPage extends StatelessWidget {
  42.   const SecondPage({Key? key}) : super(key: key);
  44.   @override
  45.   Widget build(BuildContext context) {
  46.     return Scaffold(
  47.       appBar: AppBar(title: Text('second page')),
  48.       body: Center(
  49.         child: Text('Second page count='),
  50.       ),
  51.       floatingActionButton: FloatingActionButton(
  52.         child: const Icon(Icons.add),
  53.         onPressed: () => print('+++'),
  54.       ),
  55.     );
  56.   }
  57. }

实现要求：点击FirstPage按钮跳转到SecondPage在第二个页面修改值，然后的第一个页面的值也能相应的改变

使用

数据关联模型创建

定义数据模型，通过混入 ChangeNotifier 管理监听者（通知模式），暴露读写方法，数据改变的时候通知监听者刷新

  1. // 定义数据模型，通过混入 ChangeNotifier 管理监听者（通知模式）
  2. class CountModel with ChangeNotifier {
  3.   int _count = 0;
  4.   // 读方法
  5.   int get counter => _count;
  6.   // 写方法
  7.   void increment() {
  8.     _count++;
  9.     notifyListeners(); // 通知监听者刷新
  10.   }
  11. }

数据包装

这里我们在根视图这里包装数据，这样子层级都可以使用。这里使用的是ChangeNotifierProvider.value指定Value

  1. class MyApp extends StatelessWidget {
  2.   const MyApp({Key? key}) : super(key: key);
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return ChangeNotifierProvider.value(
  7.         value: CountModel(),
  8.         child: MaterialApp(
  9.           title: 'Flutter Demo',
  10.           theme: ThemeData(
  11.             primarySwatch: Colors.blue,
  12.           ),
  13.           home: const FirstPage(),
  14.         ));
  15.   }
  16. }

数据使用

首先取出模型数据Provider.of<CountModel>(context)，然后就可以通过读方法和写方法来操作，还是比较简便的。

  1.   @override
  2.   Widget build(BuildContext context) {
  3.     final _counter = Provider.of<CountModel>(context);
  4.     return Scaffold(
  5.       appBar: AppBar(title: Text('first page')),
  6.       body: Center(
  7.         child: Text('first page count=${_counter.counter}'),
  8.       ),
  9.       floatingActionButton: FloatingActionButton(
  10.         child: const Icon(Icons.polymer),
  11.         onPressed: () => Navigator.of(context)
  12.             .push(MaterialPageRoute(builder: (context) => SecondPage())),
  13.       ),
  14.     );
  15.   }

这里有一个优化的地方，在我们修改数据的时候会重新走Build方法来渲染当前的页面，这里会涉及到多次渲染的问题，所以我们需要控制Widget的刷新粒度来达到优化性能的目的。

优化

不再统一取数据，而是哪里使用的话哪里取数据，这里使用了一个Consumer<CountModel>,看一下consumer.dart中的注释
1.在下面的示例中，当Bar数据改变的时候FooWidget和BarWidget都会重新rebuild,事实上，只有BarWidgetr需要刷新。解决这种办法就是需要在BarWidget外面包装一层Consumer,这样被包装的Widget才会被刷新。

  1. /// Here's an example:
  2. ///
  3. /// ```dart
  4. ///  @override
  5. ///  Widget build(BuildContext context) {
  6. ///    return FooWidget(
  7. ///      child: BarWidget(
  8. ///        bar: Provider.of<Bar>(context),
  9. ///      ),
  10. ///    );
  11. ///  }
  12. ///

/// /// In the above code, only BarWidget depends on the value returned by /// [Provider.of]. But when Bar changes, then both BarWidget and /// FooWidget will rebuild. /// /// Ideally, only BarWidget should be rebuilt. One /// solution to achieve that is to use [Consumer]. /// /// To do so, we will wrap only the widgets that depends on a provider into /// a [Consumer]: /// /// dart /// @override /// Widget build(BuildContext context) { /// return FooWidget( /// child: Consumer<Bar>( /// builder: (_, bar, __) => BarWidget(bar: bar), /// ), /// ); /// } ///