子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数。看一下效果图

父级组件实现

在父级组件中写一个_editParentText的方法来修改组件中的contentText值,并在引入子组件的时候传入该方法

  1. class PageParent extends StatefulWidget {
  2. @override
  3. _PageParentState createState() => _PageParentState();
  4. }
  5.  
  6. class _PageParentState extends State<PageParent> {
  7. String contentText;
  8.  
  9. @override
  10. Widget build(BuildContext context) {
  11. return Scaffold(
  12. appBar: AppBar(
  13. title: Text('父级组件'),
  14. ),
  15. body: Container(
  16. alignment: Alignment.center,
  17. child: Column(
  18. children: <Widget>[
  19. Container(
  20. padding: EdgeInsets.all(20),
  21. child: Column(
  22. children: <Widget>[
  23. Text('这里是父级组件参数',),
  24. Text('${contentText}',style: TextStyle(color: Colors.red),)
  25. ],
  26. ),
  27. ),
  28. PageChildren(editParentText: (editText) => _editParentText(editText))    // 给子组件传入_editParentText()方法
  29. ],
  30. ),
  31. ),
  32. );
  33. }

  34.  // 修改contentText参数
  35. _editParentText(editText) {
  36. setState(() {
  37. contentText = editText;
  38. });
  39. }
  40.  
  41. }

  

子级页面是实现

在子级页面中定义一个editParentText用于接收父级传过来的方法,然后直接通过widget.editParentText('传回的参数')即调用父级组件的_editParentText方法

  1. class PageChildren extends StatefulWidget {
  2. final editParentText;
  3. const PageChildren({Key key, this.editParentText}) : super(key: key);
  4. @override
  5. _PageChildrenState createState() => _PageChildrenState();
  6. }
  7.  
  8. class _PageChildrenState extends State<PageChildren> {
  9. TextEditingController _controller = TextEditingController();
  10. @override
  11. Widget build(BuildContext context) {
  12. return Container(
  13. alignment: Alignment.center,
  14. color: Colors.grey,
  15. child: Column(
  16. children: <Widget>[
  17. Text('这里是子级组件'),
  18. Container(
  19. width: 200,
  20. color: Colors.white,
  21. margin: EdgeInsets.symmetric(vertical: 30),
  22. child: TextField(
  23. controller: _controller,
  24. ),
  25. ),
  26. RaisedButton(
  27. child: Text('修改参数'),
  28. onPressed: (){
  29. setState(() {
  30. widget.editParentText(_controller.text);    // 调用父级组件方法
  31. });
  32. },
  33. )
  34. ],
  35. ),
  36. );
  37. }
  38.  
  39. }

  

Flutter子组件调用父组件方法修改父组件参数的更多相关文章

  1. element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数

    比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...

  2. 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法

    1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData"   2. 子组件在props中,接收这个方法并声明 props: { onUp ...

  3. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  4. 14. VUE 子组件修改父组件的值

    在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...

  5. vue+Elment-UI,修改element组件样式

    在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...

  6. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  7. C#方法中的各类参数

    居家隔离的第26天,还在持续的疫情着实让人担忧,看着每天新增的确认人数数字,也在为那些家庭祝福,每当想想那不是一个数字是一条条鲜活的生命时就格外沉重.利用闲在家里的时间巩固C#语言的一个难点.最近在温 ...

  8. 使用vuex实现父组件调用子组件方法

    曲线救国. 核心原理就是父子共用一个vuex对象,且看代码: 父组件parent.vue <template> <div class="wrap"> < ...

  9. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

随机推荐

  1. CentOS7使用yum安装PostgreSQL和PostGIS

    更新yum源 CentOS7默认yum源的PostgreSQL版本过低,不适合在本版本上使用.在https://yum.postgresql.org/repopackages.php上找到适合Cent ...

  2. Go 信道Channel

    信道(Channel) 信道(Channel)可以被认为是协程之间通信的管道.数据可以从信道的一端发送并在另一端接收. 默认为同步模式,需要发送和接收配对.否则会被阻塞,直到另外的信道准备好后被唤醒. ...

  3. stm32 usart 串口

    比特率是每秒钟传输二进制代码的位数,单位是:位/秒(bps).如每秒钟传送240个字符, 而每个字符格式包含10位(1个起始位.1个停止位.8个数据位),这时的比特率为: 10位 × 240个/秒 = ...

  4. 操作系统 (OS)

    1. 操作系统(Operation System,OS) 操作系统作为接口的示意图 没有安装操作系统的计算机,通常被称为 裸机 如果想在 裸机 上运行自己所编写的程序,就必须用机器语言书写程序 如果计 ...

  5. Python爬微信好友头像,性别,所在地区

    本文适合新手(有一定基础的小白) 今天没事,用的网页版微信,于是看源码心理作怪,F12打开,研究了一下,结果发现 /斜眼笑/斜眼笑/斜眼笑 再加上,没事干,(大家有好工作求介绍,本人待就业),Pyth ...

  6. js中对new Date() 中转换字符串方法toLocaleString的使用

    提供特定于区域设置的日期和时间格式. dateTimeFormatObj = new Intl.DateTimeFormat([locales][, options]) dateTimeFormatO ...

  7. idou老师教你学Istio 26:如何使用Grafana进行可视化监控

    使用Grafana插件进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,Grafana插件在Istio对Prometheus支持的基础上,为用户提供基于网页仪表面板的可视化监控效果 ...

  8. MySQL-进阶7-子查询 - select后/where后/from后/ []where后/having后] / exists后面 的相关子查询

    /*SQL-进阶7-子查询 含义:出现在其他语句中的select 语句,称为子查询或内查询 外部的查询语句,称为主查询 或者 外查询 分类1:按子查询出现的位置———— select 后面:仅仅支持标 ...

  9. 陈硕muduo

    https://github.com/chenshuo/muduo muduo 阅读 https://www.cnblogs.com/qbits/p/11101678.html

  10. mybatis+mysql批量插入和批量更新

    一.批量插入 批量插入数据使用的sql语句是: insert into table (字段一,字段二,字段三) values(xx,xx,xx),(oo,oo,oo) mybatis中mapper.x ...