Flutter 状态管理Provider

Flutter  状态管理分为两类

1.无状态：StatelessWidget  意味着他们属性不可变

2.有状态:  StatefulWidget     持有的状态可能在Widget生命周期中发生改变

当我们项目简单的时候可能并不需要状态管理，但是随着功能的增加，应用程序将有几十个甚至几百个应用状态，当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），应用状态就会变的很难维护，Flutter 实际一开始就为我们提供了一种状态管理方式，那就是StatefulWidget，但是很快发现他就是造成了上述问题的根源，因此使用Provider 进行管理状态。

作用：

顶层的widget,用来存储数据，并不操作数据，存储的数据对象 必须extends ChangeNotifier；

最终效果：

当在SecondPage中点击增加值后，返回到FirstPage中的值也会跟随变化

Provider是flutter 中的状态管理 开源库，使用方法

1.在pubspec.yaml（配置文件）文件中添加Provider的依赖

2.创建数据模型

import 'package:flutter/cupertino.dart';

class Counter with ChangeNotifier {

///存储数据

  int_count =0;

  ///提供外部能够访问的数据

  intget count =>_count;

  ///提供更改数据的方法

  void increment() {

_count++;

    ///通知所有听众进行刷新

    notifyListeners();

  }

}

3.创建顶层共享数据，这里使用MultiProvider可以创建多个顶层共享数据，应为实际项目中可能有多个数据模型

在main.dart 入口函数中创建

@override

Widget build(BuildContext context) {

///使用MultiProvider可以创建多个顶层共享数据

  return MultiProvider(

   providers: [ChangeNotifierProvider(create: (_) =>Counter())],

    child:MaterialApp(

      title:'Flutter之旅',

      home:isSplash ?LoginPage() :SplashPage(),

    ),

  );

}

四、在子页面中获取状态，我们分别编写了两个类FirstPage 和 SecondPage

获取顶层数据的方法就是：Provider.of(context).count

调用数据模型中的 increment 刷新数据：Provider.of(context,listen:false).increment();

创建第一个页面FirstPage

package:flutter/material.dart';

import 'package:flutter_app1/common/utils/NavigatorUtil.dart';

import 'package:flutter_app1/module/login/myprovider/Counter.dart';

import 'package:flutter_app1/module/login/myprovider/second_page.dart';

import 'package:provider/provider.dart';

class FirstPage extends StatelessWidget {

const FirstPage({Key key}) :super(key: key);

  @override

  Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text("第一个页面"),

      ),

      body:Column(

children: [

///获取计数器中的Count值

          Text("${Provider.of(context).count}"),

          GestureDetector(

onTap: () {

NavigatorUtil.pushRightOrLeft(context, SecondPage());

            },

            child:Container(

width: MediaQuery.of(context).size.width,

              height:40,

              decoration:BoxDecoration(color: Colors.black26),

              child:Center(

child:Text("点击下一页", style:TextStyle(color: Colors.white)),

              ),

            ),

          )

],

      ),

    );

  }

}

创建第二个界面 SecondPage

import 'package:flutter/material.dart';

import 'package:flutter_app1/module/login/myprovider/Counter.dart';

import 'package:provider/provider.dart';

class SecondPage extends StatelessWidget {

const SecondPage({Key key}) :super(key: key);

  @override

  Widget build(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text("第二个页面"),

      ),

      body:Center(

///获取计数器中的Count值

        child:Text("${Provider.of(context).count}"),

      ),

        floatingActionButton:FloatingActionButton(

onPressed: (){

///调用数据模型中的 increment 刷新数据

            Provider.of(context,listen:false).increment();

          },

          child:Icon(Icons.add),

        ),

    );

  }

}