Flutter Provide插件

在使用Flutter时，Provider 是一个非常强大的状态管理工具，可以帮助你在多个Widget和页面之间共享和实时修改数据。下面是一个简单的示例，展示如何使用 Provider 实现多Widget、多页面之间的数据实时修改和共享。

1. 添加依赖

首先，确保在 pubspec.yaml 文件中添加 provider 依赖：

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

然后运行 flutter pub get 来安装依赖。

2. 创建数据模型

我们需要创建一个数据模型类，并使用 ChangeNotifier 来通知监听者数据的变化。

scala 复制代码

import 'package:flutter/material.dart';
 //必须继承ChangeNotifier
class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); //写死
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

3. 在顶层提供数据模型

在应用的顶层使用 ChangeNotifierProvider 来提供 CounterModel 实例。

scala 复制代码

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Example',
      home: HomePage(),
    );
  }
}

现在你可以在多个Widget中使用 Provider 来访问和修改数据。

HomePage

less 复制代码

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
  //还有一种获取方式
  final counterModel = Provider.of<CounterModel>(context);
  print(counterModel.count)
  
  
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
              style: Theme.of(context).textTheme.headline4,  //另一种获取
            ),
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              child: Text('Go to Second Page'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<CounterModel>(context, listen: false).increment(); //修改数据
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

SecondPage

less 复制代码

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<CounterModel>(context, listen: false).decrement();
        },
        tooltip: 'Decrement',
        child: Icon(Icons.remove),
      ),
    );
  }
}

5. 运行应用

现在你可以运行应用，并在两个页面之间切换，同时实时查看和修改 count 的值。

总结

通过 Provider，你可以轻松地在多个Widget和页面之间共享和修改数据。ChangeNotifierProvider 和 Consumer 是 Provider 包中常用的工具，它们帮助你管理状态并确保UI在数据变化时自动更新。