Flutter状态管理-provider

什么是状态管理?

以下仅为本人浅见,如有不对请指出勿喷

状态管理就是一些变量的管理,而这些变量需要在多个 路由 界面 中重复使用,所以就有了状态管理。

如果多个界面需要重复数据时,当这些界面频繁跳转时,没有全局状态管理,那就需要每次跳转 路由 界面 都需要传值一次达到保存数据的目的,当有了全局状态管理,每次需要读取或者改变这些数据时,则可以调用公用方法获取或修改,因此可以大大减少工作量并提升应用性能

provider入门实战

本人使用的 provider: ^4.3.2+3,最新为5.0.0,大家可以按需配置依赖

下边开始用provider实现计数器

首先创建model类

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';

//继承ChangeNotifier后,可以通知所有订阅者
class CounterModel with ChangeNotifier {
  int _count;//要保存的数据,我这里实现计数器,所以只有一个int变量
  CounterModel(this._count);

  void add() {//提供全局方法,让全局计数+1
    _count++;
    notifyListeners(); //当数值改变后,通知所有订阅者刷新ui
  }

  get count => _count; //提供全局get方法获取计数总值
}

修改官方的计数器代码

修改Flutter初始项目main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo/provider/Counter.dart';
import 'package:provider_demo/widgets/menu.dart';

void main() {
  runApp(
    ChangeNotifierProvider(//全局状态设置
      create: (context) => CounterModel(0),//创建一个countermodel全局状态类,管理count值
      child: MyApp(),
    ),
  );
}

//不多做介绍
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Provider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.golf_course),
            onPressed: () {//创建一个跳转界面,跳转到新的路由,本跳转不传任何值
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return MenuView();
              }));
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              //以下代码Provider.of(context).属性值
              //请注意,属性值在model类中必须有get方法
              "${Provider.of(context).count}",
              style: Theme.of(context).textTheme.headline4,//字体样式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(//创建一个悬浮按钮
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

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

一个简单的全局共享就完成了

效果演示

tef5yrq9b8.gif

这时候我们发现,我们没有传值更没有返回值,就能轻松两个界面管理一个数据,是不是效率高了很多

但是我们发现,只能全局管理一个状态,那么怎么管理多个状态呢?

很简单,在main.dart

void main() {
  runApp(
    ChangeNotifierProvider(//全局状态设置
      create: (context) => CounterModel(0),//创建一个countermodel全局状态类,管理count值
      child: MyApp(),
    ),
  );
}

改为

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel(0)),
    //可以继续添加,语法如上,这样可以全局管理多个状态
      ],
      child: MyApp(),
    ),
  );
}

总结

通过简单demo我们使用了provider演示计数器,那么在实际开发中,不会只管理这么简单的数据,如果管理数据过多,provider就给我们节省了大量工作量

  • 一个model类可以有多个属性,一个app可以有多个model
  • 全局管理类,不见得用model结尾,但是我个人喜欢用model来存储数据
  • model类必须要继承ChangeNotifier类,否则无法刷新数据
  • model管理的状态,只有get方法,修改他的值是通过单独的方法进行修改的,在修改后要调用notifyListeners方法

你可能感兴趣的:(Flutter状态管理-provider)