flutter InheritedWidget使用方法总结

目录
  • 引言
    • didChangeDependencies
    • 如何使用?
  • 结论

引言

InheritedWidget,flutter中非常重要的一个功能组件。比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 中来获取该共享的数据。

didChangeDependencies

说到 InheritedWidget ,我们不得不聊聊 state 对象中的 didChangeDependencies 方法。当子控件依赖使用了父控件中的 InheritedWidget,比如主题、locale(语言)等发生变化时,依赖其的子 widget 的didChangeDependencies方法将会被调用。

一般来说,子 widget 很少会重写此方法,因为在依赖改变后 framework 也都会调用build()方法。但是,如果你需要在依赖改变后执行一些昂贵的操作,比如网络请求,这时最好的方式就是在此方法中执行,这样可以避免每次build()都执行这些昂贵操作。

重点: 如子控件build 方法中没有使用 InheritedShareWidget 的数据,那么它的didChangeDependencies将不会被调用

如何使用?

我们简单用一个 count 自增的例子来记录 InheritedWidget 的使用:

  • 新建 InheritedShareWidget 继承 InheritedWidget 作为共享数据源,以其为父节点提供子节点数据
import 'package:flutter/material.dart';
class InheritedShareWidget extends InheritedWidget {
  //用于共享的数据
  final int data;
  InheritedShareWidget({this.data, Widget child}) : super(child: child);
  //定义便捷方法,方便子控件获取共享数据
  static InheritedShareWidget of(BuildContext context) {
    ///当子控件依赖使用了我们的数据源时,数据变动会触发子控件中的 didChangeDependencies 方法
    return context.dependOnInheritedWidgetOfExactType<InheritedShareWidget>();
    ///(前提:子控件使用了数据源)子控件中的 didChangeDependencies 方法不会被触发
    // return context.getElementForInheritedWidgetOfExactType<InheritedShareWidget>().widget;
  }
  @override
  bool updateShouldNotify(covariant InheritedShareWidget oldWidget) {
    //返回true时,才会通知子控件
    return oldWidget.data != this.data;
  }
}

注意:updateShouldNotify方法中,通知指的是通知子控件的didChangeDependencies 方法,前提是子控件使用dependOnInheritedWidgetOfExactType 的方式获取共享数据。

  • 子节点中如何获取共享数据?
class TestShareChildWidget extends StatefulWidget {
  const TestShareChildWidget({Key key}) : super(key: key);
  @override
  _TestShareChildWidgetState createState() => _TestShareChildWidgetState();
}
class _TestShareChildWidgetState extends State<TestShareChildWidget> {
  @override
  void didChangeDependencies() {
    ///如build 方法中没有使用 InheritedShareWidget 的数据,那么它的didChangeDependencies()将不会被调用
    super.didChangeDependencies();
    print("enter didChangeDependencies");
  }
  @override
  Widget build(BuildContext context) {
    print("enter child build");
    //获取Inherited的共享数据:
    final data = InheritedShareWidget.of(context).data.toString();
    return Text(data);
  }
}
  • 两者通过父子嵌套的关系联系在一起:
class _TestInheritedWidgetState extends State<TestInheritedWidget> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: InheritedShareWidget(
        data: count,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TestShareChildWidget(),
            RaisedButton(
                child: Text('add'),
                onPressed: () {
                  setState(() {
                    ++count;
                  });
                })
          ],
        ),
      ),
    );
  }
}

大家注意到,demo中操作++count时,使用了setState手动触发控件进行刷新。

结论

InheritedWidget只提供我们共享数据的能力,以及控制是否在 build 前触发didChangeDependencies 的能力。不会主动触发build方法,如果build没被触发,那么didChangeDependencies 也不会被触发。

号外扩展

InheritedWidget 数据共享能力不会受到 Navigator push 新页面的影响,与原生不一样,flutter的页面跳转不是管理一个堆栈,Navigator 本质上是使用 overlay 管理一个 stack widget,因此 InheritedWidget 基于父子关系管理的数据共享条件没有被打破

以上就是flutter InheritedWidget使用方法总结的详细内容,更多关于flutter InheritedWidget使用的资料请关注我们其它相关文章!

时间: 2022-11-14

Flutter&nbsp;绘制风车实现示例详解

目录 前言展示 1. 风车 1 的绘制 2. 风车 2 的绘制 3. 旋转动画的处理 4. 旋转动画的圈数 前言展示 最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见[windmill.dart] .绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到: 路径的使用 画板的旋转变换 动画曲线与 Tween 的使用 风车1 风车2 1. 风车 1 的绘制 第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是

使用PlatformView将 Android 控件view制作成Flutter插件

目录 引言 1. FlutterPlugin 创建 2. 创建 Android 控件 3. 注册 Android 控件 4. 封装 Android 层通信交互 ‘CustomViewController’ 代码说明 5. 在 flutter 中如何使用已注册的 Android 控件(view) 代码说明 如何使用这个View 6. 附上 example 完整代码 引言 小编最近在项目中实现相机识别人脸的功能,将 Android 封装的控件 view 进行中转,制作成 FlutterPlugin

flutter&nbsp;Bloc&nbsp;更新后事件同步与异步详解

目录 前言 使用方式 Bloc 新形态用法 事件队列的阻塞属性? 前言 最近,小轰参与了公司 flutter 项目关于 Dart 2.0 的空安全升级工作.我们升级了所有依赖的三方库,其中就包括有 Bloc 库.作为一款使用率颇高的状态管理框架, Bloc 在版本迭代中进行了少许结构和细节的优化,下面是小轰对于 Bloc 新版本的使用总结. 使用方式 小轰使用的 Bloc 版本如下 flutter_bloc: ^7.3.1 通过最简单的例子来学习新知识 创建一个包含 加 减 操作的页面,使用 b

