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

在构建期间调用setState()或markNeedsBuild()。尝试在flutter中创建一个简单的计时器

在Flutter中,可以使用setState()或markNeedsBuild()方法来在构建期间更新UI。这两个方法都是用于通知Flutter框架重新构建widget树。

  1. setState()方法:
    • 概念:setState()是StatefulWidget类中的一个方法,用于通知Flutter框架重新构建widget树,并更新UI。
    • 分类:setState()属于Flutter框架的核心方法,用于管理widget的状态和重绘。
    • 优势:通过setState()方法,可以实时响应用户交互或数据变化,更新UI,提供良好的用户体验。
    • 应用场景:常用于处理用户交互、数据变化等需要更新UI的场景。
    • 推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mapp)
  • markNeedsBuild()方法:
    • 概念:markNeedsBuild()是Element类中的一个方法,用于标记当前widget需要重新构建。
    • 分类:markNeedsBuild()属于Flutter框架的底层方法,用于管理widget的重绘。
    • 优势:通过markNeedsBuild()方法,可以标记widget为"dirty"状态,告知Flutter框架需要重新构建该widget。
    • 应用场景:常用于自定义widget或底层开发中,需要手动触发widget的重绘。
    • 推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mapp)

在Flutter中创建一个简单的计时器的示例代码如下:

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

void main() {
  runApp(TimerApp());
}

class TimerApp extends StatefulWidget {
  @override
  _TimerAppState createState() => _TimerAppState();
}

class _TimerAppState extends State<TimerApp> {
  int _seconds = 0;
  bool _isRunning = false;

  @override
  void initState() {
    super.initState();
    startTimer();
  }

  void startTimer() {
    _isRunning = true;
    Future.delayed(Duration(seconds: 1), () {
      if (_isRunning) {
        setState(() {
          _seconds++;
        });
        startTimer();
      }
    });
  }

  void stopTimer() {
    _isRunning = false;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Timer App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Seconds: $_seconds',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              RaisedButton(
                child: Text('Stop Timer'),
                onPressed: stopTimer,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例中,我们创建了一个简单的计时器应用。通过使用setState()方法,每秒钟更新一次计时器的秒数,并在界面上显示出来。同时,通过点击按钮调用stopTimer()方法,可以停止计时器的运行。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mapp)

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

相关·内容

Flutter 绘制探索 4 | 深入分析 setState 重建和更新 | 七日打卡

这个系列便是对 Flutter 绘制探索,通过测试、调试及源码分析来给出一些绘制时被忽略从未知晓东西,而有些要点如果被忽略,就很可能出现问题。...---- 一、铁打的营盘流水兵 1. 测试案例 这小结将通过一个测试来说明, Flutter 刷新时,什么变,什么不在变。这对理解 Flutter 来说至关重要。...StatefulWidget,使用 Timer.periodic 创建一个定时计时器,每 3 秒触发一次,修改激活索引,并执行 _ColorChangeWidgetState#setState 来重构界面...第一篇也说过,对于有 滑动 动画 需求绘制,重建触发频率非常大,此时即使对象是 轻量,也会在短时间内创建大量对象,这样不是很好。...现在也就是即将调用这个 Element 对象 markNeedsBuild() 方法。 ? ---- 下一步就会进入 Element.markNeedsBuild,也就是 Element 类

1.7K20

FluttersetState更新原理和流程

分析 Flutter状态类: StatelessWidget:无状态类,没有状态更新,界面一经创建无法更改; StatefulWidget:有状态类,当状态改变,调用setState()方法会触发StatefulWidget...也就是只有当我们类是有状态类时候才能进行状态刷新,setState也是State(有状态类)类里 解析 :framework.dart文件State类 调用 setState() 必须是没有调用过..._element.markNeedsBuild(); } setState方法除了一些条件判断就是:_element.markNeedsBuild();那我们看看markNeedsBuild。...UI 绘制逻辑【附加】 UI 绘制逻辑是 Render 树实现,所以这里还来细看 RendererBinding 逻辑。...等待下一次vsync信号到来, 然后再经过层层调用最终会调用到 Window::BeginFrame() UI 绘制逻辑是 Render 树实现 更新帧信号来临从而刷新需要重构界面 drawFrame

