如何从另一个小部件更改有状态小部件的变量？

Question

如何从另一个widget 更改一个Widget 的变量？这是名为 HomePage:

的主要有状态小部件

class _HomePageState extends State<HomePage> {
  @override
  num counter = 0;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Title")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [Text(counter.toString()), CardWidget()],
          ),
        ));
  }
}

这是 CardWidget 添加到 HomePage:

class CardWidget extends StatefulWidget {
  const CardWidget({Key? key}) : super(key: key);

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

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      children: [
        Text("Press the button to increment the counter"),
        ElevatedButton(
          onPressed: () {
            //Something here to increment the counter in HomePage
          },
          child: const Text('Increment'),
        ),
      ],
    ));
  }
}

这是屏幕上显示的内容：

是否可以在两个小部件之间创建连接：如果我点击按钮，主页小部件中会发生什么事情吗？（类似于 UIKit 中的委托）

Answer 1

对于这种情况，您有一些解决方案：

1、为StatefullWidget创建GlobalKey，即可从HomePage访问State

2、从主页创建一个Stream并传递给StatefullWidget

3, 将参数传给StatefullWidget 并使用didUpdateWidget on state 来监听

Answer 2

可以传递Function参数。在您的 CardWidget 中添加 Function 参数。

class CardWidget extends StatefulWidget {
  //Add clicked function
  final Function onClicked;
  const CardWidget({Key? key, required this.onClicked}) : super(key: key);

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

class _CardWidgetState extends State<CardWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      children: [
        Text("Press the button to increment the counter"),
        ElevatedButton(
          onPressed: () {
            //Something here to increment the counter in HomePage
            //Execute `onClicked` and pass parameter you want
            _count++;
            widget.onClicked(_count);
          },
          child: const Text('Increment'),
        ),
      ],
    ));
  }
}

然后在 HomePage 添加 onClicked 参数

class _HomePageState extends State<HomePage> {
  @override
  num counter = 0;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Fontanelle")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
               Text(counter.toString()),
               CardWidget(
                //Add onClicked
                 onClicked:(count){
                    print("Clicked "+count.toString());
                 }
               )
            ],
          ),
        ));
  }
}

Answer 3

我记得这是我的第一个问题，我是什么时候迈出第一步的，@dangngocduc 怎么说是真的，但我的建议是阅读 BLOC

https://pub.dev/packages/flutter_bloc

这对做这件事很有帮助。

如何从另一个小部件更改有状态小部件的变量？

How to change variable of a stateful widget from another widget?

delegates

widget

dart

flutter

flutter-layout