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

Stella981
• 阅读 1436

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

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);    // 调用父级组件方法
              });
            },
          )
        ],
      ),
    );
  }

}
点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
vue最新面试题
最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestr
Chase620 Chase620
3年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
Souleigh ✨ Souleigh ✨
4年前
React 组件间通信的10种方法
组件间通信方式总结父组件子组件:1.Props2.InstanceMethods子组件父组件:1.CallbackFunctions2.EventBubbling兄弟组件之间:1.ParentComponent不太相关的组件之间:1.Context2.Portals3.Global
Easter79 Easter79
3年前
tomcat系列之五:Tomcat各个组件生命周期
一,Tomcat中各个组件的关系1,组件有大有小,大组件管理小组件。比如Server管理Service,Service管理连接器和容器2,组件有内有外,外层组件控制内层组件。比如外层组件连接器负责对外交流,外层组件调用内层组件完成业务功能二,创建组件的顺序先创建子组件,再创建父组件,然后把子组件注入到父组件中先创建内层组件,再创建外层
爱丽丝13 爱丽丝13
3年前
React 组件通信之发布订阅模式
React通信react的数据流是单向的,react通信有以下几种方式:父向子通信:传入props子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值父向孙通信:利用context传值。React.createContext()兄弟间通信:​1、找一个相同的父组件,既可以用pr
LinMeng LinMeng
4年前
Chase620 Chase620
3年前
关于:父组件中的子组件中的子组件(孙级)添加数据后怎么样去调用父组件中的方法呢?
1、需求引入image.png这是父组件下的子组件的子组件,一个绑定子设备的弹出窗modal,那么我们怎么样在这个组件中选中子设备后点击确定时去触发父组件的父组件的table列表数据刷新呢?image.pngimage.pngimage.png组件的层级关系.png上述的图示便是部分代码的展示,一般的组件传值有父组件传子组件(
Stella981 Stella981
3年前
FLutter父子组件通信
本文介绍flutter父子组件数据传递和回调.还是以之前的代码为例Flutter\_DayByDay(https://gitee.com/Royce_he/Flutter_DayByDay)由于之前用ReactNative写项目,顺便对比一下RN父组件直接在xml标签中写属性{值/方法},子组件通过props去取属性和方法
达里尔 达里尔
1年前
layui复选框取消父级子级的关联
layui项目中需要个需求,layui树形结构组件tree,复选框选中的时候不能影响子级和父级,现在是复选框选中的时候父级多选会被选中,子级也会被选中有个参数,tree.js源码里有一个参数可以解决,但是现在layui的文档里没有渲染树形结构的时候加个参数
昔不亏 昔不亏
3星期前