72920

Flutter | 启动,渲染,setState 流程

前言 用了这么久 Flutter 了,居然都不知道他启动过程,真的是学之有愧啊,今天我们来分析一下 Flutter 启动流程,以及他渲染过程,对其做一个简单剖析。...启动流程 Flutter 启动入口 lib/main.dart 里 main() 函数,他是 Dart 应用程序起点,main 函数中最简单实现如下: void main() => runApp...组件树构建完毕后,回到 runApp 实现,当调完 attachRootWidget 后,最后一行会调用 WidgetsFlutterBainding 实例 scheduleWarmUpFrame...scheduleAttachRootWidget:该方法后续,会创建根 Element ,调用 mount 完成 element 和 RenderObject 树创建 scheduleWarmUpFrame...上屏,会将绘制出bit数据发送给GPU .....///// } } 复制代码 以上,便是 setState 调用大概过程,实际流程会更加复杂一点,例如在这个过程不允许再次调用 setState

1.1K10

Widget生命周期和渲染原理

好,现在我们知道了通过setState来根据数据自动调整UI原理了,因此,原则上我们是可以不调用setState而直接给element调用markNeedsBuild函数来实现UI更新,即: StatefulWidget...Widget渲染原理 关于Widget渲染,我Widget,构建Flutter界面的基石中有过介绍,本文也是依次为基准,再做一些拓展介绍。...接下来总结一下StatefulWidget渲染流程: 创建一个StatefulWidget之后,Flutter Frame会调用StatefulWidgetcreateElement()函数,该函数中会创建一个...StatefulElement; StatefulElement构建函数调用了widgetcreateState函数来创建State,并且给创建出来State对象element和wiget...当创建一个Widget之后,Flutter Framework必然会调用createElement创建Element对象并将其加入到Element树当中,之后Flutter Framework会接着调用

1.2K20

flutter渲染详解

_newWidget = this; element.markNeedsBuild(); // markNeedsBuildsetState更新原理和流程有讲到 } return...可能会更新旧子级,返回子级[Element]. inflateWidget ///为给定小部件创建一个元素,并将其添加为该元素子元素给定插槽元素。.../// ///如果给定小部件具有全局键并且已经存在一个元素有一个带有该全局键小部件,此函数将重用该元素 ///(可能从树其他位置移植重新激活从无效元素列表获取),而不是创建一个新元素。...///如果任何预定帧已经开始其他[scheduleWarmUpFrame]已被调用,此调用将被忽略。 ///首选[scheduleFrame]正常操作下更新显示。...FrameCallbacks Frame绘制期间,有三个callbacks列表会被调用,这三个列表是SchedulerBinding类成员,它们调用顺序如下: 顺序 内容 transientCallbacks

1.2K20

Flutter 极限测试】连续 1000000 次 setState 会怎么样

测试描述 可能很多人会认为,每次 State#setState 都会触发当前状态类 build 方法重新构建。但真的是这样吗,你真的了解 Flutter 界面的更新流程吗?...源码调试分析 如下, State#setState 源码可以看出,它只做了两件事: 触发入参回调 fn 。 执行持有元素 markNeedsBuild 方法。...此时该 State 持有的 _element 对象类型是 StatefulEmement ,也就是 MyHomePage 组件创建元素。... Elememt#markNeedsBuild 方法没有一个非常重要判断,那就是下面 4440 行 ,如果 dirty 已经是 true 时,则直接返回,不会执行接下来方法。...也就是说,两帧之间,无论调用多少次 setState ,都只会触发一次, 元素标脏 和 申请新帧调度 。这就是为什么连续触发 1000000 次,并无大事发生原因。

60830

Flutter完整开发实战详解(十五、全面理解State与Provider)

