微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter: 状态管理(1) -- InheritedWidget有效的传递数据给子部件

在本示例中,Widget Tree是这样的:

小部件树:
   App
   |
   StateManagementDemo
   |
   CounterWrapper
   |
   Counter

Counter Widget需要的数据来自CounterWrapper Widget。一层层的包装传递。

但我们需要有效的传递数据,即不是通过一层层的包装,而是在需要的地方插入数据。


InheritedWidget的使用:

创建一个类并重写方法和定义需要传递的数据. 

class CounterProvider extends InheritedWidget{
  final int count;
  final VoidCallback increaseCount;
  final Widget child;


  CounterProvider({
    this.count,
    this.increaseCount,
    this.child,
}) : super(child: child);

  static CounterProvider of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CounterProvider);


  /**
   * 决定是否通知继承了这个小部件的小部件
   */
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }



}

在State里面用CounterProvider包装起来:

@override
  Widget build(BuildContext context) {
    return CounterProvider(
      //提供需要的数据
      count: _count,
      increaseCount: _increaseCount,
      child: Scaffold(
        appBar: AppBar(
          title: Text('STATEMANAGEMENTdEMO'),
          elevation: 4.0,
        ),
        body: CounterWrapper(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: _increaseCount,
        ),
      ),
    );
  }

在需要的Widget中的build()方法中用Countprovider的静态方法来获取对应的数据:

@override
  Widget build(BuildContext context) {
    final int count = CounterProvider.of(context).count;
    final VoidCallback  increaseCount = CounterProvider.of(context).increaseCount;
    return ActionChip(
      label: Text('$count'),
      onPressed: increaseCount,
    );
  }

完整代码:

import 'package:flutter/material.dart';

class StateManagementDemo extends StatefulWidget {
  @override
  _StateManagementDemoState createState() => _StateManagementDemoState();
}

class _StateManagementDemoState extends State<StateManagementDemo> {

  int _count = 0;

  void _increaseCount(){
    setState(() {
      _count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      //提供需要的数据
      count: _count,
      increaseCount: _increaseCount,
      child: Scaffold(
        appBar: AppBar(
          title: Text('STATEMANAGEMENTdEMO'),
          elevation: 4.0,
        ),
        body: CounterWrapper(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: _increaseCount,
        ),
      ),
    );
  }
}


/**
 * 小部件树:
    App
    |
    StateManagementDemo
    |
    CounterWrapper
    |
    Counter
 */
class CounterWrapper extends StatelessWidget {

  //父辈传递过来的数据,即状态管理是由父辈管理状态的。
  //回调是由父辈那里传递过来的。
//  final int count;
//  final VoidCallback increaseCOunt;
//
//  CounterWrapper(this.count,this.increaseCOunt);

  @override
  Widget build(BuildContext context) {
    return Center(
//      child: Counter(count, increaseCOunt),
      child: Counter(),
    );
  }
}



class Counter extends StatelessWidget {

  //父辈传递过来的数据,即状态管理是由父辈管理状态的。
  //回调是由父辈那里传递过来的。
//  final int count;
//  final VoidCallback increaseCOunt;
//
//  Counter(this.count,this.increaseCOunt);
  @override
  Widget build(BuildContext context) {
    final int count = CounterProvider.of(context).count;
    final VoidCallback  increaseCount = CounterProvider.of(context).increaseCount;
    return ActionChip(
      label: Text('$count'),
      onPressed: increaseCount,
    );
  }
}


/**
 * 创建、使用InheritedWidget有效的传递数据给子部件。
 */
class CounterProvider extends InheritedWidget{
  final int count;
  final VoidCallback increaseCount;
  final Widget child;


  CounterProvider({
    this.count,
    this.increaseCount,
    this.child,
}) : super(child: child);

  static CounterProvider of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CounterProvider);


  /**
   * 决定是否通知继承了这个小部件的小部件
   */
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }



}

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