zoukankan      html  css  js  c++  java
  • 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);    // 调用父级组件方法
                  });
                },
              )
            ],
          ),
        );
      }
    
    }
    

      

  • 相关阅读:
    JS站点
    1011 World Cup Betting (20分)
    1007 Maximum Subsequence Sum (25分)(动态规划DP)
    1006 Sign In and Sign Out (25分)
    1005 Spell It Right (20分)
    1004 Counting Leaves (30分)(DFS)
    1003 Emergency (25分)(Dijkstra算法)
    1002 A+B for Polynomials (25分)
    1001 A+B Format (20分)
    canvas
  • 原文地址:https://www.cnblogs.com/gxsyj/p/11121002.html
Copyright © 2011-2022 走看看