如何从颤振中的其他StatefulWidget设置/更新StatefulWidget的状态?

1、在子窗口小部件上:添加参数函数parameter

class ChildWidget extends StatefulWidget {
  final Function() notifyParent;
  ChildWidget({Key key, @required this.notifyParent}) : super(key: key);
}

2、在父窗口小部件上:为子窗口小部件创建一个回调函数

refresh() {
  setState(() {});
}

3、在父窗口小部件上:将parentFunction传递给子窗口小部件

new ChildWidget( notifyParent: refresh );  

4、在子窗口小部件上:调用父函数

  widget.notifyParent();

屏幕截图(父到子、子到父):

此示例显示如何调用方法

1. 在父窗口小部件的子窗口小部件中定义。
2. 在子窗口小部件的父窗口小部件中定义。

代码:

class ParentPage extends StatelessWidget {
  final GlobalKey<ChildPageState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Parent")),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.grey,
                width: double.infinity,
                alignment: Alignment.center,
                child: ElevatedButton(
                  child: Text("Call method in child"),
                  onPressed: () => _key.currentState!.methodInChild(), // calls method in child
                ),
              ),
            ),
            Text("Above = Parent\nBelow = Child"),
            Expanded(
              child: ChildPage(
                key: _key,
                function: methodInParent,
              ),
            ),
          ],
        ),
      ),
    );
  }

  methodInParent() => Fluttertoast.showToast(msg: "Method called in parent", gravity: ToastGravity.CENTER);
}

class ChildPage extends StatefulWidget {
  final VoidCallback function;

  ChildPage({Key? key, required this.function}) : super(key: key);

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

class ChildPageState extends State<ChildPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.teal,
      width: double.infinity,
      alignment: Alignment.center,
      child: ElevatedButton(
        child: Text("Call method in parent"),
        onPressed: () => widget.function(), // calls method in parent
      ),
    );
  }

  methodInChild() => Fluttertoast.showToast(msg: "Method called in child");
}

旧的解决方案 :

1. 创建\u MyHomePageState的全局实例。在子状态中使用此实例作为\u myHomePageState。设置状态
2. 无需创建全局实例。相反,只需将父实例传递给子小部件

新解决方案 :传递回调似乎是比上述解决方案更好的解决方案

根据颤振2.0更新代码 :

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

EdgeInsets globalMargin =
    const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
TextStyle textStyle = const TextStyle(
  fontSize: 100.0,
  color: Colors.black,
);

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('SO Help'),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            number.toString(),
            style: textStyle,
          ),
          new GridView.count(
            crossAxisCount: 2,
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: <Widget>[
              new InkResponse(
                child: new Container(
                    margin: globalMargin,
                    color: Colors.green,
                    child: new Center(
                      child: new Text(
                        "+",
                        style: textStyle,
                      ),
                    )),
                onTap: () {
                  setState(() {
                    this.number++;
                  });
                },
              ),
              new Sub(onTap: () {
                setState(() {
                  this.number--;
                });
              }),
            ],
          ),
        ],
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          setState(() {});
        },
        child: new Icon(Icons.update),
      ),
    );
  }
}

class Sub extends StatelessWidget {
  final Function onTap;
  Sub({this.onTap});

  @override
  Widget build(BuildContext context) {
    return new InkResponse(
      child: new Container(
        margin: globalMargin,
        color: Colors.red,
        child: new Center(
          child: new Text(
            "-",
            style: textStyle,
          ),
        ),
      ),
      onTap: this.onTap,
    );
  }
}

只要让我知道它是否有效。

如果你需要的话,我想延长穆罕默德·埃尔拉希德的回答 将变量从子小部件传递到父小部件

在子窗口小部件上:

class ChildWidget extends StatefulWidget {
  final Function() notifyParent;
  ChildWidget({Key key, @required this.notifyParent}) : super(key: key);
}

在父窗口小部件上

void refresh(dynamic childValue) {
  setState(() {
    _parentVariable = childValue;
  });
}

在父窗口小部件上:将上面的函数传递给子窗口小部件

new ChildWidget( notifyParent: refresh ); 

在子窗口小部件上:使用子窗口小部件中的任何变量调用父函数

widget.notifyParent(childVariable);

旧的,但我会根据我的发现添加我的答案:

var ancestralState = context.findAncestorStateOfType<ParentState>();
      ancestralState.setState(() {
        // here you can access public vars and update state.
        ...
      });

这是对我有效的解决方案。

输出: 购物车小部件的状态在添加项目后更新。

创建 globalKey 对于要通过调用 trigger from anywhere

final GlobalKey<CartWidgetState> cartKey = GlobalKey();

确保它保存在具有全局访问权限的文件中,以便可以从任何地方访问它。 我将其保存在globalClass中,其中通过应用程序的状态保存常用变量。

class CartWidget extends StatefulWidget {

  CartWidget({Key key}) : super(key: key);
  @override
  CartWidgetState createState() => CartWidgetState();
}

class CartWidgetState extends State<CartWidget> {
  @override
  Widget build(BuildContext context) {
    //return your widget
    return Container();
  }
}

从其他类调用您的小部件。

class HomeScreen extends StatefulWidget {

  HomeScreen ({Key key}) : super(key: key);
  @override
  HomeScreenState createState() => HomeScreen State();
}

class HomeScreen State extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return ListView(
              children:[
                 ChildScreen(), 
                 CartWidget(key:cartKey)
              ]
            );
  }
}



class ChildScreen extends StatefulWidget {

  ChildScreen ({Key key}) : super(key: key);
  @override
  ChildScreenState createState() => ChildScreen State();
}

class ChildScreen State extends State<ChildScreen> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
              onTap: (){
                // This will update the state of your inherited widget/ class
                if (cartKey.currentState != null)
                    cartKey.currentState.setState(() {});
              },
              child: Text("Update The State of external Widget"),
           );
  }
}

class HomePage extends StatefulWidget {

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

class HomePageState extends State<HomePage> {

  int selectedIndex = 0;

   void setSelectedIndex(int index){
     setState(() {
      selectedIndex = index;
     });
  }
}

class TestPage extends StatefulWidget {

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

class TestPageState extends State<TestPage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
     return  GestureDetector(
                      onTap: (){

                        final HomePageState state = context.findAncestorStateOfType<HomePageState>();

                        state.setSelectedIndex(4);

                      },
                    child: Container(
                        width: 100,
                        height: 100,
                        color: Colors.green
              )
     );
  }

}

虽然前面的大多数答案都可以,但我建议您探索提供商或集团架构,这两种架构都是谷歌推荐的。

简言之,后者将创建一个流,每当状态发生变化时,该流将向小部件树中的小部件报告,并更新所有相关视图,无论从何处更新。

以下是一个很好的概述,您可以阅读以了解有关该主题的更多信息: https://bloclibrary.dev/#/