首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter:由于上下文为空,本地化不起作用。如何正确地将其从无状态传递到有状态?

在Flutter中,上下文(context)是一个非常重要的概念,它代表了Flutter应用程序的当前状态和结构。在某些情况下,当上下文为空时,可能会导致本地化(Localization)无法正常工作。为了正确地将上下文从无状态传递到有状态,可以采取以下几种方法:

  1. 使用BuildContext参数:在无状态的Widget中,可以将BuildContext作为参数传递给有状态的Widget。例如:
代码语言:txt
复制
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyStatefulWidget(context);
  }
}

class MyStatefulWidget extends StatefulWidget {
  final BuildContext context;

  MyStatefulWidget(this.context);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    // 使用widget.context来访问上下文
    return Text('Hello World', context: widget.context);
  }
}
  1. 使用Builder Widget:Builder是一个无状态的Widget,它可以为其子Widget提供一个新的上下文。通过将有状态的Widget包装在Builder中,可以确保上下文的正确传递。例如:
代码语言:txt
复制
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Builder(
      builder: (BuildContext context) {
        return MyStatefulWidget();
      },
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    // 使用context来访问上下文
    return Text('Hello World', context: context);
  }
}
  1. 使用InheritedWidget:InheritedWidget是Flutter中用于在Widget树中共享数据的一种机制。通过将有状态的Widget包装在InheritedWidget中,可以在整个Widget树中共享上下文。例如:
代码语言:txt
复制
class MyInheritedWidget extends InheritedWidget {
  final BuildContext context;

  MyInheritedWidget({
    Key key,
    @required this.context,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return context != oldWidget.context;
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    // 使用InheritedWidget中的上下文
    final inheritedContext = MyInheritedWidget.of(context).context;
    return Text('Hello World', context: inheritedContext);
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      context: context,
      child: MyStatefulWidget(),
    );
  }
}

通过以上方法,可以正确地将上下文从无状态传递到有状态,确保本地化在Flutter应用程序中正常工作。对于Flutter开发,腾讯云提供了云开发(Tencent Cloud Base)产品,它是一款支持Flutter开发的云原生后端服务,提供了丰富的功能和工具,可以帮助开发者快速搭建和部署Flutter应用。了解更多关于腾讯云开发的信息,请访问Tencent Cloud Base产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 1.22 正式发布

Flutter应用程序) 如果您要通过Flutter应用定位iOS 14,我们强烈建议您使用Flutter 1.22对其进行重建,然后立即将其部署到App Store中,以确保您的iOS 14用户获得最佳体验...该软件包有助于解决诸如如何正确地将字符串(如“ A in text in English”)缩写为前15个字符的问题。使用String类,该缩写为“ A??...通过此PR,Flutter使用字符包来正确处理这些复杂字符。例如,当使用具有maxLength限制的TextField时,像?‍?‍?这样的字符现在可以正确地计为单个字符。...到目前为止,Flutter不支持状态还原,没有框架的支持,很难正确地进行状态还原。因此,我们很高兴能够为Android提供此功能的基本实现。...要进行手动测试,最简单的方法是在Android设备上启动启用了状态恢复功能的Flutter应用,在Android开发人员设置中启用“不要保留活动”,运行Flutter应用,将其置于后台,然后然后回到它。

7.5K20

在 Flutter 中探索 StreamBuilderimage

假设您需要根据一个 Stream 的快照在 Flutter 中构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客中,我们将探索 Flutter 中的 StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...一个流可以有多个侦听器,这些侦听器的负载可以获得流水线,流水线将获得等价值。如何在流上放置值是通过使用流控制器实现的。流构建器是一个小部件,它可以将用户定义的对象更改为流。...initialData, required AsyncWidgetBuilder builder, }) 实际上,您需要创建一个 Stream 并将其作为流争用传递。...如果流为空,则可能发生 waiting: 等待: 与异步计算关联并等待协作。在这个上下文中,它暗示流还没有完成 active: 活跃的: 与活动的异步计算相关联。

