• 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(
                 200,
                color: Colors.white,
                margin: EdgeInsets.symmetric(vertical: 30),
                child: TextField(
                  controller: _controller,
                ),
              ),
              RaisedButton(
                child: Text('修改参数'),
                onPressed: (){
                  setState(() {
                    widget.editParentText(_controller.text);    // 调用父级组件方法
                  });
                },
              )
            ],
          ),
        );
      }
    
    }
    

      

  • 相关阅读:
    powershell 统计AD中所有计算机及对应的操作系统信息
    centos7安装图形化界面
    centos7使用cobbler(2.8)批量部署操作系统之二
    centos7使用cobbler(2.8)批量部署操作系统之一
    自画一张linux基础架构学习框架图
    python编程快速上手之第10章实践项目参考答案
    python编程快速上手之第9章实践项目参考答案
    mysql基础之yum安装mysql5.7.18
    mysql基础篇-----mysql简介
    百度前端面试题(一)
  • 原文地址:https://www.cnblogs.com/gxsyj/p/11121002.html
Copyright © 2020-2023  润新知