Flutter子组件调用父组件方法修改父组件参数

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

父级组件实现

在父级组件中写一个**_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);    // 调用父级组件方法 }); }, ) ], ), ); } }
点赞
收藏

评论区

加载中...

相关推荐

vue最新面试题

最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestr

vue的8种通信方式

1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"

tomcat系列之五:Tomcat各个组件生命周期

一,Tomcat中各个组件的关系1,组件有大有小,大组件管理小组件。比如Server管理Service,Service管理连接器和容器2,组件有内有外,外层组件控制内层组件。比如外层组件连接器负责对外交流,外层组件调用内层组件完成业务功能二,创建组件的顺序先创建子组件,再创建父组件,然后把子组件注入到父组件中先创建内层组件,再创建外层

React 组件间通信的10种方法

组件间通信方式总结父组件子组件:1.Props2.InstanceMethods子组件父组件:1.CallbackFunctions2.EventBubbling兄弟组件之间:1.ParentComponent不太相关的组件之间:1.Context2.Portals3.Global

React 组件通信之发布订阅模式

React通信react的数据流是单向的,react通信有以下几种方式:父向子通信:传入props子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值父向孙通信:利用context传值。React.createContext()兄弟间通信:​1、找一个相同的父组件,既可以用pr

练习父组件调用子组件方法----发表评论案例

<DOCTYPEhtml<htmllang"en"<head<metach

Flutter子组件调用父组件方法修改父组件参数 - HelloWorld