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

当一个statefulwidget中的按钮被点击时,如何在另一个statefulwidget中设置setstate?

当一个statefulwidget中的按钮被点击时,可以通过回调函数的方式在另一个statefulwidget中设置setState。

首先,在第一个statefulwidget中定义一个回调函数,用于处理按钮点击事件。该回调函数将在按钮被点击时被调用,并将需要更新的状态作为参数传递给第二个statefulwidget。

代码语言:txt
复制
class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {
  bool _isButtonClicked = false;

  void _handleButtonClick() {
    setState(() {
      _isButtonClicked = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _handleButtonClick,
      child: Text('Click Me'),
    );
  }
}

然后,在第二个statefulwidget中接收回调函数,并在需要更新的地方调用setState来更新状态。

代码语言:txt
复制
class SecondWidget extends StatefulWidget {
  final Function setStateCallback;

  SecondWidget({this.setStateCallback});

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

class _SecondWidgetState extends State<SecondWidget> {
  bool _isButtonClicked = false;

  void _updateState() {
    setState(() {
      _isButtonClicked = widget.setStateCallback();
    });
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _updateState,
      child: Text('Update State'),
    );
  }
}

最后,在父widget中将第一个statefulwidget和第二个statefulwidget组合在一起,并将回调函数传递给第二个statefulwidget。

代码语言:txt
复制
class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _isButtonClicked = false;

  bool _handleButtonClick() {
    setState(() {
      _isButtonClicked = true;
    });
    return _isButtonClicked;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FirstWidget(),
        SecondWidget(setStateCallback: _handleButtonClick),
      ],
    );
  }
}

这样,当第一个statefulwidget中的按钮被点击时,会触发回调函数,然后在第二个statefulwidget中调用setState来更新状态。

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

相关·内容

Flutter BottomNavigation 底部导航详解 及问题记录

以及是否粘贴到底部,和导航个数 在app主页面,home指向底部导航栏组件 home: BottomNavigation(), 底部导航栏组件集成 StatefulWidget 在内部创建一个带有状态组件...= 0xFFFA8C16; 这里多数一句 Flutter 提供了两套预设主题UI 这些UI有很多常量可以直接引入使用 颜色, 按钮,图标 Colors.white // 白色颜色 Icons.home...// home 图标 FloatingActionButton // 漂浮按钮 效果图 在colors.dart查看预设颜色值 在icons.dart查看预设图标 源码 三个文件 main.dart...void关键字修饰, 使用setState 来修改内部变量 问题1: 假如页面停留在首页, 此时来了一个消息,需要在消息导航栏上加上徽标,该如何处理?...问题2: 假如现在要做换肤功能,那要如何做? 问题3: 目前dart辨析时候,有很多括号, 格式不够优美,有没有第三方,成熟组件以供使用 问题4: 如何在页面切换 ,使用动画,自己写?

3.1K10

在 Flutter 创建可拖动浮动操作按钮

本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置。 创建可拖动浮动操作按钮 我们将为这样小部件创建一个类。...该Listener小部件具有onPointerMove可用于反馈指针移动事件,这将被称为参数。...一个浮动动作按钮通常可以在点击执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 参数作为参数。...通常,所需行为是onPressed仅在点击按钮时调用回调,而不是在拖动结束时调用。然而,拖动结束,指针向上事件也会被触发。作为解决方案,我们需要跟踪按钮是否拖动。...Flutter 创建可拖动浮动操作按钮

5.5K10

Flutter | 状态管理

例如 IconButton 是一个图标按钮,他是他是一个无状态 Widget,应为我们父 Widget 需要知道该按钮是否点击来采取相应处理 示例 //---------------------...,抬起,边框消失,点击完成之后,组件颜色改变 对于开发人员来说,只关心组件是否处于 Active 状态,而不会在意边框具体实现,所以,我们将边框状态隐藏在内部,对外只暴露 active 状态...全局状态管理 当应用需要一些跨组件,路由状态需要同步,上面的几种方法便很难胜任了。...比如,在设置页面修改应用语言,为了让设置实时生效,我们期望在语言状态改变,App 依赖语言组件可以重新 build 一下,但是这些依赖语言组件并不在一起,所以这种情况使用上面这几种办法很难管理...方法订阅语言改变事件,当用户切换语言之后,订阅此事件组件就会收到通知,收到通知后重新 setState 即可 2,使用一些专门用于状态管理包, Provider,Redux 等,具体使用可上