了解这个两个概念后,我们先看下图, Flutter 构建一个 Widget ,首先会创建出这个 Widget Element ,而事实上 State 实现跨帧共享,就是将 State 保存在Element...如下图所示,StatefulWidget createState 是 StatefulElement 构建方法里创建, 这就保证了只要 Element 不被重新创建,State 就一直被复用...问题就在于前面 StatefulElement 构建方法和 update 方法: State 只 StatefulElement 构建方法创建,当我们调用 setState 触发 update...我们常说 setState ,其实是调用markNeedsBuildmarkNeedsBuild 内部会标记 element 为 diry,然后在下一帧 WidgetsBinding.drawFrame...状态共享是常见需求,比如用户信息和登陆状态等等,而 Flutter InheritedWidget 就是为此而设计第十二篇我们大致讲过它: Element 内部有一个 Map<Type

3.5K21

Flutter(六)--有状态组件StatefulWidget&StateFlutter(六)--有状态组件StatefulWidget&State

//各种异常判断略过 _element.markNeedsBuild(); } //调用setState之后会调用didUpdateWidget方法进行更新,真正组件更新在此方法中进行...//更新完成后通知其他被标记组件继续更新 onBuildScheduled(); } //组件更新时候系统会调用一个update方法; // //在此方法didUpdateWidget...setState创建newWidget,但State是复用。...2.FlutterWidget都是不可变,所以flutter可变组件有Widget(UI)和State(管理状态)两个类组成。 ---- Widget生命周期 ?...转载自jzoom_flutter生命周期.png 大致可以看成三个阶段: 1. 初始化(插入渲染树) 2. 状态改变(渲染树存在) 3.

78120

Flutter进阶-Key之GlobalKey

我们这不做深入讨论,只需要知道element树构建中是会将owner传递,即共享一个owner对象。...到这应该大家就明白了,widget创建时候,会将GlobalKey和element对应关系注册到owner_globalKeyRegistry。...实现原理: 开始探索原理之前,我们需要明白setState流程,我们简单过一下,setState之后,会将当前widget(MyHomePage)markNeedsBuildmarkNeedsBuild...答案是有的,inflateWidget递归构建element树时,会判断widget key是否是GlobalKey,是的话尝试调用_retakeInactiveElement,_retakeInactiveElement...答案是会,但是build方法调用不代表我们widget被重新绘制,Flutterbuild方法是生成widget配置信息,是很轻量也是会被频繁调用

1.7K20

Flutter 组件集录 | InheritedNotifier 内置状态管理组件

并通过一个简单模拟下载进度案例,介绍了它使用方式: 案例演示 监听-通知关系 上一节通过全局变量来维护 ProgressValueNotifier 类型 progress 对象,让它可以代码任何位置被访问到...可以看到 DetailProgressView 此时可以是 StatelessWidget , 但依然会被通知,从而重新构建。这是一种非 State#setState 更新状态方式。...:使用了 of 获取数据组件,可监听对象发生通知时会触发重新构建。...了解 Flutter 框架都知道 State#setState 本质上也就是触发了持有 Element markNeedsBuild 方法。...如下所示,此时其中是 HomeProgressView 对应元素: 也就是说,接下来 HomeProgressView 对应元素触发 didChangeDependencies,其中调用markNeedsBuild

23220

flutter源码:setState分析

setState方法算是flutter使用最频繁方法了,每次页面数据有改变,都需要调用这个方法,去触发页面的刷新,展示最新UI效果,接下来从源码角度解读下setState后具体发生了什么 系统源码部分...markNeedsBuild(); } 上面可以看到,回调方法VoidCallback fn是马上会被同步执行,然后调用这个widget对应elementmarkNeedsBuild方法 void...scheduleBuildFor(this); } 就是把这个element标记为dirty,如果已经标记过,则忽略,说明连续调用两次setState方法,第二次其实是多余,然后是调用owner...scheduleBuildFor方法 这里owner,是BuildOwner,先记住全局只有一个BuildOwner实例,它是启动时候创建,这里先不展开说明,我们先记住全局就一个owner就好...总结 setState其实就是告诉系统,在下一帧刷新时候,需要更新当前widget,整个过程,是一个异步行为,所以下面的三个写法,效果上是一样 // 写法一 _counter++;

