Flutter学习第一课：两个页面的计数同步增加获取

两个页面的计数同步增加获取

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //使用MultiProvider可以创建多个顶层共享数据
    return MultiProvider(
      providers: [ChangeNotifierProvider(create: (_) => Counter())],
      child: MaterialApp(
        title: "Provider示例",
        home: FirstPage(),
      ),
    );
  }
}

//第一个页面
class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  late Counter counter;
  @override
  Widget build(BuildContext context) {
    counter = context.watch<Counter>();
    return Scaffold(
      appBar: AppBar(
        title: Text("第一个页面"),
        actions: <Widget>[
          FlatButton(
            child: Text("下一页"),
            //路由跳转至第二页
            onPressed: () =>
                Navigator.push(context, MaterialPageRoute(builder: (context) {
              return SecondPage();
            })),
          ),
        ],
      ),
      body: Center(
        //获取计数器中的count的值
        child: Text("${Provider.of<Counter>(context).count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //调用数据模型中的increment方法更改数据
           counter.increment();
          // context.read<Counter>().increment();
          //Provider.of<Counter>(context,listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

//第二页
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Provider.of<Counter>(context,listen: true);等价于context.watch<Counter>().increment();
    //Provider.of<Counter>(context,listen: false);等价于context.read<Counter>().increment();
    Counter counter =Provider.of<Counter>(context,listen: true);
    print("我是用来打印的哦");
    return Scaffold(
      appBar: AppBar(
        title: Text("第二个页面"),
      ),
      body: Center(
        //获取计数器中的count值
        child: Text("${counter.count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //调用数据模型中的increment方法更改数据
          context.read<Counter>().increment();//第一种方式
          // Provider.of<Counter>(context,listen: false).increment();//第二种方式
          // counter.increment();//第三种方式
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

//计数器类Counter 即为数据Model 实际上就是状态
//Counter不仅存储了数据，还包含了更改数据的方法，并暴露相关的数据
//当调用notifyListeners 时它会通知所有的听众进行刷新
class Counter with ChangeNotifier {
  //存储数据
  int _count = 0;

  //提供外部能够访问的数据
  int get count => _count;

//提供更改数据的方法
  void increment() {
    _count++;
    //通知所有的听众进行刷新
    notifyListeners();
  }
}