66030

Flutter | 基础Widget

基础 Widget 在 Fluter ,几乎所有的都是一个 widget ,与原生开发不同是,widget 范围更加广阔,他不仅可以表示 UI 元素,也可以表示一些功能组件,手势检测 widget...这是因为同一个 Widget 可以添加到 UI 树不同部分,而真正渲染,UI 树一个 Element 都会对应一个 Widget 对象 。...State 表示与其对应 StatefulWidget 要维护状态,State 中保存状态信息可以: 在 widget 构建可以同步读取 在 Widget 生命周期中可以改变, State...但 State 实例只会在第一次插入到树创建,当在重新构建,如果 widget 修改了,flutter framework 会动态设置 state,widget 为最新 widget 实例...在一些场景下,Flutter framework 会将 State 对象重新插入到树,如果包含次 State 对象子树在树一个位置移动到另一个位置(可以通过 GlobalKey 来实现)。

1.2K20

Flutter ——状态管理 | StreamBuild

Stream可以接受任何类型数据,值、事件、对象、集合、映射、错误、甚至是另一个Stream,通过StreamControllersink作为入口,往Stream插入数据,然后通过你自定义监听...单订阅Stream只允许在该Stream整个生命周期内使用单个监听器,即使第一个subscription取消了,你也没法在这个流上监听到第二次事件;而广播Stream允许任意个数subscription...1.这个item是StatefulWidget,点击“关注”,然后setstate(){} 2.使用其他状态管理去实现。...问题1 为何选择使用streamBuild 1.方法一使用StatefulWidget,刷新使用setstate(){},使用setstate(){}刷新,会将整个item 进行重新构建,整个item...,单独一个bloc去管理,我觉得为了一个按钮改变,去做很多操作,有点不值得了。

2.7K31

《Flutter》-- 4.Flutter组件基础

创建一个StatefulWidget组件,同时也会创建一个State对象,StatefulWidget就是通过与State对象进行关联来管理组件状态树。...didUpdateWidget():组件配置发生变化或执行热重载,系统会回调该函数更新视图。...; OutlineButton:默认是一个带有边框、不带阴影且背景透明按钮,按下后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个点击图标按钮,不支持文字,默认没有背景,点击后会出现背景...所有Materail组件库按钮都有两个相同点:一是按下时会有水波动画,另一个是都有一个onPressed属性来设置单击回调。...keyboardAppearance:设置键盘亮度模式,只能在iOS上使用。 onTap:TextField组件点击事件。

12.4K30

Flutter跨平台移动端开发丨Widget、Element、State、状态管理

一个 widget 通常由一些低级别的 widget 组成,flutter 框架依次构建这些低级别的 widget,直到构建到最底层子 widget ,它会计算并描述 widget 几何形状 flutter...StatelessWidget:无状态,比如标题栏标题 StatefulWidget:有状态,创建需要指定一个 State ,在需要更新 UI时调用 setState(VoidCallbackfn...widget 可同时对应多个 element ---- State 概念 每一个 StatefulWidget 类都会对应一个 State 类,State 表示与其对应 StatefulWidget...要维护状态,保存状态信息可以在 build 获取,同时,在 widget 生命周期中可以改变,改变发生,可以调用其 setState() 方法通知 framework 发生改变,framework...widget 属性表示当前正在关联 widget 实例,但关联关系可能会在 widget 重构发生变化(framework 会动态设置 widget 属性为最新widget 对象)。

1.7K50

Widgetstate到底是什么

下述代码分别展示了在Android、iOS和原生JavaScript,如何将一个文本控件展示文案更改为Hello World: // Android 设置某文本控件展示文案为 Hello World...但是,需要变更界面的文案,我们只要改变数据集中文案数据,并通知Flutter框架触发Widget重新渲染即可。这样一来,开发者将无需精确关注UI编程各个过程细节,只要维护好数据集即可。...所以,我可以采用继承StatelessWidget方式,来进行组件自定义。 第二个小例子是,我需要定义一个计数器按钮,用户每次点击按钮后,按钮颜色都会随之加深。...(比如,用户点击按钮)或者其内部数据变化(比如,网络数据回包),并体现在UI上。...这里你可能会有疑问,如果我在一个默认不可变场景下使用StatefulWidget,那么我肯定不会主动调用其setState方法啊,如果我不主动调用setState,那么不就不会影响StatefulWidget

2.9K20

【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)

