如何从父小部件更改一个子小部件的状态，其中子小部件是单独文件中的单独类？

Question

如何通过单击 RaisedButton 将框的颜色从蓝色更改为绿色？我正在使用 Flutter 网页版。

class _MyAppState extends State<MyApp> {
  Color colorOfBox = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "App",
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.all(50),
          child: Center(
            child: Column(
              children: <Widget>[
                Text("This blue has to change to green."),    
                Box(colorOfBox),
                RaisedButton(
                  color: Colors.red,
                  onPressed: () {
                    setState(() {
                      colorOfBox = Colors.green;

                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Box extends StatefulWidget {
  Color c;
  Box(this.c, {Key key}) : super(key: key);

  @override
  _BoxState createState() => _BoxState(c);
}

class _BoxState extends State<Box> {
  Color c;
  _BoxState(this.c);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      color: c,
    );
  }
}

Answer 1

从_BoxState 中删除Color c

class Box extends StatefulWidget {
  Color c;
  Box(this.c, {Key key}) : super(key: key);

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

class _BoxState extends State<Box> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      color: widget.c,
    );
  }
}