【自学Flutter】25 InheritedWidget数据共享的使用

25 InheritedWidget数据共享的使用

1.源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  int count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("数据共享InheritedWidget"),),
            body: Center(
              child: ShareDataInheritedWidget(
                data: count,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: ShareDataTextWidget(),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: ShareDataRedTextWidget(),
                    ),
                    RaisedButton(
                      child: Text("增加"),
                      onPressed: () => setState(() => ++count),
                    )
                  ],
                ),
              ),
            )
        )
    );
  }
}



class ShareDataInheritedWidget extends InheritedWidget {

  final int data;

  ShareDataInheritedWidget({
    @required this.data,
    Widget child
  }) :super(child: child);

  static ShareDataInheritedWidget of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ShareDataInheritedWidget);
  }

  @override
  bool updateShouldNotify(ShareDataInheritedWidget old) {
    return old.data != data;
  }
}



class ShareDataTextWidget extends StatefulWidget {
  @override
  _ShareDataTextWidgetState createState() => new _ShareDataTextWidgetState();
}

class _ShareDataTextWidgetState extends State<ShareDataTextWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(ShareDataInheritedWidget.of(context).data.toString());
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies() 被调用");
  }
}

class ShareDataRedTextWidget extends StatefulWidget {
  @override
  _ShareDataRedTextWidgetState createState() => new _ShareDataRedTextWidgetState();
}

class _ShareDataRedTextWidgetState extends State<ShareDataRedTextWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(ShareDataInheritedWidget.of(context).data.toString(),style: TextStyle(color: Colors.red),);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies() 被调用");
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //保存累加数
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("数据共享InheritedWidget"),),
            body: Center(
              //创建ShareDataInheritedWidget，并继承InheritedWidget,当父
              child: ShareDataInheritedWidget(
                //当共享数据
                data: count,
                //当子
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      //子widget中依赖ShareDataInheritedWidget
                      child: ShareDataTextWidget(),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      //子widget中依赖ShareDataInheritedWidget
                      child: ShareDataRedTextWidget(),
                    ),
                    RaisedButton(
                      child: Text("增加"),
                      //每点击一次，将count自增，然后重新build,ShareDataTextWidget的data将被更新
                      onPressed: () => setState(() => ++count),
                    )
                  ],
                ),
              ),
            )
        )
    );
  }
}



class ShareDataInheritedWidget extends InheritedWidget {

  //需要在子树中共享的数据
  final int data;

  ShareDataInheritedWidget({
    @required this.data,
    Widget child
  }) :super(child: child);


  //定义方法，让子树中的widget获取共享数据
  static ShareDataInheritedWidget of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ShareDataInheritedWidget);
  }

  //当data发生变化时，调用此处，是否通知子树中依赖data的Widget
  @override
  bool updateShouldNotify(ShareDataInheritedWidget old) {
    //如果返回true，子widget的`didChangeDependencies()`会被调用
    return old.data != data;
  }
}



class ShareDataTextWidget extends StatefulWidget {
  @override
  _ShareDataTextWidgetState createState() => new _ShareDataTextWidgetState();
}

class _ShareDataTextWidgetState extends State<ShareDataTextWidget> {
  @override
  Widget build(BuildContext context) {
    //使用InheritedWidget中的共享数据
    return Text(ShareDataInheritedWidget.of(context).data.toString());
  }

  //父或祖先widget中的 updateShouldNotify()返回true 时会被调用
  //如果build中没有依赖InheritedWidget，则不会被调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //后台打印提示是否调用了
    print("didChangeDependencies() 被调用");
  }
}

class ShareDataRedTextWidget extends StatefulWidget {
  @override
  _ShareDataRedTextWidgetState createState() => new _ShareDataRedTextWidgetState();
}

class _ShareDataRedTextWidgetState extends State<ShareDataRedTextWidget> {
  @override
  Widget build(BuildContext context) {
    //使用InheritedWidget中的共享数据
    return Text(ShareDataInheritedWidget.of(context).data.toString(),style: TextStyle(color: Colors.red),);
  }

  //父或祖先widget中的 updateShouldNotify()返回true 时会被调用
  //如果build中没有依赖InheritedWidget，则不会被调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    //后台打印提示是否调用了
    print("didChangeDependencies() 被调用");
  }
}

3.效果图