createState 函数 : 所处时期 : 初始化期生命周期函数 调用时机 : 创建 StatefulWidget 之后调用一个方法 ; 抽象方法 : 该方法是抽象方法 , 必须覆盖重写该方法...Widget 组件除构造方法之外一个方法 , 对应方法 : 对应 Android onCreate 方法 ; 对应 iOS viewDidLoad 方法 ; 常用用法 : 在该方法执行一些初始化操作...初始化期生命周期函数 /// 该方法是创建 Widget 组件除构造方法之外一个方法 /// 该方法对应 Android onCreate 方法 /// 对应 iOS viewDidLoad...销毁期生命周期函数 /// 方法调用时机 : 该生命周期方法不经常调用 , 只有在组件移除才调用 /// 该方法在 dispose 方法之前调用 @override void deactivate...初始化期生命周期函数 /// 该方法是创建 Widget 组件除构造方法之外一个方法 /// 该方法对应 Android onCreate 方法 /// 对应 iOS viewDidLoad

2.8K00

原来Flutter代码是这样运行在原生系统!快来了解Flutter标准模板,感受原生系统Flutter魅力!

Flutter会根据自带应用模板,自动生成简单计数器示例应用Demo。我们先运行此示例,效果如下: 每点击一次右下角带“+”号悬浮按钮,就可以看到屏幕中央数字随之+1。...MyApp通过MaterialApp这个Flutter App框架设置应用首页,即MyHomePage。..._MyHomePageState通过调用build方法以相应数据配置完成包括导航栏、文本及按钮页面视图创建。 而按钮点击之后,其关联控件函数_incrementCounter会触发调用。...对StatefulWidget数据改变,需重建Widget去更新界面,即Widget创建销毁会很频繁。...如果要将Scaffold页面元素构建封装成一个新Widget类,可以创建一个StatelessWidget或StatefulWidget类,然后在该类build方法返回Scaffold组件代码

35520

为Flutter应用程序添加交互性 顶

小部件状态存储在状态对象,从而将小部件状态与外观分开。 小部件状态改变,状态对象调用setState(),告诉框架重绘小部件。 无状态小部件没有内部状态来管理。...小部件状态改变,状态对象调用setState(),告诉框架重绘小部件。 在本节,您将创建一个自定义有状态小部件。...这些例子都是类似的工作 - 每创建一个容器,点击,在绿色或灰色框之间切换。 _active布尔值确定颜色:绿色表示激活或者灰色表示不激活。 ? ?...ParentWidgetState类: 管理TapboxB_active状态。 实现_handleTapboxChanged(),方块点击时调用该方法。...实现_handleTapboxChanged(),方块点击时调用该方法。 调用setState()以在发生轻击和_active状态改变更新UI。

4.2K20

Flutter 状态管理之GetX库

StatelessWidget(无状态小部件): 它是一个不可变小部件,意味着一旦创建就不能再更改它状态。 它属性(props)在创建设置,并且在整个生命周期中保持不变。...在实践,以下是一些使用场景示例: 使用 StatelessWidget:小部件外观和内容不会随时间而改变,推荐使用 StatelessWidget,例如静态文本、图标等。...使用 StatefulWidget小部件外观和内容需要根据用户交互、数据变化或其他条件动态更新,需要使用 StatefulWidget,例如表单、列表视图等。   ...需要注意是,StatefulWidget 与 State 对象一起工作,后者存储和管理小部件状态。使用 StatefulWidget ,通常需要同时创建一个与之关联状态类。   ...在按钮点击事件我们打印一下日志,下面我们重新运行一下。 点击按钮后,看控制台。

9700

Flutter跨平台移动端开发丨WillPopScope、InheritedWidget、Theme