Flutter改变状态变量是否必须写在setState回调详解

正文 我们都知道 setState(VoidCallback fn) 是这样用的: setState(() { count++; }); 执行完后组件会重新 build(),就可以取到 count 的最新值了.但其实这样写也是一样的: count++; setState(() {}); 因为 setState() 最后会调用 markNeedsBuild(),Flutter 会调度使组件 rebuild,所以状态变量的改变不是必须写在 setState() 的回调里面,只需要最后执行一下 set

IOS 改变导航栏返回按钮的标题实例详解

IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

Eclipse中改变默认的workspace的方法及说明详解

eclipse中改变默然的workspace的方法可以有以下几种: 1.在创建project的时候,手动选择使用新的workspace,如创建一个web project,在向导中的Location选项,取消使用"Use default location",同时在下面选择新的workspace. 2.在file菜单中选择switch workspace项,即可选择一个新的workspace 3.在eclipse安装目录下configuration/.settings目录下的 org.ec

InnoDB的关键特性-插入缓存,两次写,自适应hash索引详解

InnoDB存储引擎的关键特性包括插入缓冲.两次写(double write).自适应哈希索引(adaptive hash index).这些特性为InnoDB存储引擎带来了更好的性能和更高的可靠性. 插入缓冲 插入缓冲是InnoDB存储引擎关键特性中最令人激动的.不过,这个名字可能会让人认为插入缓冲是缓冲池中的一个部分.其实不然,InnoDB缓冲池中有Insert Buffer信息固然不错,但是Insert Buffer和数据页一样,也是物理页的一个组成部分. 主键是行唯一的标识符,在应用程序

vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

一.设置Fira_Code字体 1.下载字体 这里给出github下载链接,点击链接后在README.md中的Download & Install一栏中即可下载,链接中也包括字体示例及介绍,可自行查看. Fira_Code字体下载 2,安装字体 下载并解压,进入里面的ttf文件夹,双击或右击后点击安装,里面包含六种样式,可以选择性安装或全安装即可. 3,设置vscode 打开vscode,点击左下角齿轮形状图标,选择settings,得到下图所示界面: 根据上图箭头所示依次点击Font,Edit

如何从零开始利用js手写一个Promise库详解

前言 ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. 三道思考题 刚开始写前端的时候,处理异步请求经常用

如何使用Flutter实现58同城中的加载动画详解

前言 在应用中执行耗时操作时,为了避免界面长时间等待造成假死的现象,往往会添加一个加载中的动画来提醒用户,在58同城中也不例外,而且我们并没有使用系统默认的加载动画,而是制作了一个具有58特色的加载动画. 在本篇文章中,给大家分享下笔者使用Flutter实现58同城中加载动画的过程.先看一下加载动画的效果: 动画效果乍看比较复杂,难以看出端倪,其实我们可以先调慢动画的速度,这样能够比较清晰地分析出动画的流程. 动画的流程 动画由两个圆弧的动效组成,两个圆弧的起始点角度和扫过的弧度随着时间规律变化

Flutter持久化存储之数据库存储(sqflite)详解

前言 数据库存储是我们常用的存储方式之一,对大批量数据有增.删.改.查操作需求时,我们就会想到使用数据库,Flutter中提供了一个sqflite插件供我们用于大量数据执行CRUD操作.本篇我们就来一起学习sqflite的使用. sqflite是一款轻量级的关系型数据库,类似SQLite. 在Flutter平台我们使用sqflite库来同时支持Android 和iOS. sqflite使用 引入插件 在pubspec.yaml文件中添加path_provider插件,最新版本为1.0.0,如下:

Python3.5文件读与写操作经典实例详解

本文实例讲述了Python3.5文件读与写操作.分享给大家供大家参考,具体如下: 1.文件操作的基本流程: (1)打开文件,得到文件句柄并赋值给一个变量 (2)通过句柄对文件进行操作 (3)关闭文件 2.基本操作举例: 现有一个命名为song.txt的文件,里面存放最喜爱的英文歌,内容如下: take me to your heart hiding from the rain and snow 藏身于雨雪之中 trying to forget but i won't let go 努力忘记,但我

iOS bounds学习笔记以及仿写UIScrollView部分功能详解

经常看到这种说法,frame是基于父控件的,bounds是基于自身坐标的.然而,这个自身坐标是什么?bounds这个属性存在的意义是什么呢?bounds的x和y值真的永远是0吗? 经过查阅资料,我看到这样一种说法:一个控件,拥有其展示部分和内容部分.其展示部分是有限大的,固定坐标固定大小,而其内容部分是无限大的.就像一个电视机以及其播放的电影(这个比喻不太恰当,是我强行比喻的),电视机用于放映电影的屏幕(控件的展示部分)是固定位置固定大小的,然而电影的世界(控件的内容部分)是无限大的,我们只能展

Python利用Django如何写restful api接口详解

前言 用Python如何写一个接口呢,首先得要有数据,可以用我们在网站上爬的数据,在上一篇文章中写了如何用Python爬虫,有兴趣的可以看看://www.jb51.net/article/141661.htm 大量的数据保存到数据库比较方便.我用的pymsql,pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前在python3.x中,PyMySQL取代了MySQLdb. 1.连接数据库 # 连接数据库,需指定charset否则可能会报错 db = pym