Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

20 | 关于跨组件传递数据,你只需要记住这三招

陈航 2019-08-13
你好,我是陈航。
在上一篇文章中,我带你一起学习了在 Flutter 中如何响应用户交互事件(手势)。手势处理在 Flutter 中分为两种:原始的指针事件处理和高级的手势识别。
其中,指针事件以冒泡机制分发,通过 Listener 完成监听;而手势识别则通过 Gesture 处理。但需要注意的是,虽然 Flutter 可以同时支持多个手势(包括一个 Widget 监听多个手势,或是多个 Widget 监听同一个手势),但最终只会有一个 Widget 的手势能够响应用户行为。为了改变这一点,我们需要自定义手势,修改手势竞技场对于多手势优先级判断的默认行为。
除了需要响应外部的事件之外,UI 框架的另一个重要任务是,处理好各个组件之间的数据同步关系。尤其对于 Flutter 这样大量依靠组合 Widget 的行为来实现用户界面的框架来说,如何确保数据的改变能够映射到最终的视觉效果上就显得更为重要。所以,在今天这篇文章中,我就与你介绍在 Flutter 中如何进行跨组件数据传递。
在之前的分享中,通过组合嵌套的方式,利用数据对基础 Widget 的样式进行视觉属性定制,我们已经实现了多种界面布局。所以,你应该已经体会到了,在 Flutter 中实现跨组件数据传递的标准方式是通过属性传值。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(15)

  • Mr.J
    请你分别概括属性传值、InheritedWidget、Notification 与 EventBus 的优缺点。
    ·属性传值:单页面同一个视图树中使用,或者通过构造方法将值传递过去,有点直接将值带过去,不需要过多的操作,缺点是多层级的Widget需要一层层的传值,效率很低;中间一层忘了传整个下游都中断,而且中间某一个层级修改了数据,上层无法及时更新;
    ·InheritedWidget:主要体现是下层Widget主动去向上层拿数据,实现相对复杂,(有个疑问,多层的视图树,在最下层直接使用of可以获取到最上层的数据吗?),缺点传值方向的单一;
    ·Notification:与InheritedWidget相反,主要体现推数据,针对性强,具体通知给哪个Widget明确,不需要跨多层实现,缺点实现起来相对繁琐点,传值方向单一;
    ·EventBus:订阅关系,针对性强,全局使用,缺点是不同的事件需要定义不同的实体,传递时要区分哪个事件传递给哪个控件,销毁Widget时不能忘记取消订阅;

    作者回复: 赞
    InheritedWidget 无论跨多少层都可以的

    2019-08-14
    1
    6
  • 许童童
    老师能讲下闲鱼的Redux吗?

    作者回复: 更推荐Provider

    2019-08-13
    3
    5
  • 许童童
    请你分别概括属性传值、InheritedWidget、Notification 与 EventBus 的优缺点。
    属性传值:简单,但跨多个父子节点不方便
    InheritedWidget:跨多个父子节点方便,但修改数据麻烦
    Notification :传递事件方便,读取不方便
    EventBus :通过事件总线,全局,方便,但要记住事件名称,全局容易冲突,组件消除要清理事件。

    作者回复: 赞

    2019-08-13
    2
  • 淡~
    Bloc和scopedmodel等一些状态管理方案会讲吗,更富推荐那些做状态管理啊

    作者回复: 推荐Provider

    2019-08-14
    1
  • 🌝
    我通过子widget类直接修改传入的父widget中的变量可以吗?实验过,如果是对象的变量可以直接修改掉。

    class Obj {
      int a;
      String b;

      Obj({this.a, this.b});
    }
    class OneWidget extends StatefulWidget {
      OneWidget({Key key}) : super(key: key);
      @override
      _OneWidgetState createState() => _OneWidgetState();
    }
    class _OneWidgetState extends State<OneWidget> {
      Obj obj;
      @override
      Widget build(BuildContext context) {
        return TwoWidget(obj: obj);
      }
    }

    class TwoWidget extends StatefulWidget {
      final Obj obj;
      TwoWidget({Key key, this.obj}) : super(key: key);
      @override
      _TwoWidgetState createState() => _TwoWidgetState();
    }
    class _TwoWidgetState extends State<TwoWidget> {
      @override
      Widget build(BuildContext context) {
        return FlatButton(
          onPressed: () {
            widget.obj.a = 123;
          },
          child: Text('点击'),
        );
      }
    }

    作者回复: 可以啊,对象是引用传递就没问题

    2019-11-13
  • 和小胖
    老师,dispose() { subscription.cancel();} 这里的 subscription 哪里来的呢?不是应该是 eventbus.destroy() 吗?

    作者回复: 注册通知(调用listen)的时候会返回一个监听对象,用于后续取消事件通知

    2019-09-10
  • 和小胖
    老师,上面提的问题似乎找到答案了。

    把 _incrementCounter 传入到 CountContainer 里面或许是为了类似于 java 里面的多态,子类可以有很多,同时子类可以自定义很多自己的方法,但是在调用的时候都统一调用父类的同名方法。

    而我用 state.increment 之所以不行,是因为我是 onPressed: () => state.increment 这样写的,如果改成 onPressed: () => state.increment() 其实也是可以的,或者按照老师那种 onPressed 的写法也是可以的。

    onPressed: () => state.increment() 是否可以认为是在 onPressed 的回调响应里面调用了 state 的 increment() 方法而已,而 onPressed: state.increment 是不是可以看成是在拿 state 的 increment 属性在给 onPressed 这个属性赋值呢?

    作者回复: 赞,你已经得出正确结论了

    2019-09-10
  • 和小胖
    老师,请问下第一种父传子的方式,为啥要把 _incrementCounter 传入到CountContainer里面呢?在按钮的点击事件里面直接使用 state.model._incrementCounter() 不是也可以吗?

    另外我发现我用state.model._incrementCounter()是可以,但是使用 state.increment 却无法让 数字变化,这是为什么呢?

    作者回复: 1.直接使用State当然可以呀,只是这个例子是演示如何通过InheritedWidget进行读写数据。InheritedWidget只能读不能写,要写数据得通过State中转一层
    2.看评论你已经得出结论啦

    2019-09-10
  • 咖啡凉了

    class Counter extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // 获取 InheritedWidget 节点
        CountContainer state = CountContainer.of(context);
        return Scaffold(
          …
          body: Text(
            'You have pushed the button this many times: ${state.model.count}', // 关联数据读方法
          ),
          floatingActionButton: FloatingActionButton(onPressed: state.increment), // 关联数据修改方法
        );
      }
    }
    我在尝试的时候遇到了问题,这段代码中的 state.increment ,没有反应,改成state.increment()才能响应。这是什么问题

    作者回复: 这段代码应该是没问题的,如果是用箭头函数才会有问题

    2019-09-09
  • 历史课代表
    可以讲一下EventBus在Flutter中怎么实现的吗

    作者回复: EventBus原理比较简单,通过一个可以被多人共享(订阅)的数据流就可以实现事件的分发。Dart的event_bus实际上就是通过一个可以被多个人订阅的Stream实现的,而其底层的StreamController就是专门用来给Steam制造数据的。

    2019-09-04
  • 看不懂的你
    老师具体讲一下provider的实现与思想,还有bloc的sixiabg

    作者回复: Provider会讲的

    2019-08-29
  • ptlCoder
    系统没有提供缓存相关API嘛?

    作者回复: 有啊。但是对于跨组件传递数据,存取方式并不重要,重要的是存好了怎么通知其他组件来取

    2019-08-27
  • davidzhou
    eventbus的事件处理必须在同一个对象里面,那大大的降低了灵活性,在iOS里面通用的nsnotificationcenter,就是为了方便在非关联的对象之间能方便的传递信息

    作者回复: 把event bus封装成单例就可以了

    2019-08-23
  • 给我点阳光就灿烂
    想问一下老师,这几种传递方式哪一种更高效呢

    作者回复: Event Bus是最简单高效的,不过还得看具体场景。

    2019-08-20
  • 倒霉的香蕉
    把FirstScreen和SecondScreen作为两个TabBarView来切换,这样的话 EventBus好像没用了。 是不是只能是通过Navigator进行的组件切换才能用EventBus。

    作者回复: 你把两个页面都换成StatefulWidget再看一下

    2019-08-14
收起评论
15
返回
顶部