WillPopScope(返回事件拦截器) InheritedWidget(数据传递与共享) Theme (主题控制) ---- WillPopScope(返回事件拦截器) 可防止误触情况发生,也可监听返回按钮点击事件...= null), super(key: key); onWillPop:返回事件回调函数,点击返回按钮时调用。...@author liyongli 20190514 * */ class InheritedWidgetTest extends InheritedWidget{ int data; // 共享数据...---- Theme (主题控制) 通过 ThemeData 可以控制 Theme 视图内组件风格,颜色、字体、样式等,实际上也是通过 InheritedWidget 来共享与传递主题数据 const...Icons.airport_shuttle), Text(" 切换") ] ), // 在 Theme 也可设置局部保持自己

1.3K30

第130期:flutter状态组件和状态管理

比如我们有个图标,我们想让它支持点击事件,或者在状态改变时候换一个不同图标。 其实我们可以创建一个有状态组件来控制或管理那些需要变化组件。...组件状态发生变化时,state对象调用setstate方法,通知框架重新绘制组件。 **/ 创建一个自定义状态组件需要创建两个类: /** 1....例如,IconButton可以让图标看作是可点击按钮。IconButton是一个无状态小部件,因为我们可以让父组件知道按钮是否点击,以便采取适当操作。...父组件定义了_handleTapboxChanged,组件TapboxB点击时候会更新_active 子组件TapboxB接受active属性,同时定义了onChanged属性方法,点击子组件...和web开发使用场景差不多~ 我们在进行组件封装,本质上是在开发一个自定义状态组件~

1.5K20

带你快速掌握Flutter视图(Widgets)

何在布局添加或删除组件? 如何对 Widget 做动画? 如何绘图(Canvas draw/paint)? 如何构建自定义Widgets? 如何设置Widget透明度?...可以通过将Text包装在StatefulWidget并在点击按钮更新它来实现,: import 'package:flutter/material.dart'; void main() {...例如,点击一个FloatingActionButton,如何在两个Widget之间切换: import 'package:flutter/material.dart'; void main() {...它需要一个 Ticker vsync 发生来发送信号,并且在每帧运行时创建一个介于 0 和 1 之间线性插值(interpolation)。...构建 Widget 树,你会把 Animation 指定给一个 Widget 动画属性,比如 FadeTransition opacity,并告诉控制器开始动画。

10.9K10

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

, 改变该变量值后 , 通过 setState 方法更新 UI 显示 ; 设置点击方法 : BottomNavigationBar onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是点击按钮索引...= index; }); }, /// Widget 组件数组 , 设置多个 Widget 组件 /// 同一间只显示一个页面组件 children: [ HomePage...参数 , 可以获取点击按钮索引 , 然后调用 PageView PageController jumpToPage 方法 实现相应界面跳转 ; BottomNavigationBar(...}); }, /// Widget 组件数组 , 设置多个 Widget 组件 /// 同一间只显示一个页面组件 children:...// 更新当前索引值 _currentIndex = index; }); }, /// 设置底部若干点击导航栏点击按钮

4.1K20

Flutter--FlutterWidget、App生命周期

State,组件从组件树移除,然后重新插入到组件树, createState 函数将会被调用创建一个 State。...createState 函数执行完毕后表示当前组件已经在组件树,此时有一个非常重要属性 mounted Framework 设置为 true。...调用 deactivate 之后,然后将 State 对象重新插入树另一个位置。 此方法可以在每一帧调用,此方法应该只包含构建组件代码,不应该包含其他额外功能,尤其是耗时任务。...和 BuildContext 进行关联, Framework 调用 dispose,mounted 设置为 false,表示当前组件已经不在树。...1.3.3 setState setState 方法是开发者经常调用方法,此方法调用后,组件状态变为 dirty,有数据要更新,调用此方法。

2.6K31

Flutter 如何跨组件传递数据

树中共享数据场景中非常方便, Flutter ,正是通过 InheritedWidget 来共享应用主题( Theme )和 Locale (当前语言环境)信息。...点击按钮,count+1,在最下面的一个 widget 上面显示 class InheritedDemo extends StatefulWidget { @override _InheritedDemoState..., Widget child}) : super(child: child); final int data; //需要在子树中共享数据,保存点击次数 //定义一个便捷方法,方便子树widget...Notification Notification 是 Flutter 中进行跨层数据共享另一个重要机制。...事件总线是在 Flutter 实现跨组件通信机制。它遵循发布 / 订阅模式,允许订阅者订阅事件,发布者触发事件,订阅者和发布者之间可以通过事件进行交互。

2.7K10
领券