Flutter数据（事件）传递

1.构造方法属性传递

在前面的文章中我们多次使用到自定义Widget并传入相应的参数，这就是最简单的数据传递方法，上层通过下层Widget的构造方法将值传递给下层widget。

就比如下面的例子，我们定义了一个MyPageView的View，构造方法需要传入，leading和content两个参数。

class MyPageView extends StatelessWidget {
  final Widget _leading;
  final Widget _content;

  MyPageView(this._leading, this._content);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(30),
      color: Colors.white,
      elevation: 15,
      shadowColor: Colors.grey,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15.0))),
      child: ListTile(
        leading: _leading,
        title: _content,
      ),
    );
  }
}

我们在调用的地方就需要传入这两个属性，这样以来数据就从上层传递到了下层。

MyPageView(
      Icon(
        Icons.home,
        color: Colors.blueAccent,   
      ),
      Text("我是内容")),
)
image

实现起来非常的简单，但是如果碰见多级别View的情况怎么办？对的，那么你的参数就需要从最上层一层一层的往下传递。

这就要用到我们下面要说到的内容了

2. InheritedWidget

InheritedWidget 是 Flutter 中的一个功能型 Widget，在构建Widget的同时可以在Widget层中向下传递，适用于在 Widget 树中共享数据的场景。通过它，我们可以高效地将数据在 Widget 树中进行跨层传递。

可能大家对InheritedWidget比较陌生，但是实际上我们会在很多场景中接触这个东西，比如我们常用的MediaQuery,和theme都会为我们提供很多有用的功能，比如

MediaQuery.of(context).devicePixelRatio

来获取设备分辨率

或者

Theme.of(context).accentColor

来获取主题颜色

这其中都用到了InheritedWidget，当上层的Theme或者分辨率发生变更时下层的所有Widget都会发生变更，

InheritedWidget的数据是从上往下传递的。

接下来，我们就使用一个简单的例子来看下如何使用InheritedWidget,还是以计数器为例。

我们先声明一个数据类用来存储计数器的值

class MyInheritedModel {
  final int count;

  const MyInheritedModel(this.count);
}

然后定义CountContainer继承InheritedWidget来完成数据的更新判断与获取工作

class CountContainer extends InheritedWidget {
  static CountContainer of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CountContainer) as CountContainer;
  final MyInheritedModel model;

  CountContainer({
    Key key,
    @required this.model,
    @required Widget child,
  }) : super(key: key, child: child);
  
  @override
  bool updateShouldNotify(CountContainer oldWidget) =>
      myInheritedModel != oldWidget.myInheritedModel;
}

在CountContainer方法中，我们使用of方法来返回CountContainer对象，使用updateShouldNotify来判断数据是否可以更新。

在使用的地方调用CountContainer.of(context)方法即可获取CountContainer并获取model中的值。

void main() {
  runApp(new MaterialApp(
    home: CountContainer(
      child: MyApp(),
      model: MyInheritedModel(100),
    ),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CountContainer container = CountContainer.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Center(
        child: Text("Count:${container.model.count}"),
      ),
    );
  }
}
image

通过InheritedWidget我们可以实现数据的从上往下层传递，无论有多少成的嵌套我们都可以获取到它。

但是如果想要修改InheritedWidget中的值，通常情况下我们还是需要用到State。

具体代码见下方

void main() {
  runApp(new MaterialApp(
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  MyInheritedModel _inheritedModel = new MyInheritedModel(0);

  add() {
    setState(() {
      _inheritedModel.count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CountContainer(model: this, child: ContentWidget(), increment: add);
  }
}

class ContentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CountContainer container = CountContainer.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Center(
        child: Text("Count:${container.model._inheritedModel.count}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: container.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyInheritedModel {
  int count;
  MyInheritedModel(this.count);
}

class CountContainer extends InheritedWidget {
  static CountContainer of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CountContainer) as CountContainer;
  final _MyAppState model;
  final Function() increment;

  CountContainer({
    Key key,
    @required this.model,
    @required Widget child,
    @required this.increment,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CountContainer oldWidget) => model != oldWidget.model;
}

可以看到，我们把model改为State，使InheritedWidget持有State这样我们就可以通过InheritedWidget在任意的地方调用State中setStete方法来更新数据。

image

3.Notification

Notification中文意思是通知，与Android中的广播机制类似，在Flutter中Notification的功能是子节点状态变更，发送通知上报。

Notification的数据变更是通过Widgte树向上冒泡的，我们往往在下层Wdiget发送通知然后在上层处理通知。

首先我们创建通知类

class MyNotification extends Notification {
  final String info;
  MyNotification(this.info);
}

然后创建子Widget发送通知

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () => MyNotification("我是随机下面发送的数据：${Random().nextInt(1000)}").dispatch(context),
        child: Text("提交"),
      ),
    );
  }
}

最后我们创建parentWidgte使用NotificationListener接收通知并显示

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String msg = "";

  onReceiveMessage(String message) {
    setState(() {
      msg =message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      child: Column(
        children: [Text(msg), ChildWidget()],
      ),
      onNotification: (notification) {
        onReceiveMessage(notification.info);
        return true;
      },
    );
  }
}

我们在界面上放置了一个按钮，每次点击按钮们就会发送一个随机数通知，上层Widget通过监听获得下层发送的通知并并过SetState方法来更新UI。

看下效果：


image

4.EventBus

在上面的文章中我们具体了解了InheritedWidget从上往下的数据传递，和Notification从下往上的数据传递，虽然都可以实现数据跨多层传递的效果，但是他们都必须依赖于Wdiget树，没有办法脱离Wdiget使用。

下面我们就来介绍下Flutter中第三方组件EventBus的用法。

既然是事件总线，肯定是遵循发布/订阅模式的，允许任何订阅者接收并处理事件。

因为EventBus是第三方库，所以我们需要在 pubspec.yaml 引入它

 dependencies:
 event_bus: ^1.1.1

首先我们创建CustomEvent事件类

class CustomEvent {
  String info;

  CustomEvent(this.info);
}

然后创建EventBus并监听事件，在任意位置调用 eventBus.fire()即可发送事件，

class HomePage extends StatefulWidget {
  @override
  _MyState createState() => _MyState();
}

class _MyState extends State<HomePage> {
  EventBus eventBus = new EventBus();
  String info = "";

  @override
  void initState() {
    super.initState();
    eventBus.on<CustomEvent>().listen((event) {
      setState(() {
        info = event.info;
      });
    });
  }

  @override
  void dispose() {
    eventBus.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("EventBusTitle"),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Text(info),
              RaisedButton(
                child: Text("发送"),
                onPressed: () {
                  eventBus.fire(
                      CustomEvent("我是随机下面发送的数据：${Random().nextInt(1000)}"));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

当然效果与前面的Notification基本一致


image

小结

  • 使用构造方法可以传递数据，但是多层传递比较麻烦
  • InheritedWidget可以沿着Wdiget树自上往下传递数据，尽量放在子Widget上一层
  • Notification可以沿着Widget自下往上传递数据
  • EventBus不用依赖Widget树可以在任何位置传递事件。

关注Flutter开发者获取更多文章


image
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342