2.5K00
  • Flutter | 通过一个小例子带你认识动画 Animation

    关于如何实现,后面再说,先来说一下 Flutter 中的动画基础知识。...Animation Flutter 中的动画系统基于 「Animation」,「Widgets」 可以直接将这些动画合并到自己的 build 方法中来读取它们的当前值或者监听它们的状态变化,或者可以将其作为的更复杂动画的基础传递给其他...8.vsync:当前上下文的 TickerProvider,可以通过 resync 来更改它,不能为空。...Tween 本身只是定义了如何在两个值之间插值,如果想要当前具体值,还是需要一个动画的,这里有两种方法来获得当前状态的具体指: 1.evaluate:这种方法适合用于已经写好动画,并且在该动画运行时重新...由于我们的动画效果还算有一点点复杂,所以我们用 AnimatedWidget 来封装该组件,避免大量重复的 setState。

    1.4K30

    flutter 起步

    安装完成后-需要安装as(Android studio)运行 flutter doctor 检查环境缺失的依赖图片根据错误提示安装相对应依赖与工具如何引用并安装第三方库pubspec.yaml管理第三方库在...所以这意味着StatelessWidget.build方法中的context和函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。...1、在flutter里面,一切皆组件,在组件里面撑起flutter半边天的一个是无状态StatelessWidget组件,一个是有状态的StatefulWidget组件2、常用组件container:容器组件...热刷新无法实现更新时,执行一次热重启(Hot Restart)就可以全量更新所有代码,同样不需要重启App,区别是restart会将所有Dart代码打包同步到设备上,并且所有状态都会重置。...默认值为 true。AppBar 有以下常用属性:leading → Widget - 在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮。

    4.5K20

    深入研究Apache Flink中的可缩放状态

    出于数据本地化的考虑,Flink中的所有状态数据总是绑定到运行相应并行operator实例的任务,并位于运行该任务的同一台机器上。...在恢复时,从分布式存储中读取对象,并将其作为参数传递给operator实例,以供restore function使用。...这种方法在缩放时存在问题:Flink如何将operator状态分解为有意义的、可重新分发的分区?...因此,所有keyed state都会往下传递,它也被绑定到一个并行operator实例,因为对于每个键,只有一个operator实例负责。...我们可以看到,在进行缩放时,keyed state比operator state有一个明显的优势:我们可以很容易地找出如何在并行operator实例之间正确地拆分和重新分配状态。

    1.6K20

    【老孟Flutter】Flutter 2 新增的功能

    此外,内置的上下文菜单已添加到Material和Cupertino设计语言的TextField和TextFormField小部件中。最后,添加了抓手 到ReorderableListView小部件。...此功能称为Add-to-App,是在两个移动平台上重用Flutter代码同时仍保留现有本机代码库的绝佳方法。但是,对于您中的那些人,我们有时会听到,不清楚如何将第一个屏幕集成到Flutter中。...举例来说,假设您的应用中包含以下代码行: 使用不推荐使用的参数创建Flutter小部件 由于不赞成使用此构造函数的参数,因此应将其替换为以下内容: 图片发布 创建一个Flutter小部件,其中不推荐使用的参数已替换...图片发布 经过两年的开发,对Dart的LSP(语言服务器协议)支持现已作为默认方式提供给Dart分析器,以将其集成到Flutter扩展的Visual Studio Code中。...中删除nullOk参数,并使其返回不可为空的值 68911添加maybeLocaleOf到本地化 68736在Media.queryOf删除nullOK 68917从Focus.of,FocusTraversalOrder.of

    7.9K20

    Flutter技术与实战(5)

    从Flutter页面跳转至原生页面 为什么需要做状态管理,怎么做 Provider 放在那儿 完成数据读写操作 Consumer 多状态的资源封装 如何封装 实现注入 获取资源 思考 如何实现原生推送能力...await 与 async 只对调用上下文的函数有效,并不向上传递。因此对于这个案例而言,func 是在异步等待。...对于上面提到的例子,类型为 java.lang.Integer 或 NSNumber 的返回值,先是被序列化成了一段二进制格式的数据在通道中传输,然后当该数据传递到 Flutter 后,又被反序列化成了...这里,我们只有一个状态需要共享,即 count。由于第二个页面还需要修改状态,因此我们还需要在数据状态的封装上包含更改数据的方法。...此外,该模式为快速开发和运行做了优化,支持亚秒级有状态的 Hot reload(热重载),但并没有优化代码执行速度、二进制包大小和部署。

    15.8K30

    革命性web前端框架Flutter详细介绍和学习路径

    这不仅使Flutter变得更快,而且几乎所有的东西(包括所有的小部件)都可以定制; 2)Dart也可以JIT(Just In Time)编译,开发周期异常快,工作流颠覆常规(包括Flutter流行的亚秒级有状态热重载...由于Flutter应用程序被编译为本地代码,因此它们不需要在领域之间建立缓慢的桥梁(例如,JavaScript到本地代码)。...Flutter 渲染 UI 控件树并将其绘制到平台画布上。 UI 一致性 Flutter 因为是自己做的渲染,因此在iOS和Android的效果基本完全一致。...App体积 Flutter iOS空项目 30M左右,Android空项目 7M左右。 (iOS需要额外集成Skia) React Native iOS空项目 3M左右,Android20M左右。...如何系统化的学习Flutter,可以从以下方面入手: Flutter入门:快速上手Flutter开发 Dart基础知识 什么是声明式UI Flutter入门基础知识 项目结构、资源、依赖和本地化

    3.9K40

    【译】Flutter架构综述

    在大多数传统的UI框架中,用户界面的初始状态被描述一次,然后由用户代码在运行时响应事件单独更新。这种方法的一个挑战是,随着应用程序的复杂性增加,开发人员需要意识到状态变化如何在整个UI中级联。...State management 那么,如果许多widget可以包含状态,那么如何管理状态并在系统中传递呢?...RenderBox提供了一个盒子约束模型的基础,为每个要渲染的widget建立了一个最小和最大的宽度和高度。 为了执行布局,Flutter以深度优先的遍历方式走过渲染树,并将尺寸约束从父级传递到子级。...父对象可以通过将最大和最小约束设置为相同的值来决定子对象的大小。例如,手机应用中最上面的渲染对象将其子对象约束为屏幕的大小。(子对象可以选择如何使用该空间。...Flutter模块模板是为了方便嵌入而设计的;你可以将其作为源码依赖嵌入到现有的Gradle或Xcode构建定义中,也可以将其编译到Android Archive或iOS Framework二进制中使用

    5.6K10

    Flutter 组件集录 | InheritedWidget 共享数据

    但是这样做当层级差距很大,参数传递链就会非常长。如下所示,如果下层有个 F 组件需要访问颜色值,而 D 、E、G 没有访问数据的需求。...此时如果靠参数传递来共享数据就会非常糟糕,D 、E、G 不得不为了向 F 传参而被迫需要入参。 其实 Flutter 框架内部有类似的场景,比如全局主题色、字体、语言数据的改变。...源码中不可能为所有的组件都通过构造来传递这些主题数据,那么下层的组件是如何访问到主题数据,主题数据的更新又为什么有能力 通知所有组件触发更新 呢? 2....= oldWidget.counter; } } 在 A 状态类中通过 InheritedCounter 包裹 B ,这样其下层的 B、C 节点就可以通过上下文访问 InheritedCounter...到这里,我们认识了 InheritedWidget 组件真正的价值。它很好地解决了 数据的跨节点共享的痛点,也为 Provider 状态管理中数据的跨节点共享提供了理论基础。

    28110

    Flutter - 检查 Internet 连接示例

    Flutter - 检查 Internet 连接示例 本教程为您提供了如何在 Flutter 中检查互联网连接的示例。 有时,您可能想要检查运行您的应用程序的设备的互联网连接。...本实例flutter版本2.5.3,开启空安全 使用connectivity_plus包 有一个来自 Flutter Community的connectivity_plus包,可以轻松获取当前网络状态。...首先,将其添加为pubspec.yaml文件中的依赖项。...然后,调用 Stream 的 listen 方法并传递要在连接状态更改时调用的函数。该函数必须接受一个类型为 ConnectivityResult 的参数。...在 Flutter 中,可以通过使用 dart:io 包来完成。它具有 InternetAddress.lookup 方法,可用于执行地址查找。因此,您需要通过传递有效且可访问的主机来调用该方法。

    2.1K20

    双厨狂喜 | Flutter & 正则匹配 - 小册上架

    《Flutter 实战:正则匹配应用》 , 以正则匹配为核心需求,基于 Flutter 框架构建全平台应用。 ---- 1....web 端倒是有不少这种网页,比如 regex101 。但找了半天,在移动端竟然没有的相关软件。 当时恰逢我想要研究 Flutter 的状态管理,正愁没有合适的项目。...因为简单的示例代码很难体现状态管理的价值,而过于复杂的项目在背景铺垫上又很困难。我正想设计一个复杂程度适中的,有一定交互效果的,数据状态间有一些的依赖关系应用。...也就是说这本小册阐述的是 RegExpo 从无到有的过程,在这个过程中,引发的一系列思考和注意点都会在本册中进行讨论。所以这本小册是 RegExpo 的萌生和发芽的起点,而非开花结果的终点。...的状态管理和代码结构产生自己的理解,并将其运用到日常开发之中。

    60940

    Dart中的const,Flutter,Dart,React Native

    它还设置了一个有状态的部件,用于演示在应用程序状态更改时如何更新用户界面。 开发工具 Flutter 在开发工具的选择上很灵活。... ); } 运行结果为填充屏幕的浅蓝色容器部件: 无状态 VS 有状态 部件有两种形式:无状态和有状态。... @override  State createState() {   return MyWidgetState();  } } 有状态部件返回一个负责为给定状态构建部件树的 State 类。...例如,将代码重构为 StatefulWidget,因为动画是状态更改,并且将 AnimationController 传递给 State 类允许在构建部件时使用动画值。...许多可用的开源插件都是使用平台通道上的消息传递构建的。要了解如何使用平台通道,Flutter 文档包含一个演示访问本机电池 API 的文档。

    6300

    2021 年值得期待的 Flutter 数据流管理方案

    希望读者对Flutter 已经有一定的基础,并且了解声明式UI。下面就一起开始吧 1. 什么状态才需要使用数据流管理方案?...其次,在设计状态结构的时候,需要先考虑到状态分为 Ephemeral State (瞬时状态,也称为本地状态) 和 App State。...对于 App State, 有以下几种方式可以考虑状态传递与刷新: InheritedWidget:  Flutter 提供的功能性组件,用来与子孙节点共享数据 Event Bus:一个全局的单例,相当于是借助全局的静态变量...InheritedWidget InheritedWidget 是 Flutter 提供的一种非常重要的功能型组件,它的作用是:把祖先节点的状态传递到子孙节点,而不需要通过层层传递参数。...null : _inheritedWidgets[T]; return ancestor; } 但是请注意:_inheritedWidgets 以类型为索引,保存了所有类型的祖先节点,由于是用

    2K20

    2020 Flutter开源资源索引

    2020 Flutter开源资源索引 一张图为开发体验Flutter需要考察到的知识点 1....(3)混编过程中的多实例问题 需要注意的是,与纯 Flutter 应用不同,原生应用混编 Flutter 由于涉及到原生页面与 Flutter 页面之间切换,因此导航栈内可能会出现多个 Flutter...为了解决混编工程中 Flutter 多实例的问题,业界有两种解决方案:以今日头条为代表的修改 Flutter Engine 源码,使多 FlutterView 实例对应的多 Flutter Engine...(4)数据状态管理框架 InheritedWidget、Notification 和 EventBus 这 3 种数据传递机制,通过它们可以实现组件间的单向数据传递。...所以,为了使用 Provider,我们需要解决以下 3 个问题: 资源(即数据状态)如何封装? 资源放在哪儿,才都能访问得到? 具体使用时,如何取出资源

    1.6K60

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础的 Flutter Widget,原因在于很多基础的组件有很多容易忽视的注意事项,了解并熟悉后对整体的开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...LengthLimitingTextInputFormatter】 this.onTap, // 点击时回调 }) 分析源码可得,TextField 是有状态...StatefulWidget,有丰富的属性,自定义化较高,实践中需要合理利用各种回调; 案例尝试 和尚尝试最基本的 TextField,区分默认状态和获取焦点状态; return TextField(...decoration 为边框修饰,可以借此来调整 TextField 展示效果;可以设置前置图标,后置图片,边框属性,内容属性等,和尚会在后续集中尝试;若要完全删除装饰,将 decoration 设置为空即可...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型

    4.7K51

    提到生命周期,我们是在说什么?

    ,所以我们可以在这里做一些初始化工作,比如为状态变量设定默认值。...我们需要在这个函数中,根据父Widget传递过来的初始化配置数据,以及State的当前状态,创建一个Widget,然后返回。...当State对象被永久地从视图树中移除时,Flutter会调用dispose函数。而一旦到这个阶段,组件就要被销毁了,所以我们可以在这里进行最终的资源释放、移除监听、清理环境,等等。 ?...而在Flutter中,我们可以利用WidgetBindingObserver类,来实现同样的需求。 接下来我们就来看看,具体如何实现这样的需求。...生命周期回调 didChangeAppLifecycleState回调函数中,有一个参数类型为AppLifecycleState的枚举类,该枚举类是Flutter对App生命周期状态的封装。

    1.7K10

    (译)Dart2.12版本发布,可靠的空安全,dart:ffi正式投入生产

    通过选择空安全性,您可以在开发过程中捕获空错误,从而防止生产崩溃。 合理的空安全性是围绕一些核心原则设计的。让我们重新审视这些原则如何影响您作为开发人员。...Google Pay小组在Flutter代码中发现了一些错误,这些错误会在尝试State在上下文之外访问Flutter对象时失败的Widget。...Flutter小组发现了一个错误,如果将该错误null传递给中的scene参数,Flutter引擎可能会崩溃Window.render()。...当Dart分析您的代码并确定某个变量不可为空时,该变量始终为不可为空。Dart与Swift共享可靠的安全性,但其他编程语言却很少。...由于Dart确保不可为空的变量永远不会为null,因此Dart可以进行优化。

    2.7K20
    领券