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

父级组件实现

在父级组件中写一个_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. datatables初始化用法

    var recordTable = $('#record_table').DataTable({ "fnInitComplete": function () { //表格初始化完成 ...

  2. C语言程序经过编译链接后形成二进制映像文件的组成

    C语言程序经过编译链接后形成二进制映像文件由栈,堆,数据段,代码段组成,其中数据段又分为:只读数据段,已经初始化读写数据段,未初始化数据段(BSS段).如下图所示: 1.栈区(stack):由编译器自 ...

  3. Ubuntu下双显示器设定

    自8.10后的版本,系统自带了xrandr工具,可以很好的实现双显示器.配置与使用如下: 介绍    X Windows 中有一个显示分辨率的概念,在默认情况下,这个显示分辨率为 max*max ,m ...

  4. gitlab中的几个常用界面(runner管理、gitlab-ci.yml管理、runner token管理、新建用户、拉用户入工程、拉用户入组、复制工程导入组)

    目录: 1.runner管理 2.gitlab-ci.yml管理 3.runner token管理 4.新建用户 5.拉用户入工程 6.拉用户入组 7.复制工程导入组 1.runners界面 http ...

  5. js 实现复制功能的四种方式的优劣对比

    今日网上浏览别人项目,看到有人用了document.execCommand这个属性,于是想起之前我选用Clipboard.js 来实现.对于这种不常用的属性还是不太放心,于是随手查了下关于复制的资料, ...

  6. html和css的一些常用标签使用

    HTML(HyperText Mark-up Language)超文本标签语言 <!DOCTYPE html> <!--声明这是一个html文档--> <html> ...

  7. Spotlights【思维+前缀和优化】

    https://blog.csdn.net/mengxiang000000/article/details/53291883   原博客地址 http://codeforces.com/group/1 ...

  8. api文档设计工具:RAML、Swagger

    api文档设计工具是用来描述和辅助API开发的. 一.RAML https://raml.org/ https://wenku.baidu.com/view/9523238d5ef7ba0d4b733 ...

  9. linux实操_进程管理

    1.显示系统执行的进程 说明:查看进程使用的的指令时 ps ,一般来说使用的参数时ps -aux ps -a:显示当前终端的所有进程信息 ps -u:以用户的格式显示进程星系 ps -x:显示后台进程 ...

  10. .net FileUpload上传图片 图片转换二进制,以及保存显示

    protected void Button1_Click(object sender, EventArgs e) { Stream stream = FileUpload1.PostedFile.In ...