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

如何在向有状态小部件中的颤动文本添加翻译时停止无限循环

在向有状态小部件中的颤动文本添加翻译时停止无限循环,可以通过以下步骤实现:

  1. 首先,需要在小部件的状态中添加一个布尔值变量,用于控制循环的停止和启动。可以命名为isTranslating,初始值设为false
  2. 在小部件的构建方法中,使用AnimatedBuilder包裹需要颤动的文本部分,并将isTranslating作为依赖项传递给AnimatedBuilder
  3. AnimatedBuilderbuilder回调函数中,根据isTranslating的值来决定是否执行颤动动画。如果isTranslatingtrue,则执行颤动动画;如果为false,则停止动画。
  4. 在执行翻译操作时,将isTranslating设置为true,表示开始执行颤动动画。
  5. 当翻译完成后,将isTranslating设置为false,表示停止颤动动画。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class ShakingTextWidget extends StatefulWidget {
  @override
  _ShakingTextWidgetState createState() => _ShakingTextWidgetState();
}

class _ShakingTextWidgetState extends State<ShakingTextWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  bool isTranslating = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = Tween(begin: 0.0, end: 10.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linear,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void startTranslation() {
    setState(() {
      isTranslating = true;
    });
    _animationController.repeat(reverse: true);
    // 执行翻译操作
    // ...
    // 翻译完成后调用stopTranslation方法
  }

  void stopTranslation() {
    setState(() {
      isTranslating = false;
    });
    _animationController.stop();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext context, Widget child) {
        return Transform.translate(
          offset: Offset(_animation.value, 0.0),
          child: Text(
            'Shaking Text',
            style: TextStyle(fontSize: 16.0),
          ),
        );
      },
    );
  }
}

在上述示例代码中,ShakingTextWidget是一个有状态的小部件,通过控制isTranslating变量的值来启动和停止颤动动画。在startTranslation方法中,将isTranslating设置为true,并调用_animationController.repeat(reverse: true)来启动动画循环。在翻译完成后,调用stopTranslation方法将isTranslating设置为false,并调用_animationController.stop()停止动画循环。

这样,当执行翻译操作时,文本将开始颤动;翻译完成后,文本将停止颤动。

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

相关·内容

【Flutter】自定义滚动开关

它没有跟上实际状态。为了保持状态,它将调用onChanged属性。假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效,开关小部件会失效。...该演示视频展示了如何在颤动创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...在小部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式文本。...*我们将添加textOn是字符串' Yes '表示当开关打开文本将显示在按钮上;当textOff是字符串' No '意味着当开关关闭文本将显示在按钮上。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

33.3K60

Flutter 流体滑块

下面的演示视频显示了如何在颤动创建流畅滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...在内部,我们将添加值,表示此滑块当前选择值。添加将为流体滑块创建变量。当用户开始为滑块选择新值,我们将添加onChanged方式调用。在内部,我们将添加**setState()。...在内部,我们将在value方法添加一个变量;max表示最大值 是用户可以选择值,并且大于或等于最小值。添加滑块颜色和拇指颜色。在此滑块,我们将添加开始意味着小部件将显示为最小标签。...如果未提供,则该max值将显示为文本。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建第三个“流体”滑块。...在此滑块,我们将在value方法添加一个变量,滑块颜色,onChanged,mapValueToString表示将双精度值映射到String文本回调函数。

