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

父级组件实现

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

class PageParent extends StatefulWidget {
@override
_PageParentState createState() => _PageParentState();
} class _PageParentState extends State<PageParent> {
String contentText; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('父级组件'),
),
body: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Text('这里是父级组件参数',),
Text('${contentText}',style: TextStyle(color: Colors.red),)
],
),
),
PageChildren(editParentText: (editText) => _editParentText(editText))    // 给子组件传入_editParentText()方法
],
),
),
);
}

 // 修改contentText参数
_editParentText(editText) {
setState(() {
contentText = editText;
});
} }

  

子级页面是实现

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

class PageChildren extends StatefulWidget {
final editParentText;
const PageChildren({Key key, this.editParentText}) : super(key: key);
@override
_PageChildrenState createState() => _PageChildrenState();
} class _PageChildrenState extends State<PageChildren> {
TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
color: Colors.grey,
child: Column(
children: <Widget>[
Text('这里是子级组件'),
Container(
width: 200,
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 30),
child: TextField(
controller: _controller,
),
),
RaisedButton(
child: Text('修改参数'),
onPressed: (){
setState(() {
widget.editParentText(_controller.text);    // 调用父级组件方法
});
},
)
],
),
);
} }

  

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. vue-filters(过滤器)

    局部过滤器: <html> <head> <title>vue</title> <meta charset="utf-8"&g ...

  2. babel-plugin-transform-remove-strict-mode

    场景:在VUE项目中,需要用到横向滚动条,在引入MUI相关的组件后,模板中的代码如下 在控制台中报错 报错内容说的是在严格模式下(strict mode)类型错误 经过推测,觉得可能是mui.js中用 ...

  3. H5各种头部meta标签功能大全

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  4. SQLiteDatabase执行update、insert操作的时候,conflictAlgorithm参数的含义区别

    /** * When a constraint violation occurs, an immediate ROLLBACK occurs, * thus ending the current tr ...

  5. tornado 常见问题处理

    1 怎么获取从页面中的传值 使用 self.get_body_argument tornado的参数存储在self.request.body内,通过json以后就可以直接取值,当初我在前端使用angu ...

  6. [Selenium3+python3.6]自动化测试2-入门

    参考http://www.cnblogs.com/yoyoketang/p/6123890.html #coding=utf-8 #Import webdriver time module from ...

  7. U盘装manjaro 18报Python error in job “initcpio”

    更新: 还是不行,大家再找别的方法. 以下内容仅做参考,意义不大. U盘安装 用rufus做U盘,写入选DD模式,比ISO模式可靠点. 错误解决 报错信息: Error installing Manj ...

  8. 多域名解析到同一网站C的php重定向代码

    在index.php最前面加上以下代码: <?php if(strpos($_SERVER['HTTP_HOST'],'afish.cnblogs.com')===false){ #header ...

  9. Derby 数据库基本操作 命令

    0. 命令行 登录/退出 登录 java org.apache.derby.tools.ij ..\dirs>java org.apache.derby.tools.ij ij 版本 10.3 ...

  10. 玩深度学习选哪块英伟达 GPU?有性价比排名还不够!

    本文來源地址:https://www.leiphone.com/news/201705/uo3MgYrFxgdyTRGR.html 与“传统” AI 算法相比,深度学习(DL)的计算性能要求,可以说完 ...