flutter provider 5.0 状态管理学习

Flutter Provider 5.0 学习

 

下面是修改过的provider 官方例子代码：

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

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
        ChangeNotifierProvider(create: (_) => Person()),
      ],
      child: const MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  String _name = 'Michael';
  String get name => _name;

  void increment() {
    _count++;
    notifyListeners();
  }

  void setName (int i) {
    _name = '$name $i';
    notifyListeners ();
  }
}

class Person with ChangeNotifier {
  int _age = 18;
  int get age => _age;
  String _name = '1';
  String get name => _name;

  void changeName () {
    var r = Random();
    _name = 'Student: ${r.nextInt(100)}';
    notifyListeners();
  }
  void changeAge () {
    var r = Random();
    _age  = r.nextInt(100);
    notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print ('build home page');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Provider 5.0 Example'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text('You have pushed the button this many times:'),
            Count(),
            ShowName(),
            ShowAge(),
            ShowPersonName(),
            ShowPersonName2(),
            ShowPersonAge (),
            ShowPersonAge2(),
            ChangePersonName(),
            ChangePersonAge (),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: const Key('increment_floatingActionButton'),
        onPressed: () => context.read<Counter>().increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Count extends StatelessWidget {
  const Count({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}

class ShowName extends StatelessWidget {
  const ShowName({Key key}) : super(key:key);
  @override
  Widget build(BuildContext context) {
    print ('show name');
    return Text(
      '${context.watch<Counter>().name}',
    );
  }
}

class ShowAge extends StatelessWidget {
    const ShowAge ({Key key}):super(key:key);
    @override
    Widget build (BuildContext context) {
        print ('show age');
        return new Center(
            child: new Text('show Age', style: new TextStyle(fontSize: 32.0))
        );
    }
}

class ShowPersonName extends StatelessWidget {
    const ShowPersonName ({Key key}):super(key:key);
    @override
    Widget build (BuildContext context) {
        print ('show person name');
        final personName = context.select((Person p) => p.name ); // 采用select 方式，绑定Person的name属性，只有name属性的值改变了，才刷新本widget
        return new Center(
            child: new Text('Person Name: ${personName}', style: new TextStyle(fontSize: 32.0))
        );
    }
}

class ShowPersonAge extends StatelessWidget {
    const ShowPersonAge ({Key key}):super(key:key);
    @override
    Widget build (BuildContext context) {
        print ('show person age');
        final personAge = context.select((Person p)=>p.age);  // 采用select 方式，绑定Person的age属性，只有age属性的值改变了，才刷新本widget， 推荐这用法
        return new Center(
            child: new Text('Person Age: ${personAge}', style: new TextStyle(fontSize: 32.0))
        );
    }
}

class ShowPersonName2 extends StatelessWidget {
    const ShowPersonName2 ({Key key}):super(key:key);
    @override
    Widget build (BuildContext context) {
        print ('show person name 2');
        return new Center(
            child: new Text('Person Name: ${context.watch<Person>().name}', style: new TextStyle(fontSize: 32.0))
        );
    }
}

class ShowPersonAge2 extends StatelessWidget {
    const ShowPersonAge2 ({Key key}):super(key:key);
    @override
    Widget build (BuildContext context) {
        print ('show person age 2');
        return new Center(
            child: new Text('Person Age: ${context.watch<Person>().age}', style: new TextStyle(fontSize: 32.0))
        );
    }
}

class ChangePersonName extends StatelessWidget {
  const ChangePersonName({Key key}) : super(key:key);
  @override
  Widget build(BuildContext context) {
    return RaisedButton (
      child: Text('Change Person Name'),
      onPressed: () {
        context.read<Person>().changeName();
      },
    );
  }
}

class ChangePersonAge extends StatelessWidget {
  const ChangePersonAge({Key key}) : super (key:key);
  @override
  Widget build(BuildContext context) {
    return RaisedButton (
      child: Text('Change Person Age'),
      onPressed: () {
        context.read<Person>().changeAge();
      },
    );
  }
}

 

provider:

读数据（两种)： 

// select 方式，绑定对象里面的属性，重绘少，性能高
final personAge = context.select((Person p)=>p.age);
new Text('Person Age: ${personAge}', style: new TextStyle(fontSize: 32.0));

// 绑定对象， 重绘相对多， 性能相对低
new Text('Person Age: ${context.watch<Person>().age}', style: new TextStyle(fontSize: 32.0))

  

写数据：

RaisedButton (
      child: Text('Change Person Age'),
      onPressed: () {
        context.read<Person>().changeAge();
      },
    );