从有状态的父部件修改有状态的子部件中的值答案

【问题标题】：Modify value in statefull child widget from its statefull parent从有状态的父部件修改有状态的子部件中的值
【发布时间】：2021-01-21 23:19:14
【问题描述】：

我有两个小部件。两者都是有状态的小部件。我在主页小部件中放置了一个按钮和子小部件。当单击 HomePage 小部件中的按钮时，我想从 HomePage 小部件更改 Child 小部件中的计数器变量。我应该为此使用 setState 方法，但我不能从子小部件外部调用它。这样做的正确方法是什么？

家长

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Child(),
          FlatButton(
            onPressed: () {

              //Increase Child widget's counter variable
              
            },
            child: Text("Button In Parent"),
            color: Colors.amber,
          )
        ],
      ),
    );
  }
}

儿童

class Child extends StatefulWidget {
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State<Child> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Text In Child: ',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              //Increase this variable from parent
              counter.toString(),
              style: TextStyle(fontSize: 50),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart widget parent-child

【解决方案1】：

您可以使用父小部件的setState 来重建子小部件。在父窗口小部件中初始化一个计数器变量并将其递增并调用setState。

在父小部件中FlatButton 的onTap 中

setState(() {
   counter++;
});

让Child 小部件将此作为参数Child(counts: counter)

class Child extends StatefulWidget {
  final int counts;

  Child({this.counts});
  @override
  _ChildState createState() => _ChildState();
}

并在您的Child 中的Text 中显示它

Text(
  widget.counts.toString(),
  style: TextStyle(fontSize: 50),
),

这是一种方法。

【讨论】：

【解决方案2】：

你必须在同一个类中使用 FlatButton 和 setState 否则你无法访问类变量，使用下面的代码并尝试理解 setState 的逻辑。祝你有美好的一天。

class Child extends StatefulWidget {
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State<Child> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Text In Child: ',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              //Increase this variable from parent
              counter.toString(),
              style: TextStyle(fontSize: 50),
            ),
          Expanded(
            child:Container(
              color:Colors.white,
              child:FlatButton(
                onPressed(){
                  setState((){
                    counter=counter+1;
                });
              };
            ),
          ),          
        ),         
      ],
    );
  }
}

【讨论】：