【Flutter】用InheritedWidget来实现全局变量

最新推荐文章于 2025-06-24 11:10:57 发布

原创

最新推荐文章于 2025-06-24 11:10:57 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

在Flutter中，由于Dart不直接支持全局变量，开发者常利用InheritedWidget来实现组件间共享变量。InheritedWidget是Flutter框架中用于在Widget树中高效传递信息的基类。本文将详细讲解如何通过InheritedWidget创建可变的全局变量，包括InheritedWidget的基本用法和如何创建共享的可变状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在研究使用Flutter来写一个跨平台的App，之前研究过使用Java来编写Android应用，且对于Java语言也比较熟悉，而Flutter使用Dart语言来编写的，因此在熟悉Dart语言和Flutter框架的过程中也遇到不少问题。

看了很多网上的资料和官方文档，Dart似乎不支持全局变量，而且Flutter将所有的东西抽象为Widget，并将其分为有状态的StatefulWidget和无状态的StatelessWidget，每一个控件中的变量都被抽象成了状态state，有状态的state改变的时候就会刷新控件达到改变的目的，因此问题就转化为了如何定义一个多个控件共享的state，比如Flutter提供的InheritedWidget就可以实现类似全局变量的功能。

一、InheritedWidget

InheritedWidget是一个小部件的基类，用于有效地Widget树中传播信息，InheritedWidget的子控件会自动搜寻其祖先节点中离自己最近的InheritedWidget控件，并获取InheritedWidget控件的变量，因此全局变量只需要定义在InheritedWidget中，并用InheritedWidget控件作为需要共享该变量的祖先节点就可以了。

下面看一下官方提供的例子：

class FrogColor extends InheritedWidget {
  const FrogColor({
    Key key,
    @required this.color,
    @required Widget child,
  }) : assert(color != null),
       assert(child != null),
       super(key: key, child: child);

  final Color color;

  static FrogColor of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(FrogColor) as F