Flutter学习笔记

Flutter 状态管理值provide

2019-10-10  本文已影响0人  王俏

1.在pubspec.yaml中添加Provide的依赖

 provide: ^1.0.2
 

2.创建provide

混入了ChangeNotifier,意思是可以不用管理听众。现在你可以看到数和操作数据的方法都在Provide中,很清晰的把业务分离出来了。通过notifyListeners可以通知听众刷新。

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int value = 0;

  increment() {
    value++;
    notifyListeners();//通知听众值改变了,局部刷新界面
  }
}

3.将状态放入顶层

先引入provide和counter:

import 'package:provide/provide.dart';
import './provide/counter.dart';

然后进行将provide和counter引入程序顶层。

void main() {

  //provider顶层依赖
  var counter = Counter();
  var providers = Providers();
  providers..provide(Provider<Counter>.value(counter));

  runApp(ProviderNode(
    child: MyApp(),
    providers: providers,
  ));
}
}

4.获取和修改provide状态

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Number(),
            MyButton(),
          ],
        ),
      ),
    );
  }
}

class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200.0),
      child: Provide<Counter>(
        //状态管理获取值
        builder: (context, child, counter) {
          return Text(
            '${counter.value}',
            style: Theme.of(context).textTheme.display1,
          );
        },
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        //状态管理修改状态
        onPressed: () {
          Provide.value<Counter>(context).increment();
        },
        child: Text('递增'),
      ),
    );
  }
}

上一篇下一篇

猜你喜欢

热点阅读