provider的使用

1.provider

官方链接见https://pub-web.flutter-io.cn/packages/provider

支持Android/iOS/linux/MacOS/Web/Windows

2.pubspec.yaml添加依赖

1
  provider: ^6.1.2

3.示例

  • provider_widget.dart
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import 'package:base_demo/widgets/getx_widget.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }

  void decrement() {
    _counter++;
    notifyListeners();
  }
}

class ProviderWidget extends StatefulWidget {
  const ProviderWidget({super.key});

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

class ProviderWidgetState extends State<ProviderWidget> {


  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('counter value:${counter.counter}'),
        ElevatedButton(onPressed: () => counter.increment(), child: const Text('+')),
        ElevatedButton(onPressed: () => counter.decrement(), child: const Text('-')),
      ],
    );
  }
}
  • main.dart
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import 'package:provider/provider.dart';

void main() async {
  XLogger.getLogger().d("main init");
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  FlutterNativeSplash.remove();

  await HiveManage.init();

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel()),
      ],
      child: const MyApp(),
    ),
  );
}

4.小结

1.创建数据模型类

数据模型类,通常会扩展ChangeNotifier类,并使用notifyListeners方法通知观察者进行更新。

2.应用的顶层创建Provider

通过MultiProvider创建Provider,它创建的数据模型类给整个应用使用。

3.使用Provider访问数据模型

在Widget中使用Provider.of来访问和使用您创建的数据模型。