Provider状态管理练习

一、添加依赖

provider: 6.0.5

二、创建CountModel.dart

注意：要继承ChangeNotifier

import 'package:flutter/cupertino.dart';
class CountModel with ChangeNotifier{
    
    
  int _count;
  CountModel(this._count);

  void add(){
    
    //数值增加方法
    _count++;
    notifyListeners();//notifyListeners()用于通知全部订阅内容提供的组件
  }
  get count=>_count;//get方法用于获得_count的值，订阅者通过${Provider.of<CountModel>(context).count}获得_count的值，就必须定义get方法
}

三、创建两个页面并订阅CountModel状态管理类

页面一：

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

import 'TestView.dart';
import 'model/CountModel.dart';

void main() {
    
    
  // runApp(const MyApp());//初次创建项目的内容
  runApp(
    ChangeNotifierProvider(//应用CountModel状态管理类
      create: (context)=> CountModel(0),
      child: MyApp(),
    )
  );
  /*
  runApp(
    MultiProvider(//想要应用多个状态管理类，就要使用MultiProvider
      providers : [// 状态管理类的集合，集合元素ChangeNotifierProvider(里面是巴拉巴拉小魔仙)
        ChangeNotifierProvider(
          create: (context)=> CountProvider(),
        ),
        ChangeNotifierProvider(
          create: (context)=> MvvmDemoViewmodel(),
        ),
      ],
      child: MyApp(),
    )
  */
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  int _counter = 0;


  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.accessibility_rounded),
            onPressed: () {
    
    //创建一个跳转界面，跳转到新的路由，本跳转不传任何值
              Navigator.push(context, MaterialPageRoute(builder: (context) {
    
    
                return TestView();
              }));
            },
          ),
        ],
      ),

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
                  Text(
                          //以下代码Provider.of<model类名>(context).属性值
                          //请注意，属性值在model类中必须有get方法
                          "${
      
      Provider.of<CountModel>(context).count}",
                          style: Theme.of(context).textTheme.headline4,//字体样式
                        ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(//悬浮按钮
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

  }
  void _incrementCounter() {
    
    //悬浮按钮点击事件
    //context.read<model类名>().model中的方法;
    context.read<CountModel>().add();
  }
}

页面二：

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

import 'model/CountModel.dart';

class TestView extends StatefulWidget {
    
    
  const TestView({
    
    Key? key}) : super(key: key);

  @override
  State<TestView> createState() => _TestViewState();
}

class _TestViewState extends State<TestView> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('TestViewTite'),
      ),
      body: Column(
        children: [
          TextButton(
            child: Text('按钮',style: TextStyle(fontSize: 35),),
            onPressed: () {
    
    
              context.read<CountModel>().add();//调用CountModel中的add()方法，增加全局变量_count的值
            }
          )
          ,
          Text("${
      
      Provider.of<CountModel>(context).count}",
                style: TextStyle(fontSize: 30),
              )
        ],
      ),
    );
  }
}

四、效果