45910

干货 | 携程火车票Flutter最佳实践

Flutter是由谷歌开源跨平台框架,可以快速 iOS 和 Android 上构建高质量原生用户界面。...RN 能够满足我们绝大部分业务,并且热更、版本控制都很灵活。但是复杂页面上,特别是长列表渲染上,还是存在一定问题,促使我们去尝试一些新解决方案。...我们根Widget继承了InheritedWidget,然后该组件存放一个数据data,那么可以在任意子Widget来获取该组件数据并使用。...FlutterDart应用程序源代码级调试。 调试FlutterDart应用程序内存使用情况和分析内存问题。 查看运行FlutterDart应用程序一般日志和诊断信息。...如上图所示列表 Item 存在大量倒计时。一定要控制刷新倒计时只影响控件本身,并且只有可视区域视图是刷新,不可见情况下及时销毁计时器。一直刷整个列表,性能开销是恐怖

2.1K30

Flutter学习之构建、布局及绘制三部曲

构建 初次构建 flutter入口main方法直接调用了runApp(Widget app)方法,app参数就是我们根视图Widget,我们直接跟进runApp方法 void runApp(...方法确定当前Element整个树种位置并插入,RenderObjectElementmount方法来创建RenderObject对象并将其插入到渲染树,让后再回到RenderObjectToWidgetElement...Element)mount方法主要是确定当前Element整个树种位置并插入;ComponentElement(第二层)mount方法先构建Widget树,让后再递归更新(包括重用,更新,直接创建...通过setState触发构建 通常我们应用要更新状态都是通过StatesetState方法来触发界面重绘,setState方法就是先调用了callback让后调用该StateElement对象...markNeedsBuild方法,markNeedsBuild中将Element标记为dirty并通过BuildOwner将其添加到dirty列表调用onBuildScheduled回调(WidgetsBinding

96110

Flutter | 一文搞懂 BuildContext

其实在 SetState ,最终也是调用 markNeedsBuild 方法,如下: void setState(VoidCallback fn) { assert(fn !...markNeedsBuild(); } 复制代码 我们写代码过程还会发现一个问题,就是要更新状态不是必须要写在 setState 里面,只要写在 setState 上面 即可,这样也没有问题,...但是最后发现了这个问题弊端了,如大多数人会在每个方法后面加一个 setState,导致过度开销,并且删除时候也是不知道这个这个 setState 到底有没有实际意义,这就会造成一些不必要麻烦...所以 Flutter setState 中加了一个回调,我们可以需要更新状态直接放在回调里面,和状态没关系放在外边即可。...上面这些方法源码还是有一些使用栗子,例如: Scaffold.of(context).showSnackBar() Scaffold 底部显示一个 SnackBar static ScaffoldState

51630

Flutter完整开发实战详解(十一、全面深入理解Stream)

一、Stream 由浅入深 Stream Flutter 是属于非常关键概念, Flutter ,状态管理除了 InheritedWidget 之外,无论 rxdart,Bloc 模式,flutter_redux... Flutter ,Dart Zone 启动是 _runMainZoned 方法 ,如下代码所示 _runMainZoned @pragma("vm:entry-point") 注解表示该方式是给...二、StreamBuilder 如下代码所示, Flutter 通过 StreamBuilder 构建 Widget ,只需提供一个 Stream 实例即可,其中 AsyncSnapshot 对象为数据快照...中会调用 _subscribe 方法,从而调用 Stream listen,然后通过 setState 更新UI,就是这么简单有木有?...我们常用 setState 其实是调用markNeedsBuildmarkNeedsBuild 内部标记 element 为 diry ,然后在下一帧 WidgetsBinding.drawFrame

3.5K41
领券