11.6K20
  • 开始使用-编写你第一个Flutter应用程序 顶

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...lib/main.dart 第3步:添加一个状态部件状态部件是不可变,这意味着它们属性不能改变 - 所有的值都是最终状态部件保持在小部件生命周期中可能改变状态。...在这一步,您将添加一个状态部件RandomWords,它创建其状态类RandomWordsState。 State类将最终维护小部件建议和最喜欢单词对。...1.RandomWordsState构建方法AppBar添加列表图标。 当用户点击列表图标,包含收藏夹项目的新路线被推送到导航器,显示该图标。...实现一个状态部件,为你应用增加交互性。 用ListView和ListTiles创建一个延迟加载无限滚动列表。 创建了一条路由并添加了在主路由和新路由之间移动逻辑。

    9.5K20

    【Flutter】评级对话框组件

    扑朔迷离一切都是小部件! 向用户显示一些知识是一个了不起想法,这是我们使用对话框最基本想法。在Flutter这个惊人UI工具包,我们几种不同方法来构建对话框。...在小部件内,我们将添加一个Center小部件,并且其子属性添加一个「MaterialButton()。「在此按钮,我们将添加文本,颜色,按钮形状和onPressed方法。...在此方法,我们将添加」_showRatingAppDialog」小部件。我们将在下面对其进行深入描述。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。...在此对话框,我们将添加」ratingColor」表示评级栏(星形图标和发光效果)颜色,「标题」,「消息」表示对话框消息/描述文本,「图像」,「submitButton」表示提交按钮标签/文本,「...当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 在此对话框,您将看到我们将添加图像,标题,描述,星级,评论textField和最后一个提交按钮。

    4K50

    用wxPython打造Python图形界面(上)

    这是一个很好应用程序,演示了wxPython包含绝大多数小部件。演示允许开发人员在一个选项卡查看代码,并在第二个选项卡运行代码。...当用户在应用程序处于焦点键入内容,或者当用户使用鼠标按下按钮或其他小部件,就会发生事件。 在幕后,GUI工具包正在运行一个无限循环,称为事件循环。...当你阻止一个事件循环,GUI将变得无响应并对用户显示为冻结状态。 在GUI启动任何进程,如果耗时超过四分之一秒,都应该作为单独线程或进程启动。这将防止GUI冻结,并为用户提供更好用户体验。...但是,这个应用程序并没有做很多事情,所以让我们花点时间来了解一些你可以添加其他小部件。 小部件 wxPython工具包100多个小部件可供选择。...当你将panel小部件添加到框架,并且该面板是框架唯一子元素,它将自动展开以填充框架。 下一步是添加一个wx.textcrl到面板。几乎所有小部件第一个参数都是小部件应该指向哪个父部件

    4.9K40

    Qt DesignerQWidget属性表介绍

    提示信息,就是当鼠标放到控件上,会浮动出一个框显示提示信息。...这个属性也有国际化属性 ---- accessibleName是辅助阅读显示部件名称,对于大多数小部件,是无需设置此属性,因为Qt会调用部件相关属性显示,如按钮将显示按钮文本,但当小部件不提供任何文本...消除歧义(澄清):这是当多个需要翻译文字对象相同文字,避免出现歧义而额外添加消除歧义字符,缺省为空,一般歧义字符设置为其所在对象对应类名字,此消歧参数是为转换器指定注释首选方法。...3、comment注释:添加注释用于辅助对属性文字翻译,注释将在翻译属性文字传递到翻译函数tr()并与需要翻译对象关联,这样会有助于理解翻译文字含义。...当部件状态切换,默认图标绘制函数会自动根据部件状态重绘图标 Ⅱ、enum State { Off, On } 某些部件还有所谓开关状态(比如一个按钮可以按下和弹起两个状态), 则还可以根据

    10.7K20

    Flutter常见开发问题

    想象一下 Android 一个按钮。它具有文本等属性,可让您按钮添加文本。但是 Flutter 按钮不是将标题作为字符串,而是另一个小部件。...这意味着**在按钮内你可以文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。这也让您可以非常轻松地制作自定义小部件,而在 Android 制作自定义视图是一件相当困难事情。...为确保您应用在设备上进行所有更改,请考虑再次停止并运行该应用。 state是什么意思?什么是 setState()? **简单来说,“状态”是小部件变量值集合。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数更改内容,因此需要在小部件层次结构位置点上方完成。

    6.7K20

    Flutter常见开发问题

    从按钮到布局结构一切都是小部件。这里优势在于可定制性。想象一下 Android 一个按钮。它具有文本等属性,可让您按钮添加文本。...但是 Flutter 按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。...为确保您应用在设备上进行所有更改,请考虑再次停止并运行该应用。 state是什么意思?什么是 setState()? **简单来说,“状态”是小部件变量值集合。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数更改内容,因此需要在小部件层次结构位置点上方完成。

    6.8K30

    不懂底层程序员不是好程序员,解密代码在计算机运行原理

    计算机基本架构 想要了解程序如何在计算机运行,以及C/C++编程设计内存、地址、指针等概念,就必须要先了解计算机基本架构; ?...在中央处理器控制部件,包含寄存器指令寄存器(IR)和程序计数器(PC)。在中央处理器算术及逻辑部件,包含寄存器累加器(ACC)。...在C++程序函数在实参传递时会将实参存入寄存器,需要反复重复使用变量也最好放到寄存器。...由于CPU运行速度远高于内存读写速度,因此CPU如果直接从内存存取数据就需要等待一定时间,但是Cache能保存着CPU刚用过或循环使用一部分数据,这样当下次CPU使用该部分数据可从Cache中直接调用...同时更新部分状态标志位,零标志 (Zero)、进位标志 (Carry) 和溢出标志 (Overflow)。 7、输出操作数,若输出也是指令一部分CPU 还需要存储其结果操作数。 ?

    1.4K20

    循环神经网络 – Recurrent Neural Network | RNN

    RNN 应用和使用场景 只要涉及到序列数据处理问题,都可以使用到,NLP 就是一个典型应用场景。 ? 文本生成:类似上面的填空题,给出前后文,然后预测空格词是什么。...查看详情 维基百科版本 循环神经网络(RNN)是一类神经网络,其中节点之间连接形成一个图沿着序列。这允许它展示时间序列时间动态行为。...有限脉冲递归网络是一种无环图,可以展开并用严格前馈神经网络代替,而无限脉冲循环网络是一种无法展开循环图。...有限脉冲和无限脉冲周期性网络都可以具有额外存储状态,并且存储可以由神经网络直接控制。如果存储包含时间延迟或具有反馈循环,则存储也可以由另一个网络或图表替换。...这种受控状态称为门控状态或门控存储器,并且是长短期存储器网络(LSTM)和门控循环单元一部分。 查看详情

    1.3K20

    入门 | 一文简述循环神经网络

    但想一下如果是文本生成或文本翻译呢?所有生成单词与之前生成单词都是独立(有些情况下与之后单词也是独立,这里暂不讨论)。所以你需要有一些基于之前输出偏向。这就是需要 RNN 地方。...RNN 对之前发生在数据序列事是一定记忆。这有助于系统获取上下文。理论上讲,RNN 有无限记忆,这意味着它们有无限回顾能力。通过回顾可以了解所有之前输入。...语言建模和文本生成 给出一个词语序列,试着预测下一个词语可能性。这在翻译任务是很有用,因为最有可能句子将是可能性最高单词组成句子。 2....上例只将最后一步作为记忆,因此只与最后一步数据合并。为了提升网络记忆能力,并在记忆中保留较长序列,我们必须在方程添加更多状态 h_t-2、h_t-3 等。...这要靠误差值反向传播和梯度下降来实现。但是前馈网络中使用标准反向传播无法在此应用。 与无环前馈网络不同,RNN 是循环图,这也是问题所在。在前馈网络可以计算出之前层误差导数。

    42330

    入门 | 一文简述循环神经网络

    但想一下如果是文本生成或文本翻译呢?所有生成单词与之前生成单词都是独立(有些情况下与之后单词也是独立,这里暂不讨论)。所以你需要有一些基于之前输出偏向。这就是需要 RNN 地方。...RNN 对之前发生在数据序列事是一定记忆。这有助于系统获取上下文。理论上讲,RNN 有无限记忆,这意味着它们有无限回顾能力。通过回顾可以了解所有之前输入。...语言建模和文本生成 给出一个词语序列,试着预测下一个词语可能性。这在翻译任务是很有用,因为最有可能句子将是可能性最高单词组成句子。 2....上例只将最后一步作为记忆,因此只与最后一步数据合并。为了提升网络记忆能力,并在记忆中保留较长序列,我们必须在方程添加更多状态 h_t-2、h_t-3 等。...这要靠误差值反向传播和梯度下降来实现。但是前馈网络中使用标准反向传播无法在此应用。 与无环前馈网络不同,RNN 是循环图,这也是问题所在。在前馈网络可以计算出之前层误差导数。

    43130

    13 个 Python 开发者都应该知道实用技巧

    传递参数而不声明 这个技巧将让您在函数传递无限参数,而无需在函数体声明它们。...迭代列表 您可能使用循环来迭代列表,但您知道 python 什么惊人迭代列表并在其上执行函数吗?看下面示例代码。...Yield魔力 Yield 是 Python 一个关键字,用于在不破坏其当前状态和局部变量情况下从函数返回,并且当再次调用该函数,yield 将从最后一个 yield 语句执行该函数。...局部变量和全局变量 这个技巧将指导您如何在函数声明全局变量和局部变量,通过查看下面的示例代码,您可以了解它们区别。...智能字典 很多 Python程序员使用括号方法来访问字典中键值数据,但是,当您遇到关键错误时,程序将停止,为了避免这个运行时发生错误,您可以获取一种方法来访问字典键值。

    50930

    目录

    目录 使用Tkinter构建你第一个Python GUI应用程序 添加部件 测验 使用小部件 使用标签小部件显示文本和图像 显示带有按钮小部件可点击按钮 通过条目小部件获取用户输入 通过文本部件获取多行用户输入...使用tk.Label窗口添加一些文本。...在本节,你将学习如何通过在发生某些事件执行操作来使应用程序栩栩生。 使用事件和事件处理程序 创建Tkinter应用程序时,必须调用window.mainloop()以启动事件循环。...此方法为你处理了循环两个部分: 它维护已发生事件列表。 每当新事件添加到该列表,它将运行事件处理程序。...按下此按钮,应该将标签值减小1。要执行此操作,需要知道两件事: 你如何在获取文字Label? 如何更新文字Label? Label小部件没有.get()喜欢Entry,Text小部件没有。

    29.7K20

    采用QWebEngineView引擎设计web浏览器

    web视图是Qt WebEngine,它是web浏览模块主要小部件组件。它可以用于各种应用程序,以实时显示来自Internetweb内容。...loadStarted()信号在视图开始加载发出,loadProgress()信号在web视图某个元素(嵌入式图像或脚本)完成加载发出。...该小部件具有一个上下文菜单,可根据手头元素进行定制,并包括在浏览器中有用操作。对于自定义上下文菜单,或在菜单或工具栏嵌入操作,可通过pageAction()使用单个操作。...web视图维护返回操作状态,但允许修改操作属性,文本或图标。动作语义也可以通过triggerPageAction()直接触发。...terminationStatus是进程终止状态,exitCode是进程终止使用状态代码。

    2.5K10

    系统设计面试指南之分布式任务调度

    使用无环图(DAG)存储依赖任务数据图数据结构非关系数据库。 ③ Batching and prioritization(批处理和优先级) 将任务存储在 RDB 后,将任务分批。...K值取决许多因素,: 当前可用资源 客户端 或任务优先级 订阅级别 ④ Queue manager(队列管理器) 队列管理器在队列添加、更新或删除任务。它跟踪我们使用队列类型。...指定时间后停止任务执行,释放资源并分配给队列下一任务。若由于执行上限而停止任务执行,系统会通知所属用户这些实例。他们需针对这种情况采取人工兜底。 5 任务紧急执行 有些任务需紧急执行。...所以,须考虑如何在非高峰时段更好利用资源及如何在高峰时段保持资源可用。 有些任务无需紧急执行。Facebook社交应用,建议好友不是紧急任务。...可为不同类型任务添加更多队列。还可根据资源与需求比添加更多资源。 8.4 容错性 任务在首次发送执行时不会从队列删除。如果执行失败,将尝试最大允许次数重试。

    16710

    系统设计面试指南之分布式任务调度

    使用无环图(DAG)存储依赖任务数据图数据结构非关系数据库。 ③ Batching and prioritization(批处理和优先级) 将任务存储在 RDB 后,将任务分批。...K值取决许多因素,: 当前可用资源 客户端 或任务优先级 订阅级别 ④ Queue manager(队列管理器) 队列管理器在队列添加、更新或删除任务。它跟踪我们使用队列类型。...指定时间后停止任务执行,释放资源并分配给队列下一任务。若由于执行上限而停止任务执行,系统会通知所属用户这些实例。他们需针对这种情况采取人工兜底。 5 任务紧急执行 有些任务需紧急执行。...所以,须考虑如何在非高峰时段更好利用资源及如何在高峰时段保持资源可用。 有些任务无需紧急执行。Facebook社交应用,建议好友不是紧急任务。...可为不同类型任务添加更多队列。还可根据资源与需求比添加更多资源。 8.4 容错性 任务在首次发送执行时不会从队列删除。如果执行失败,将尝试最大允许次数重试。

    30110

    Flutter 1.22 正式发布

    但是,在此版本,我们将最佳做法意见纳入了我们工具,甚至在添加l10n信息启用了热重装支持来更新您应用。 ?...这个想法是要在导航和Flutter其余部分之间统一模型,同时解决许多问题并添加功能。实际上,这个例子几乎不涉及Navigator 2.0内容。...发生这种情况,操作系统会通知该应用被终止以快速保存任何UI状态,以便在用户循环回到该应用时可以将其恢复。正确实施后,可以为用户提供无缝体验,同时可以更好地利用设备资源。...为了自动测试状态恢复,我们WidgetTester添加了新restartAndRestore API。...= true; run(MyApp()); } 根据所涉及频率差异,启用此标志可以使滚动颤动减少多达97%。

    7.5K20
    领券