注册登录

2019.9.20 状态管理的使用。

今天要介绍的是provide，，，谷歌自己提供的管理状态的插件。今天学习了下，还是很nice的。

以一个简单的例子来解释下怎么弄的吧。

假如有一个展示数字的widget，还有一个按钮，点击按钮数字自动增加

 -----  分割线、、

1：以下是页面显示的代码

class ShowNum extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(top: 150),
      child: Text(
        '${Provider.of<Counter>(context).getCount}', // 数据的自动更新
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}


class ClickBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(top: 40),
      child: RaisedButton(
        onPressed: () {
          Provider.of<Counter>(context).add(); // 点击事件处理。
        },
        child: Text(
          '按钮+',
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}
知识兔

2：需要新建文件来处理增加的逻辑。

import 'package:flutter/material.dart';

// ChangeNotifier  改变的通知
class Counter with ChangeNotifier { // 1:改变的通知
  int _count = 0;
  Counter(this._count);
  add() {
    _count ++;
    print(_count);
    notifyListeners(); // 2:通知听众值改变了，需要刷新页面
  }
  get getCount => _count; //  3:get方法
}
知识兔

3 ：需要在顶层监听整个通知。

此处一共监听了两个不同地方的状态，然后例子中使用的是第一个状态。

// 有多个状态需要管理的时候
void main() {
  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider<Counter>.value(value: Counter(10)), // 状态1
      ChangeNotifierProvider<Chooser>.value(value: Chooser(6)), // 状态2
    ],
    child: MyApp(),
  ));
}
知识兔

当点击按钮的时候数字就会自动增加了，

然后整个页面和逻辑都是分开的。基本上就算是达到解耦的目的了，

计算机