乐趣区

关于flutter: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();}
}
退出移动版